CSS（Cascading Styel Sheet）是控制Web 頁面外觀的一系列格式設定規則,是網頁設計必不可少的工具之一。下面我們就開始學習css的基本文法格式。
一、CSS定義規則
層疊樣式表是一個完全的純文字文件，通常以“css”為擴展名作為單獨的文件來使用，它的內容包含了一組告訴瀏覽器，如何安排與顯示特定的html標籤中內容的規則， CSS定義規則由三個部分構成：選擇符，屬性和屬性的值。文法如下：
語法： selector { property: 值 }
↑ ↑ ↑
選擇符{ 屬性： 值}
CSS 樣式由一系列規則組成，這些規則由Web 瀏覽器解析，然後套用在HTML 文件對應的元素上。 CSS 樣式規則由三個部分組成，分別是選擇器、屬性和值：
1. 選擇符：選擇符號是要定義樣式的html標記，html標記作為選擇符定義後，則在html頁面中該標記下的內容，會依照CSS定義的規則發生改變。
2. 屬性：您希望為HTML 元素設定的樣式名稱，指的是選擇符號中要改變的內容，常見的是：字體屬性，顏色屬性，文字屬性等。下面就是我們定義的一個樣式表。
3. 值：屬性的取值，由數值和單位或關鍵字組成，用來控制某個屬性的顯示效果。
@charsetgb2312;body{font-family:宋體;font-size:20px;color:#FF0000;}p{font-family:宋體;font-size:30px;color:#FF00ff;}在這個樣式表中：
1. @charsetgb2312;表示使用中文國標字元集。
2. body 和p 是html 中的兩個標籤，對這兩個標籤設定了三種樣式，分別是：
font-family: 指定字體的字體。
">二、嵌入樣式表
在Html頁面內部定義的CSS樣式表,叫做嵌入式CSS 樣式表，也就是在HTML文件的head部分中，使用style 標籤並在該標籤中定義一系列CSS 規則。
語法：<head><styletype=text/css><!--......--></style></head>
說明：
<style>指示CSS樣式表開始，結束標誌為</style>，在開始標誌<style>中可以根據需要添加一些屬性，如上列中的屬性type=text/css，它表示CSS樣式表採用MIME類型，這種類型的特點是，當瀏覽器不支援CSS程式碼時，對CSS程式碼進行過濾，避免瀏覽器以原始碼的方式顯示CSS程式碼。為了確保更加可靠，在樣式表裡再次加上註解標識符<!--......-->，CSS規則就定義在這個註解標識符中。
範例1：t1.htm
<html><head><metahttp-equiv=Content-Typecontent=text/html;charset=gb2312/><title>嵌入式CSS樣式表</title><styletype=text/css><!--@charsetgb2312; body{font-fa mily:宋體;font-size:20px;color:#FF0000;}p{font-family:宋體;font-size:30px;color:#FF00ff;}--></style></head><body>千山鳥飛絕萬徑人蹤滅<p>千山鳥飛絕萬徑人蹤滅</p></body></html>三、連結外部樣式表
外部CSS樣式表是一個以.css為後綴的外部文件,定義一個外部樣式表可以套用於多個頁面。在html頁面中使用link標籤，可以將外部的css樣式表連接進來，其語法如下：
文法:
<linkrel=stylesheethref=*.css”type=text/css>
參數:
1. rel屬性表示樣式表將以何種方式與HTML文件結合。 rel取值:Stylesheet,表示指定一個外部的樣式表
2. *.css是單獨儲存的樣式表檔案。
範例2 定義一個外部css檔案p2.css,然後在t2.htm檔案中連接該檔案。
範例2：t2.htm
<html><head><metahttp-equiv=Content-Typecontent=text/html;charset=gb2312/><title>連結外部樣式表</title><styletype=text/css><!--@charsetgb2312;body {font-family:宋體;f ont-size:20px;color:#FF0000;}p{font-family:宋體;font-size:30px;color:#FF00ff;}--></style></head><body>親愛的,你慢慢飛,小心前面帶刺的玫瑰<p>親愛的,你張張嘴,風中花香會讓你沉醉</p></body></html>四、內聯樣式表
內嵌樣式指的是，在HTML特定的標籤中定義的CSS樣式表。常用的HTML 標籤主要是BODY中的一些元素，例如：<p>，<h2>，<ul>,<div>等，以下是內聯樣式的範例。
範例3：t3.htm
<html><head><metahttp-equiv=Content-Typecontent=text/html;charset=gb2312/><title>無標題文件</title></head><body><divst yle=color:blue;font-size:30px;>風中花香會讓你沉醉</div><pstyle=color:#ff0000;font-style:italic;>風中花香會讓你沉醉</p> </body></html>
五、匯入外部樣式表
匯入外部樣式表指的是，在html檔案中已經建立了嵌入式樣式表，但是還要使用外部樣式表的某些設置，這時就可以在<style>裡匯入一個外部樣式表，匯入時用@import，如下例所示。
<html><head><styletype=text/css><!--@importurl(mystyle.css);其他樣式表的宣告--></style></head></body>..... .</body></html>
其中@import url(mystyle.css); 表示導入mystyle.css樣式表，導入外部樣式表必須在樣式表的開始部分，在內部樣式表的上面。
範例4
定義一個外部css檔案p4.css,然後在t4.htm檔案中匯入該文件
範例4：t4.htm
<html><head><metahttp-equiv=Content-Typecontent=text/html;charset=gb2312/><title>匯入外部樣式表</title><styletype=text/css><!--@importurl(p4 .css);@charsetgb2312;body {font-family:宋體;font-size:20px;color:#FF0000;}p{font-family:宋體;font-size:30px;color:#FF00ff;}--></style></head> <body>千山鳥飛絕萬徑人蹤滅<p>千山鳥飛絕萬徑人蹤滅</p></body></html>六、css樣式表的繼承性
在css樣式表中，子標籤的某些屬性會繼承父標籤的屬性，例如標籤p是標籤body的子元素，當標籤p未設定字體的顏色屬性時，p中的內容會使用body中的顏色值，下面的範例說明了這種情況。
範例5：t5.htm
<html><head><metahttp-equiv=Content-Typecontent=text/html;charset=gb2312/><title>嵌入式CSS樣式表</title><styletype=text/css><!--@charsetgb2312; body{ font-family:宋體;font-size:20px;color:#FF0000;}p{font-family:宋體;font-size:30px;}--></style></head><body>千山鳥飛絕萬徑人蹤滅<p>千山鳥飛絕萬徑人蹤滅</p></body></html>七、設定多個元素
css允許將單一的格式套用到多個標籤，各個標籤做為選擇符時用逗號隔開，如下例所示。
範例6：t6.htm
<html><head><metahttp-equiv=Content-Typecontent=text/html;charset=gb2312/><title>嵌入式CSS樣式表</title><styletype=text/css><!--@charsetgb2312; h1,h2,h3 ,p,{font-family:宋體;color:#FF0000;}--></style></head><body><h1>千山鳥飛絕萬徑人蹤滅</h1><h2>千山鳥飛絕萬徑人蹤滅</h2><h3>千山鳥飛絕萬徑人蹤滅</h3><p>千山鳥飛絕萬徑人蹤滅</p></ body></html>