CSS: is the abbreviation of Cascading Style Sheet, translated as [Cascading Style Sheet], which is a set of formatting rules. Is a markup language used for (enhanced) control over web page styling and allowing the separation of style information from web content.
Composition of CSS: The definition of CSS is composed of three parts: selector (Selector), properties (properties) and property value (value). Syntax: selector{proprety:value} (selector{property:property value})
Things to note:
1. The CSS declaration block consists of: selector + "{" + one or more CSS attributes + "}".
2. CSS is case-insensitive, and lowercase is recommended in CSS syntax.
1. CSS selectors
It is the name of a CSS style. When a CSS style is displayed in an HTML document, a CSS is used. How to use it? At this time, the CSS selector (CSS name) is used to specify that this HTML tag uses this CSS style.
2. Selector syntax
A CSS selector defines a style.
selector name {declaration;}
for example:
p{font-size:12px;}.dreamdublue{color:blue;}.dreamdu18px{font-size:18px;}#dreamdured{color:red;}P, dreamdublue, and dreamdured are all selectors.
3. Selector naming rules
CSS selectors can use uppercase and lowercase English letters, numbers, hyphens, underlines, colons, and periods.
(1) English letters uppercase and lowercase AZ az
(2) Numbers 0-9
(3) Hyphen -
(4) Underline_
(5) Colon:
(6) Period.
Note: CSS selectors can only start with letters.
4. Selector classification
CSS selectors can be divided into many categories, such as: type selector, id selector, class selector, universal selector, group selector, inclusion selector, element specific selector, sub-object selector, attribute selector, related selector Neighbor selectors, etc. will be introduced and analyzed one by one below.
1. Type selector: The type selector is the web page element itself, and the element name is used directly when defining.
Body{/*Define page attributes*/}Div{Width:774px;/*Define all div elements to have a width of 774 pixels*/}2. id selector: It is unique. The id values of different elements cannot be repeated. The id selector defines different styles for the specific objects of each element, which facilitates users to control the page more precisely. When using the id selector, you must first define an id attribute for each element.
<divid="top"></div>When using the id selector, you need to use # for identification: #top{Width:774px;/*Define all div elements to have a width of 774 pixels*/}3. Class selector: The same class name can be defined for different types of elements in a document. Class can unify elements of the same style into one category. When using the class selector, you must first define a class attribute for each element. :
<divclass="red"></div><spanclass="red"></span><pclass="red"></p>When using the class selector, you need to use English . (dot) for identification: . red{Color:red;}4. Universal selector: It is a special selector, represented by *, which is a selector that is used but easy to ignore.
*{font-size:12pt;/*Define the size of all fonts in the document to 12pt*/}5. Group selector: Group selector is not a selector type, but a selector method. When multiple objects define the same style, we can group them into a group. This can simplify code reading and writing, such as:
.class1{font-size:13px;color:red;text-decraotian:underline;}.class2{font-size:13px;color:blue;text-decroation:underline;}Can be grouped into:
.class1,class2{font-size:13px;text-decroation:underline;}.class1{color:red;}.class2{color:blue;}There are two principles for using grouping: 1. Aspect principle; 2. Proximity principle (if several elements are adjacent, you can consider using grouping selectors within a module)
6. Contains selectors: The most useful type of selectors, which can simplify code and achieve a wide range of style control. for example:
.div1h2{/*Define the title style of all h2 in the class div1 layer*/font-size:18px;}.div1p{/*Define the title style of all p in the class div1 layer*/font-size:12px;}7. Element-specified selectors: Sometimes we want to control the style of a certain element within a certain range. In this case, we can use class or id selectors in combination. for example:
span.red{/*Define the color of the element with class red in the span element as red*/color:red;}div#top{/*Define the width of the element with id as top in the div element as 100%*/width:100% ;}eg:<div><h2><h2><p></p><span></span></div>It is obviously not possible to use the news selector in the above code. It is not good to use P directly. The h2 type selector is not good either. Then you can use the element to specify the selector.
p.news{} h2.news{} span.news{}
8. Sub-object selectors: Like element selectors, they are restriction selectors, that is, element styles that meet the restriction conditions are defined within a certain range of elements. The element-specific selector uses class and id attributes as restrictions, while sub-object selectors The selector uses id and sub-object as constraints.
#main>table{/*Define the style of the sub-object table in the main module with id as main*/width:788px;font-size:12px;}#main>.title{/*Define the sub-object in the main module with id as main The class of the object is the style of title*/color:red;font-style:italic;}9. Attribute selector: The attribute selector is to add a bracket after the element, and various attributes or expressions are listed in the brackets. There are 7 specific forms of attribute selectors:
(1) Existence attribute matching: Control the style of the element by matching existing attributes. Generally, the matching attributes should be included in brackets, and only the names should be listed without assigning values:
h1[class]{color:red;/*Applies to any h1 element with class attribute regardless of the value of class*/}img[alt]{border:none;/*Applies to any img element with alt attribute regardless of alt What is the value*/}a[href][title]{font-weight:bold;/*functions as an element with both href and title attributes*/}(2) Precise attribute matching: The style will be applied only when the attribute value completely matches the specified attribute value. The id and class selectors are actually precise attribute selection.
a[href=www.163.com][title=NetEase]{font-size:12px;/*The function address points to www.163.com and the title prompt is NetEase’s a element*/}(3) Blanks are matched individually: By defining a list of strings for attributes, you can control the element style as long as you match any one of the strings.
<spanclass=abc>Who controls my style</span> You can use the following styles to control: [class^=a]{color:red;} or: [class^=b]{color:red;} or: [class^=c]{color:red;} or: span[class^=c]{color:red;}(4) Hyphen matching: The function and usage are the same as whitespace matching, but the string list in hyphen matching is separated by hyphens.
<span>Who will control my styles</span>
This can be controlled using the following styles:
[class|=a]{color:red;} or: [class|=a]{color:red;} or: [class|=b]{color:red;} or: [class|=c]{color :red;} or: span[class|=c]{color:red;}(5) Prefix selector: As long as the starting character of the attribute value matches the specified string, the style can be applied to the element. Prefix matching is implemented using the [^=] form:
<div>Prefix matching</div>
You can use the following style controls
[class^=my]{color:red;}(6) Suffix matching: Contrary to prefix, as long as the end character of the attribute matches the specified character, use [$=] form control.
<div>Suffix matching</div>
You can use the following style controls
[class$=Test]{color:red;}(7) Substring matching: The style is applied as long as the specified string exists in the attribute, and is controlled in the [*=] form.
<div>Substring matching</div>
You can use the following style controls
[class*=est]{color:red;}10. Adjacent selector: refers to the next element adjacent to the element.
div+p{font-size:24px;/*Applies to all p elements immediately after the div element, defining the font size of the p element as 14px*/}eg:<divid=wrap><divid=sub_wrap><h1>< /h1><p></p></div><p></p></div>To control the bottom p element separately unless you define a class and id attribute for it, you can do it by using adjacent selectors.
#sub_wrap+p{font-size:14px;}