標籤：att 分享 str 通用 中文 推薦 over test div
CSS是Cascading Style Sheets的簡稱，中文稱為層疊樣式表，用來控制網頁資料的表現，可以使網頁的表現與資料內容分離。
一 css的四種引入方式
1.行內式
行內式是在標記的style屬性中設定CSS樣式。這種方式沒有體現出CSS的優勢，不推薦使用。
2.嵌入式
嵌入式是將CSS樣式集中寫在網頁的<head></head>標籤對的<style></style>標籤對中。格式如下：
<head>
<style type="text/css">
...此處寫CSS樣式
</style>
</head>
3.匯入式
將一個獨立的.css檔案引入HTML檔案中，匯入式使用CSS規則引入外部CSS檔案，<style>標記也是寫在<head>標記中，使用的文法如下：
<style type="text/css">
@import"mystyle.css"; 此處要注意.css檔案的路徑
</style>
4.連結式
也是將一個.css檔案引入到HTML檔案中 <link href="mystyle.css" rel="stylesheet" type="text/css"/>
注意：
匯入式會在整個網頁裝載完後再裝載CSS檔案，因此這就導致了一個問題，如果網頁比較大則會兒出現先顯示無樣式的頁面，閃爍一下之後，再出現網頁的樣式。這是匯入式固有的一個缺陷。使用連結式時與匯入式不同的是它會以網頁檔案主體裝載前裝載CSS檔案，因此顯示出來的網頁從一開始就是帶樣式的效果的，它不會象匯入式那樣先顯示無樣式的網頁，然後再顯示有樣式的網頁，這是連結式的優點。
二 css的選取器（Selector）
“選取器”指明了{}中的“樣式”的作用對象，也就是“樣式”作用於網頁中的哪些元素
1 基礎選取器：
* ： 通用元素選取器，匹配任何元素 * { margin:0; padding:0; }
E ： 標籤選取器，匹配所有使用E標籤的元素p { color:green; }
.info和E.info: class選取器，匹配所有class屬性中包含info的元素 .info { background:#ff0; } p.info { background:blue; }
#info和E#info id選取器，匹配所有id屬性等於footer的元素 #info { background:#ff0; } p#info { background:#ff0; }
2 組合選取器
E,F 多元素選取器，同時匹配所有E元素或F元素，E和F之間用逗號分隔 Div,p { color:#f00; }
E F 後代元素選取器，匹配所有屬於E元素後代的F元素，E和F之間用空格分隔 #nav li { display:inline; } li a { font-weight:bold; }
E > F 子項目選取器，匹配所有E元素的子項目F div > strong { color:#f00; }
E + F 毗鄰元素選取器，匹配所有緊隨E元素之後的同級元素F p + p { color:#f00; }
注意嵌套規則：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .div1>p{ background-color: aqua; color: deeppink; } .main2>div{ background-color: blueviolet; color: chartreuse; } </style></head><body> <div class="div1">hello1 <div class="div2">hello2 <div>hello4</div> <p>hello5</p> </div> <p>hello3</p> </div> <p>hello6</p><hr> <div class="main2">1 <div>2 <div> </div> </div> <div> </div> </div></body></html>View Code
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[att|=val] 匹配所有att屬性具有多個連字號分隔（hyphen-separated）的值、其中一個值以“val”開頭的E元素，主要用於lang屬性，
比如“en”、“en-us”、“en-gb”等等 p[lang|=en] { 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;}
p:before 在每個 <p> 元素的內容之前插入內容 p:before{content:"hello";color:red}
p:after 在每個 <p> 元素的內容之前插入內容 p:after{ content:"hello"；color:red}
4 偽類別選取器：
偽類別選取器： 專用於控制連結的顯示效果，偽類別選取器：
a:link（沒有接觸過的連結）,用於定義了連結的常規狀態。
a:hover（滑鼠放在連結上的狀態）,用於產生視覺效果。
a:visited（訪問過的連結）,用於閱讀文章，能清楚的判斷已經訪問過的連結。
a:active（在連結上按下滑鼠時的狀態）,用於表現滑鼠按下時的連結狀態。
偽類別選取器 : 偽類指的是標籤的不同狀態:
a ==> 點過狀態 沒有點過的狀態 滑鼠懸浮狀態 啟用狀態
a:link {color: #FF0000} /* 未訪問的連結 */
a:visited {color: #00FF00} /* 已訪問的連結 */
a:hover {color: #FF00FF} /* 滑鼠移動到連結上 */
a:active {color: #0000FF} /* 選定的連結 */ 格式: 標籤:偽類名稱{ css代碼; }
<style type="text/css"> a:link{ color: red; } a:visited { color: blue; } a:hover { color: green; } a:active { color: yellow; }</style></head><body> <a href="01-hello-world.html">hello-world</a></body></html>View Code
css引入及選取器
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
