CSS是一種美化網頁的技術。
2.2.1CSS樣式表的定義與使用
定義選擇器的基本語法：
selector{屬性：屬性值；屬性；屬性值；......}
說明：
(1)CSS選擇器分爲三種類型：
標記選擇器，通過HTML標籤定義選擇器。
類別選擇器，使用class定義選擇器。
ID選擇器，使用id定義選擇器。
（2）屬性和值被冒號分開，屬性之間用分號間隔，並由花括號包圍。
例如：p{background-color:blue;color:red}//定義標記P選擇器
.cs1{font-family:華文行楷；font-size:15px} //定義類別選擇器.csl
#cs2{color:yellow} //定義id選擇器#cs2
1、CSS樣式表的定義
CSS樣式表的定義實際上是定義CSS選擇器。
(1)標記選擇器——通過HTML標籤定義樣式表
基本語法格式：
引用樣式的對象{標籤屬性：屬性值；標籤屬性：屬性值；標籤屬性：屬性值；......}
(2)類別選擇器——使用class定義樣式表
格式1：標籤名.類名{標籤屬性：屬性值；標籤屬性：屬性值；標籤屬性：屬性值；......}
格式2： .類名{標籤屬性：屬性值；標籤屬性：屬性值；標籤屬性：屬性值；......}
(3)id選擇器——使用id定義樣式表
基本語法：#id名稱{標籤屬性：屬性值；標籤屬性：屬性值；標籤屬性：屬性值；......}
2、樣式表的使用
在HTML中使用CSS有4種方式：行內式、內嵌式、鏈接式、導入式。
（1）行內式（不需要定義選擇器）：利用style屬性直接爲元素設置樣式，只對當前的標籤起作用。
例如：<p style="color:#FF0000;font-size:20px;text-decoration:underline;">正文內容1</p>
<p style="color:#000000;font-style:italic;">正文內容2</p>
(2)內嵌式：這種方式需要先定義有關的選擇器，然後再使用。利用<style></style>標籤對，將樣式表定義在<head></head>標籤之間，內嵌式樣式表的作用範圍是該HTML文檔內。例如：
<html>
<head>
<title>頁面標題</tittle>
定義兩個選擇器：標籤選擇器p和類選擇器info
<style type="text/css">
p{color:#0000FF;text-decoration:underline;font-weight:bold;font-size:25px;}
.info{font-size:12px;color:red;}
</style>
</head>
<body>
使用選擇器：第一行：標籤選擇器的使用。第二行：類選擇器的使用。
<p>這是第一行正文內容......</p>
<p class="info">這是第二行的內容.....</p>
</body>
</html>
(3)鏈接式：外聯式樣式表是將定義好的css單獨放到一個以.css爲擴展名的文件中，在使用<link>標籤鏈接到所需要使用的網頁中，在<head>與</head>之間。
<link>標籤鏈接到網頁的格式：
<link href="*,css文件路徑"type="text/css"rel="stylesheet">
例如：首先定義一個sheet-x,css文檔，其代碼如下：
h2{color:#0000FF;}
p{color:#FF0000;text-decoration:underline;font-weight:bold;font-size:15px;}
其次，在HTML中使用：
<html>
<head>
<title>頁面標題</title>
<link href="sheet x.css"type="text/css"rel="stylesheet">
</head>
<body>
<h2>CSS標題1</h2>
<p>這是正文內容1......</p>
</body>
</html>
(4)導入式：該方式與鏈接是方式類似，只是通過import倒入頁面中。
import導入格式：（注意import句尾的句號不要省略）
<style type="text/css">@import url(*,css文件路徑）；</style>
3、css樣式表繼承性
css是級聯樣式表，級聯是指繼承性，即在標籤中嵌套的標籤繼承外層標籤的樣式。級聯的優先級順序：
（1）嵌入式樣式表（優先級最高）
（2）內聯式樣式表。
（3）外聯式樣式表。
（4）瀏覽器默認（優先級最低）。
注意：當樣式表繼承遇到衝突時，總是以最後定義的樣式爲準，例如：
<head>
<style type="text/css">
p{color:red;font-size:25px;}
</style>
</head>
<body>
<p>這式樣式表第1行正文內容.....</p>//這一行按選擇器規定的樣式顯示：按紅色、25顯示內容
<p style="color:blue;>正文內容1</p>//這一行是按標識內的樣式顯示：按藍色、但字大小仍按25px顯示
</body>