標籤：英文 eve ... 開頭 符號 n個元素 方式 字元 styles
1.CSS規則由兩部分構成，即選取器和聲明器
聲明必須放在{}中並且聲明可以是一條或者多條
每條聲明由一個屬性和值構成，屬性和值用冒號分開，每條語句用英文冒號分開
注意:
css的最後一條聲明，用以結束的“;”可寫可不寫，但是基於W3c標準規範思考建議最後一條聲明的結束“；”都要寫上
2.行內樣式
直接在style屬性設定css樣式style屬性提供了一種改變所有的HTML元素樣式的通用方法
文法:
<h1 style="color:red">style屬性的應用</h1>
<p style="font-size:14px;color:green;">直接在HTML標籤設定樣式</p>
3.內部樣式
把css代碼寫在<head>的<style>標籤中與HTMl內部位於同一個HTML檔案中，這就是內部樣式
4.外部樣式
就是把css代碼儲存為一個單獨樣式表檔案，副檔名位.class在頁面引用外部樣式即可
HTML檔案外部樣式有兩種方式分別是連結式和匯入式
1)連結式:
<head>
<link href="...css"rel="stylesheet"type="text/css"
</head>
<!--
rel="stylesheet"是指在本頁面使用這個外部樣式
type=text/css是指檔案的類型是樣式表文本
href="...css"檔案所在位置
-->
2)匯入外部樣式表
在HTML網頁使用@import匯入外部樣式匯入樣式必須放在<style>標籤中而<style>標籤必須放在<head>標籤中
<head>
<style>
@import url(".....css")
</style>
</head>
<!--其中@import匯入檔案，前面必須放一個符號，url(".....css")表示樣式檔案位置-->
3)連結式和匯入式區別
1.<link/>標籤屬於XHTML範疇中而@import是css2.1中特有的
2.使用，<link/>的連結css用戶端瀏覽網頁時先將css網頁載入到網頁中，在進行編譯顯示，所以這種情況下顯示出的網頁與使用者預期的一樣即使網速再慢也是一樣的效果
3.使用@import匯入css檔案用戶端在瀏覽網頁時先將HTML結構呈現出來再把外部css檔案載入到網頁中當然最終與<link/>連結效果一樣只是當網速較慢時會先顯示沒有css統一布局的HTML網頁，這樣會給使用者不好的感覺這也是目前大多數網站用串連外部樣式表的主要原因
5.樣式的優先順序：<就近原則>
行內元素>內部樣式表>外部樣式表
註：代碼是逐條執行，如果內部樣式比外部樣式先聲明，則外部樣式具有優先順序
6.css3的選取器
標籤選取器 類別選取器 和id選取器
1)類別選取器
類別選取器即<即標籤名 class"類名稱">標籤內容</標籤名>
.green{
font-size:20px;
color:red;
}
<p class="green">hhhh</p>
2)id選取器
#green{
font-size:20px;
color:red;
}
<p id="green">hhhh</p>
注意:id選取器只能使用一次，也就是說在同一頁面同一個id屬性只能設定一次；而類別選取器可以在頁面使用多次
3)選取器的優先順序
id選取器>class類別選取器>標籤選取器
7.css3進階選取器
1. 層次選取器
1）E F 後代選取器 選擇匹配的F元素，且匹配的F元素被包含在匹配的E元素中
2） E>F 子選取器 選擇匹配的F元素，且匹配的F元素是匹配E元素的子項目
3） E+F 相鄰兄弟選取器 選擇匹配的F元素，且匹配的F元素僅位於匹配的E元素後面
4）E~F 通用兄弟選取器 選擇匹配的F元素，且匹配的E元素後所有匹配的F元素
註：1）通用兄弟選取器選中的是E元素相鄰的後面兄弟元素下，是一個或多個元素；
2）相鄰兄弟選中的是與E元素僅挨的F元素，其中選中的僅是一個元素
8.結構偽類別選取器
1）E：first-child 作為父元素的第一個子項目的元素E
2） E：last-child 作為父元素的最後一個子項目的元素E
3）E F：nth-child（n） 選擇父級元素E 的第n個元素F（n可以是1/2/3）關鍵字為even odd
4）E:first-of-type 選擇父級元素具有指定類型的第一個E元素
5）E:last-of-type 選擇父級元素具有指定類型的最後一個E元素
6）E F:nth-of-type(n) 選擇父元素內具有指定類型的第n個F元素
註：E F：nth-child（n）和 E F:nth-of-type(n)使用時記住以下關鍵點：
1）E F：nth-child（n）在父級裡從第一個元素開始尋找，不分類型
2）E F:nth-of-type(n)在父級裡先看類型再看位置
9.屬性選取器
1）E[attr] 相匹配具有屬性attr的E元素
2）E[attr=val] 選擇匹配具有屬性attr的E元素 並且屬性值位val（其中Val區分大小寫）
3）E[attr^=val] 選擇匹配元素E，且E元素定義了屬性attr，其中屬性值以val開頭的任一字元串
4）E[attr$=val] 選擇匹配元素E，且E元素定義了屬性attr，其中屬性值以val結尾的任一字元串
5）E[attr*=val] 選擇匹配元素E，且E元素定義了屬性attr，其中包含了"val"話句話說，字串val與屬性值中的任意位置相匹配
第四章：初識CSS3
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
