1. Overview of CSS styles

Cascading Style Sheets CSS: Cascading Style Sheets

  • Achieve the same page effect in a uniform way
  • Separate page content (HTML) from style (CSS)
  • Improve code reusability and maintainability

CSS3 is the latest version of the CSS specification, adding many new features on the basis of CSS2.1, such as rounded corners, multi-backgrounds, shadows, and so on.

CSS style definition format: consists of a selector and one or more declarations.

selector {declaration1; declaration2; . declarationN }Copy the code

Selector: an HTML element declaration that needs to be styled declaration: consists of an attribute and a value.

In addition to following the CSS style definition rules, note the following features when writing CSS styles:

  • CSS selectors are case-sensitive, while properties and values are case-insensitive. In general, selectors, properties, and values are lowercase.
  • Multiple attributes must be separated by a semicolon (;). The semicolon after the last attribute can be omitted, but it is best to keep it for the convenience of adding new styles.
  • If the value of an attribute consists of more than one word and contains Spaces, the value must be quoted.
  • Use the / *… */ Comment the CSS code.

2. The selector

  • Selectors are used to specify HTML elements for which CSS styles apply.
  • You can use CSS to achieve one-to-one, one-to-many, or many-to-one control over elements in an HTML page.

2.1 Basic selectors

(1) universal selector :(wildcard selector)

Purpose: the widest scope, to match all elements in an HTML web document. Syntax: *{style declaration; } Features: match all elements of the page, low efficiency, use as little as possible.

*{ background-color:yellow; margin:0; /* Define the margin */ padding:0; /* Define the inner margin */}Copy the code

(2) Element/tag selector:

What it does: It uses the HTML tag name as a selector to specify a uniform CSS style for a certain type of tag on a page. Syntax: tag name {style declaration; } Features: can quickly unify the style for the same type of tags on the page, but can not design differentiated style.

p{
	color:red;
	font-size:25px;
}
Copy the code
<body> < P > Paragraph 1</p> <h1> Title </ H1 > <p> Paragraph 2</p> </body>Copy the code

(3) Class selector:

What it does: Allows a selector syntax that is referenced by the class attribute of any element. Class name {style declaration; } Note: Class names are allowed to contain letters, numbers, underscores, and hyphens -, and are not allowed to start references with numbers: < tag name class= “class name” >
Features: Individual or identical styles can be defined for element objects.

.color{
	color:red;	
}
Copy the code
The < body > < p class = "color" > paragraph < / p > < h1 class = "color" > title < / h1 > < / body >Copy the code

(4) ID selector:

Does: Specify a specific style syntax for HTML elements marked with a specific ID: #id value {style declaration; } id attribute Settings: < tag name id= “id value” > 

#footer{
	color:red;		
        font-size:20px;
	background-color:#aaaaaa;
	width:300px;
	height:300px;
}
Copy the code
The < body > < div id = "footer" > paragraph < / div > < div id = "top" > paragraph < / div > < / body >Copy the code

2.2 Group selector

What it does: Puts multiple selectors together to uniformly declare style syntax: selectors 1, 2… , selector n{style declaration; }

#footer , p , div , .color{
	color:red;
}
Copy the code
#footer{   color:red;      }
p{	color:red;         }
div{	color:red;         }
.color{	color:red;         }
Copy the code

2.3 Hierarchical selectors

Gets an element from a hierarchy of HTML elements and defines its style

The selector type describe
E F Descendant selector Select all F elements that are descendants of E elements
E > F Child selector Select all the children of E, F
E + F Adjacent sibling selectors Select the F element immediately after the E element
E ~ F Universal sibling selector Select all F siblings following E

(1) Descendant selector:

When elements are nested, the inner element becomes the offspring of the outer element. Format: outer element inner element {style declaration; } Selects all descendants of the inner elements of the outer element.

#footer  p{   color:red;        }
Copy the code
< div id = "footer" > < h1 > title 1 < / h1 > < p > section 1 < / p > < div > < p > section 2 < / p > < / div > < h1 > title 2 < / h1 > < p > section 3 < / p > < / div >Copy the code

(2) Descendant selector:

Format: outer element > inner element {style declaration; } Action: Selects all direct descendants of the outer element (indirect elements do not apply).

#footer>p{   color:red;        }
Copy the code
< div id = "footer" > < h1 > title 1 < / h1 > < p > section 1 < / p > < div > < p > section 2 < / p > < / div > < h1 > title 2 < / h1 > < p > section 3 < / p > < / div >Copy the code

(3) Adjacent sibling selectors:

Format: element E + element F{style declaration; } Select the F element immediately after E

h1+p{			
	color: red;		
        background: #CCCCCC;
}
Copy the code
< div id = "footer" > < h1 > title 1 < / h1 > < p > section 1 < / p > < p > section 2 < / p > < h1 > title 2 < / h1 > < p > section 3 < / p > < / div >Copy the code

(4) Universal sibling selectors: format: element E ~ element F{style declaration; } select all F siblings after E

h1~p{			
	color: red;		
        background: #CCCCCC;
}
Copy the code
< div id = "footer" > < h1 > title 1 < / h1 > < p > section 1 < / p > < p > section 2 < / p > < h1 > title 2 < / h1 > < p > section 3 < / p > < / div >Copy the code

2.4 Pseudo-class selectors

Pseudo-classes: The same element has different styles depending on its state. Syntax for matching different states of elements:

E: pseudo-class  {property:value}  
Copy the code

E: HTML element pseudo-class: pseudo class selector name Property: attribute name value: attribute value

What it means to be “fake” : Unlike a class style, it does not require the use of the class attribute.

The selector
E:link Link pseudo-class selectors Select the matching E element, and the matching element is defined as a hyperlink that has not been accessed. Often used at link anchors
E:visited Link pseudo-class selectors Select the matching E element that has been hyperlinked and accessed. Often used at link anchors
E:active User behavior pseudo-class selector The matching E element is selected and the matching element is activated. Often used on anchors and buttons
E:hover User behavior pseudo-class selector Select the matching E element, and the user hovers over the element.
E:focus User behavior pseudo-class selector The matched E element is selected, and the matched element gets focus

The four states of hyperlinks require a specific writing order to take effect. A :link {} a:visited {} a:hover {} A :active {} Reliable order can be used to love and hate two words: L (link)ov(visited)e h(hover)a(active)te

a:link{
	color: #0f0;
}
a:visited{
	color: #0000ff;
}
a:hover{
	color: #CCCCCC;
}
a:active{
	color: #f00;
}
Copy the code
The < body > < a href = "http://www.baidu.com" target = "_blank" > Web front-end technology < / a > < / body >Copy the code

Structure pseudo-class is a new selector designed by CSS3, which uses the document structure tree to achieve element filtering and matches specific elements through the relationship between the document structure, so as to reduce the definition of class attributes and ID attributes in the document, making the document more concise.

E: NTH – child (n) :

Function: selects all the children of E that match the NTH position of their parent element. N can be a number, keyword, or formula.

Tr :nth-child(odd) /* Background-color :#ff0000; background-color:#ff0000; } tr:nth-child(even) /* Background-color :#0000ff; }Copy the code
P :nth-child(2n+1) /* Use the formula (an+b) to represent the length of the cycle, n = 0, b = offset */ {background:#ff0000; }Copy the code

E: the NTH – of – type (n) :

Function: Selects all E – matching child elements in the NTH position of the same type in its parent element. N can be a number, keyword, or formula.

2.5 Property selectors

In HTML, you can add a lot of additional information to an element through various attributes. CSS3 extends these attribute selectors on CSS2 to support locating elements based on pattern matching.

The selector describe
E[attr] Select match E element with attribute attr. Where E can be omitted to select any type of element that defines the attR attribute
E[attr=val] The selection matches the E element that has the attribute attr, and the attribute value of attr is val (where val is case sensitive). Likewise, the omission of the E element means that the selection defines any element of the type whose attribute value attr is val
E [attr | = val] The selection matches the E element that defines the attribute attr, whose value is an attribute value that has val or starts with val-. Often used for lang attributes (for example lang= “en-us”). For example, p[lang=en] defines match as any paragraph in English, whether British English or American English
E[attr~=val] The selection matches the E element that defines the attribute attr, whose value has multiple space-separated values, one of which is equal to val. For example,.info[title~=more] will match an element with the class name info, and the element has a title attribute set, and the title attribute value contains any element of “more”. For example <a class= “info” title= “click here for more information” >click
The wildcard type The sample
^ Match starter Span [class^=span] selects all SPAN elements starting with the class name “span”
$ Match terminator A [href$= PDF] selects all a elements of all href attributes ending in “PDF”
* Matches any signifier A [title*=site] matches any string that has the “site” character anywhere in the title attribute value of the element

2.6 Selector Priority

① Use after attributes! Important overrides element styles defined anywhere in the page ② inline styles written on element tags as style attributes ③ ID selectors ④ Class selectors/pseudo class selectors/attribute selectors ⑤ tag selectors ⑥ Wildcard selectors ⑦ Default or inherited attributes of the browser

Syntax: Property: value! important; Effect: Increases the application priority of the specified style rule.

Selector type A weight
Wildcard selector 0,0,0,0
Element selector 0,0,0,1
Class selectors 0,0,1,0
Property selector 0,0,1,0
Pseudo class selector 0,0,1,0
The ID selector 0,1,0,0
Inline style 1,0,0,0

Ex. :

<! Doctype HTML > < HTML lang="zh-cn"> <head> <title> <meta charset=" utF-8 "> <style> #d1 #s1 {color: red; } #d1 p span { color: orange; } .p1 span { color: yellow; } #s1 { color: pink; } #d1 .p1 span { color: blue; } #d1 #p1 #s1 { color: green; } < / style > < / head > < body > < div id = "d1" > < p id = "p1" class = "p1" > < span id = "s1" > this is a span < / span > < / p > < / div > < / body > < / HTML >Copy the code