HTML5 Day 4 Notes

Selector:

1, relationship selector

1) Group selector h2,p,.text,#box{style}

Separate with commas Open

2) Child element selector parent element > child element {style}

Separate with greater than sign>

3) Descendant selector ancestor descendant {style }

Separate with spaces



Colors are inherited

2 , dynamic pseudo-class selector (commonly used in a tag)

:link The state when linking

:visited The state after visiting

:hover The state when the mouse is placed

:active The state when the mouse is clicked

Principle: Love-Hate Principle LoVeHAte writes this in order

Generally write a{} a:hover{}

3, :nth selector

:first-child: the first child element

:last-child: the last child element

:nth-child( n): nth child element n: 0,1,2...n 2n 2n+1... Starting from 0, accumulating 1 each time

Odd and even rows are different colors: :nth-child(2n +1) nth-child(2n)

CSS properties

1, text properties (text style, font properties, font style)

font-size:12px/14px ; Font size (browser default text size 16px)

font-family:Microsoft Yahei;

font-weight:100-900/bold/bolder/normal font bold

color:#000000;

font-style:italic(italic)/normal;

2, paragraph attribute

text-align:left/center/right Text horizontal alignment

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/overline/line-through/none text decoration

Special use :

Setting method for one line of text, with height and vertical centering:

line-height:height; (line height = height)

letter-spacing:10px; words The distance between words

word-spacing:1px; The distance between words (mostly used on English websites)

text-transform:capitalize(the first letter of each word is capitalized) uppercase (all uppercase) lowercase (all lowercase) (mostly used on English websites)

white-space:normal/nowrap (no line breaks)

3, background attribute (background)

background-color:#000000/rgba()/red

background-image:url(picture path)

background-repeat:repeat/repeat-x/repeat-y/no -repeat;(Set the display mode of the background image)

background-position: horizontal direction vertical direction

Horizontal direction: +300px -300px 20% left center right

vertical Direction: +300px -300px 20% top center bottom

background is a composite attribute, you can omit the - behind.

Example: background:#ff0000 url(../img/1.jpg) no-repeat 20px 30px;

4, list attribute (list-style) composite attribute (mainly used for ul ol li)

list-style-image:url();Add the image in front of the list item

list-style-type:none (the dot before the list)

list-style-position: inside/outside

list-style:none;most commonly used

The above is the content of the notes on the fourth day of HTML5. For more related content, please pay attention to the PHP Chinese website (m.sbmmt.com)!