CSS的引入方式
第一種：在head中 <style></style>    嵌入式
第二種：在head中 <link href="index.css" rel="stylesheet">   鏈接式 （先加載css，再加載html）推薦
第三種：在head中 <style>@import "index.css";</style>>    導入式（先加載html，再加載css）
第四種：直接在html標簽中<div style="width: 50%; height: 60px; background-color: orangered">不推薦這種方式</div>    行內式
 


CSS的選擇器
1、基礎選擇器
*    通用元素選擇器，匹配任何元素    * { margin:0; padding:0; }
E    標簽選擇器，匹配所有使用E標簽的元素    p { color:green; }
.info和E.info    class選擇器，匹配所有class屬性中包含info的元素    .info { background:#ff0; }    p.info { background:red }
#info和E#info    id選擇器，匹配所有id屬性等於footer的元素    #info { background:#333 }    P#info { background:blue }
 


2、組合選擇器(這裏的E,F可以是基礎選擇器中的選擇器)
E,F    多元素選擇器，同時匹配所有E元素與F元素，E和F之間用逗號分隔    div,p { color:#f00 }
E F    後代選擇器，匹配所有屬於E元素後代（兒子、孫子....）的F元素，E和F之間用空格分隔    li a { font-weight:bold; }
E>F    子元素選擇器，匹配所有E元素的子元素(僅兒子)F,E和F之間用>分隔    div > p { color:#ccc }
E+F    毗鄰元素選擇器，匹配所有緊隨E元素之後的同級元素F,E和F之間用加號分隔    div + p { color:000 }
 


3、屬性選擇器
E[att]    匹配所有具有att屬性的E元素，不考慮它的值。（註意：E在此處可以省略，比如“[cheacked]”。以下同。）   p[title] { color:#f00; }
E[att=val]    匹配所有att屬性等於“val”的E元素    div[class=”error”] { color:#f00; }
E[att~=val]    匹配所有att屬性具有多個空格分隔的值、其中一個值等於“val”的E元素      td[class~=”name”] { color:#f00; }
E[attr^=val]    匹配屬性值以指定值開頭的每個元素     div[class^="test"]{background:#ffff00;}
E[attr$=val]    匹配屬性值以指定值結尾的每個元素     div[class$="test"]{background:#ffff00;}
E[attr*=val]    匹配屬性值中包含指定值的每個元素     div[class*="test"]{background:#ffff00;}

4、偽類
anchor偽類：專用於控制鏈接的顯示效果
a:link {color: #FF0000} /* 未訪問的鏈接 */
a:visited {color: #00FF00} /* 已訪問的鏈接 */
a:hover {color: #FF00FF} /* 鼠標移動到鏈接上 */
a:active {color: #0000FF} /* 選定的鏈接 */ 格式: 標簽:偽類名稱{ css代碼; }

before after偽類
p:before    在每個 <p> 元素的內容之前插入內容    p:before{content:"hello";color:red}
p:after    在每個 <p> 元素的內容之前插入內容    p:after{ content:"hello"；color:red}

CSS的引入方式及選擇器