標籤：需要 內容 元素選取器 back 組合 nbsp .com 屬性 blog
CSS規則由兩個主要的部分構成：選取器以及一條或多條聲明
selector {
property:value;
property:value;
property:value;
……
}
CSS的四種引入方式
1.行內式
行內式是在標記的style屬性中設定CSS樣式，這種方式沒有體現出CSS的優勢
<div style="color: blue;font-size: 20px;font-weight: 900">DIV</div>
2.嵌入式
嵌入式是將CSS樣式集中寫在網頁的<head></head>標籤對的<style></style>標籤對中
<head> <meta charset="UTF-8"> <title>Title</title> <style> p{ color: red; background: blue; } div{ color: blue; font-size: 20px; font-weight: 900; } </style>
3.連結式
將一個.css檔案引入到HTML檔案中
<head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="test.css"></head>
4.匯入式
將一個.css檔案你匯入到HTML檔案中，寫在<head></head>標籤下的<style></style>標籤對中
<head> <meta charset="UTF-8"> <title>Title</title> <style> @import"test.css"; </style></head>
注意：
匯入式會在整個網頁載入完成後再載入CSS檔案，因此這就導致了一個問題，如果網頁比較大則會出現先顯示無樣式的頁面，停頓之後才會出現網頁的樣式。這是匯入式固有的一個缺陷。使用連結式時與匯入式不同的是它會在載入網頁內容之前先載入CSS檔案，因此在延遲後顯示帶有樣式的網頁，不會像匯入式那樣先顯示無樣式的網頁然後再顯示有樣式的網頁，這是連結式的優點
CSS選取器
組合選取器
<body> <div class="c1">c1</div> <div class="OUTER">Div <p>p1</p> <div class="INNER"> <p>p3</p> </div> <p>p2</p> <a href="">click</a> </div> <a href="">ck</a> <p>p5</p> <p class="p4">p4</p> <ul class="item"> <li>x</li> </ul> <ol class="item"> <li>y</li> </ol> <ul> <li>z</li> </ul></body>
E,F 多元素選取器，同時匹配所有E元素或F元素，E和F之間用逗號隔開
.inner p,.p4{ color: red;}
E F 後代元素選取器，匹配所有屬於E元素後代的F元素，E和F之間用空格分隔
.INNER p{ color: red;}
E>F 子項目選取器，匹配所有E元素的子項目F
.OUTER p{ color: red;}
E+F 毗鄰元素選取器，匹配所有緊隨E元素之後的同級元素F
.OUTER + p{ color:red;}
E~F 普通兄弟選取器（以波浪號分割）
.OUTER ~ p{ color: red;}
ul.item li{ color: red;}
div.c1{ color: red;}
關於標籤嵌套：
一般，區塊層級元素可以包含內嵌元素或某些區塊層級元素，但內嵌元素不能包含區塊層級元素，它只能包含其他內嵌元素，需要注意的是p標籤不能包含塊級標籤
前端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
