一、css簡介

css---層疊樣式表（Cascading Style Sheets）

二、css特點

css實現了結構與表現相分離

三、樣式表的建立

內聯樣式（行間樣式，行內樣式）、內部樣式（嵌入式樣式）、外部樣式

1.內聯樣式

通過style屬性直接將樣式寫在標籤上

<h1 style="color:red;">內聯樣式</h1>

2.內部樣式

<style type="text/css">
css樣式...
</style>

注：style標籤一般放置在head部分

 新增type="text/css"是為了讓瀏覽器能夠正確解析style標籤之間的內容為css樣式

3.外部樣式

（a）使用link標籤引入外部樣式

<link rel="stylesheet" type="text/css" href="css檔案路徑"/>

注：在引入外部樣式之前先要建立一個css檔案

rel的作用：告知瀏覽器引入的外部檔案與當前檔案的關係

rel="stylesheet" 引入的css檔案主要是用來給本檔案設定樣式的

（b）使用@import的方式引入css檔案

@import "css檔案路徑";

注：@import主要是在css檔案中引入其他的css檔案

@import必須放置在本頁面樣式之前

link和@import的區別

(1)link是html標籤，屬於html範疇，還可以載入其他檔案，@import屬於css的範疇，只能載入css檔案

(2)link載入的css檔案與頁面同時載入，@import載入的css檔案在頁面載入完成後開始載入

(3)link標籤所有瀏覽器都支援，@import低版本瀏覽器不支援

(4)link標籤支援js操作DOM樣式，@import不支援

五、css基礎語法

css由選擇符和宣告兩大部分組成，宣告又由屬性和屬性值兩部分組成。

選擇符{ 屬性:屬性值; 屬性:屬性值;}

eg: h1{
color:red;
background:blue;
}

注：在css樣式中，屬性和屬性值之間用冒號連線，一條宣告結束，要加分號

推薦一條宣告佔一行

六、css註釋

/* 註釋內容 */

七、css選擇符（選擇器）

1.id選擇器

語法： <標記 id="id名"></標記>

#id名{屬性:屬性值;}

eg: <h1 id="edu">id選擇器</h1>

#edu{color:red;}

注：id名是唯一的，不能出現同名的id

 id名命名不允許使用中文或數字，要語義化命名，常見命名方法：駝峰命名法，中劃線連結命名法  （main_left,conTit）

2.類選擇器（class選擇器）

語法： <標記 class="class名"></標記>

.class名{屬性:屬性值;}

eg: <a href="#" class="nav">首頁</a> <a href="#" class="nav">首頁</a>

.nav{color:black;}

注：可以有相同的類名，class選擇器在網頁佈局中使用頻率很高

命名規範同id名

當多個標籤具有相同的樣式時，可以使用class選擇器

注：類名詞列表

<div class="box focus"></div>

.focus{color:red;}

當一個元素即具有和其他元素相同的樣式，並且有自身特殊的樣式時，使用類名詞列表的方法

3.元素選擇符（標籤選擇器）

語法： 標記名{屬性:屬性值;}

eg: a{text-decoration:none;}

注：如果想改變某個元素的預設樣式時，可以使用型別選擇符（元素選擇符）

4.後代選擇器（包含選擇器）

語法： 選擇符1 選擇符2{屬性:屬性值;}

eg: <div class="box">
<a href="#">登入</a>
</div>

.box a{color:red;}