CSS 基础

主要属性：

Font Properties
 Font Family 
 Font Style 
 Font Variant 
 Font Weight 
 Font Size 
 Font

Color and Background Properties
 Color 
 Background Color 
 Background Image 
 Background Repeat 
 Background Attachment 
 Background Position 
 Background 

Text Properties
 Word Spacing 
 Letter Spacing 
 Text Decoration 
 Vertical Alignment 
 Text Transformation 
 Text Alignment 
 Text Indentation 
 Line Height

Box Properties
 Top Margin 
 Right Margin 
 Bottom Margin 
 Left Margin 
 Margin 
 Top Padding 
 Right Padding 
 Bottom Padding 
 Left Padding 
 Padding 
 Top Border Width 
 Right Border Width 
 Bottom Border Width 
 Left Border Width 
 Border Width 
 Border Color 
 Border Style 
 Top Border 
 Right Border 
 Bottom Border 
 Left Border 
 Border 
 Width 
 Height 
 Float 
 Clear

 选择器：

div的第一个兄弟p为红色
div+p{color:red;}   ==> <div><p>Not red</p></div><p>hello world!</p><p>Not red</p>

div内的所有子元素p为红色

div>p{color:red;}   ==> <div><p>hello world!<ul><li><p>Not red</p></li></ul></p><p>hello world!</p></div><p>Not red</p><p>Not red</p>

div后面的所有兄弟元素p为红色

div~p{color:red;}   ==> <div><p>Not red<ul><li><p>Not red</p></li></ul></div><p>hello world!</p><p>hello world!</p><ul><li><p>Not red</p></li></ul>

有id属性的div为红色

div[id]{color:red;}  ==> <div id="any">hello world!</div><div>Not red</div>

有id属性且等于name的div为红色

div[id="name"]{color:red;}  ==> <div id="name">hello world!</div><div id="others">Not red</div>

有id属性且包含name的div为红色

div[id*="name"]{color:red;}  ==> <div id="1name2">hello world!</div><div id="others">Not red</div>

有id属性且以name开头的div为红色

div[id^="name"]{color:red;}  ==> <div id="name1">hello world!</div><div id="1name2">Not red</div>

有id属性且以name结束的div为红色

div[id$="name"]{color:red;}  ==> <div id="1name">hello world!</div><div id="name2">Not red</div>