HTML5 day 4 Note selector:
1. Link Selector
1) group selector h2, p,. text, # box {style}
Separated by commas
2) child element selector parent element> child element {style}
Separated by greater than>
3) descendant selector ancestor descendant {style}
Separated by Spaces
Color inheritance
2. Dynamic pseudo-class selector (usually used for a tag)
: Link Status
: Visited status after access
: Hover mouse-Up Status
: Status when active mouse clicks
Principle: Love and hate principle LoVeHAte write in order
Generally, enter a {} a: hover {}.
3,: nth Selector
: First-child: first child element
: Last-child: last child element
: Nth-child (n): nth sub-element n:, 2... n 2n 2n + 1... starts from 0, accumulating 1 each time
Different colors of the parity row: nth-child (2n + 1) nth-child (2n)
CSS attributes
1. Text attributes (text style, font attribute, and Font Style)
Font-size: 12px/14px; font size (16 PX by default in the browser)
Font-family:;
Font-weight: 100-900/bold/bolder/normal font bold
Color: #000000;
Font-style: italic (italic)/normal;
2. Section attributes
Text-align: horizontal alignment of left/center/right text
Vertical-align: top/middle/bottom text vertical Alignment
Text-indent: 20px/2em text indent
Line-height: 20-24px/150%/1.5 line spacing
Text-decoration: underline (underline)/overline (upper line)/line-through (strikethrough)/none text Modifier
Special Use:
How to Set a line of text, height, and vertical center:
Line-height: height; (Row height = height)
Letter-spacing: 10px; distance between words
Word-spacing: 1px; distance between words (mostly used for English websites)
Text-transform: capitalize (uppercase for each letter) uppercase (uppercase for all) lowercase (all lowercase for English websites)
White-space: normal/nowrap (do not wrap)
3. background)
Background-color: #000000/rgba ()/red
Background-image: url (image path)
Background-repeat: repeat/repeat-x/repeat-y/no-repeat; (sets the display mode of the background image)
Background-position: horizontal and vertical
Horizontal Direction: + 300px-300px 20% left center right
Vertical direction: + 300px-300px 20% top center bottom
The background attribute is a composite attribute and can be omitted.
Example: background: # ff0000 url (../img/1.jpg) no-repeat 20px 30px;
4. list-style composite attributes (mainly used for ul ol li)
List-style-image: url (); Add the image before the list item
List-style-type: none (the dot before the list)
List-style-position: inside/outside
List-style: none; most common
The above is the content of the HTML5 notes on the fourth day. For more information, see the PHP Chinese website (www.php1.cn )!
