#8.10.16 Summary # Property selector Pseudo-object selector CSS Common styles

Property Selector

E[att]

E[att= "Val"]

E[att~= "Val"]

E[att^= "Val"]

E[att$= "Val"]

E[att*= "Val"]

E[att|= "Val"]

Pseudo-Object selectors

E:first-letter/e::first-letter Sets the style of the first character within the object.

< P > Today, sunny, clear skies, very suitable for outdoor activities, such as outing, hiking and so on. The students who sit in the office for a long time should pay more attention to sports. </ P >

P::first-letter {float:left;font-size:40px;font-weight:bold;line-height:1;}

E:first-line/e::first-line Sets the style of the first row within the object.

< P > Today, sunny, clear skies, very suitable for outdoor activities, such as outing, hiking and so on. The students who sit in the office for a long time should pay more attention to sports. </ P >

p{width:200px;padding:5px 10px;border:1px solid #ddd; font:14px/1.5 Simsun,serif,sans-serif;} p::first-line {color: #090;}

E:before/e::before sets what happens before the object, based on the logical structure of the object tree. Used with the content property, and you must define the content property

E:after/e::after The content that occurs after the object (based on the logical structure of the object tree). Used with the content property, and you must define the content property

E::p laceholder styles for setting object text placeholders

E::selection Sets the style of the object when it is selected.

< P > After you select this text, look at their text color and background colors, you can understand:: Selection role. </ P >

P::selection{background: #000; color: #f00;}

Common styles of CSS

• Font-style Specify font style
• font-variant Specifies the font variant.
• font-weight Specifies the font weight.
• font-size/line-height Specifies the font size and line height.
• font-family Specifies the font family.

Box mode

The composition of a box:
What's in the box: content
Frame of Box: border
The distance between the box border and the content: called Padding---padding inner margin (inner patch)
If there is more than one box, the distance between the box and the box: called the boundary---margin, margin (outer patch)

The entire box model occupies the width of the page: Left border + Left box + Left padding + content + right padding + right Border + right edge

Properties of the CSS box model :
Content properties: Wide =width high =height
Inner padding attribute (distance between content and border): padding
Margin properties: Margin (note browser compatibility when using this property)
Rules for inner padding and boundaries:
If there are four parameters: the upper right or lower left, you can specify a direction alone
If there is only one argument: upper right Bottom left
If there are two parameters: the first parameter represents the top and bottom second parameter representing the left and right
If three parameters: indicates upper left and right

#8.10.16 Summary # Property selector Pseudo-object selector CSS Common styles