●為什麼用CSS：
·一組樣式可以調用在多個對象上
·文法易學易懂（比HTML的文法還容易學，學了HTML之後，學CSS將非常容易）
·豐富的樣式效果
·是 DHTML 的基礎
·用css布局的一個好處是可以批量對頁面進行修改，它能將文檔結構和表現層分離開來，
減輕工作量和伺服器的負荷，增加網站的擴充能力和應用。
●CSS分類：按其位置可以分成三種
1、內嵌樣式：
內嵌樣式是混合在HTML標記裡使用的，用這種方法，可以很簡單的對某個元素單獨定義樣式。內嵌樣式的使用是直接將在HTML標記裡加入style參數。而style參數的內容就是CSS的屬性和值，如下例：
<p style="color: sienna;margin-left: 20px;">
這是一個段落
</p>
<!--這個段落顏色為土黃，左邊距為20象素-->
在style參數後面的引號裡的內容相當於在樣式表大括弧裡的內容。
注意：style參數可以應用於任意BODY內的元素（包括BODY本身），除了BASEFONT、PARAM和SCRIPT。
2、內部樣式表這是
這是最典型的CSS的聲明方式，但我 個人 認為：,影響頁面的外觀；
內部樣式表是把樣式表放到頁面的<head>區裡，這些定義的樣式就應用到頁面中了，樣式表是用<style>標記插入的，從下例中可以看出<style>標記的用法：
注意：有些低版本的瀏覽器不能識別style標記，這意味著低版本的瀏覽器會忽略style標記裡的內容，並把style標記裡的內容以文本直接顯示到頁面上。為了避免這樣的情況發生，我們用加HTML注釋的方式（<!-- 注釋 -->）隱藏內容而不讓它顯示：
3、外部樣式表：
調用外部樣式表是把樣式表儲存為一個樣式表檔案，然後在頁面中用<link>標記連結到這個樣式表檔案，這個<link>標記必須放到頁面的<head>區內，如下：
上面這個例子表示瀏覽器從mystyle.css檔案中以文檔格式讀出定義的樣式表。rel=”stylesheet”是指在頁面中使用這個外部的樣式表。type=”text/css”是指檔案的類型是樣式表文本。href=”mystyle.css”是檔案所在的位置。media是選擇媒體類型，這些媒體包括：螢幕，紙張，語音合成裝置，盲文閱讀裝置等。
一個外部樣式表檔案可以應用於多個頁面。當你改變這個樣式表檔案時，所有頁面的樣式都隨之而改變。在製作大量相同樣式頁面的網站時，非常有用，不僅減少了重複的工作量，而且有利於以後的修改、編輯，瀏覽時也減少了重複下載代碼。
●CSS注釋
為了方便你自己或者他人日後更好地理解你的CSS代碼，你可以寫CSS代碼注釋。CSS代碼注釋以/*開頭，以*/結束。
CSS的定義是由三個部分構成：選擇符（selector），屬性（properties）和屬性的取值（value）。
基本格式如下：
選擇符是可以是多種形式，一般是你要定義樣式的HTML標記，例如BODY、P、TABLE……，你可以通過此方法定義它的屬性和值，屬性和值要用冒號隔開：
body {color: black}
選擇符body是指頁面主體部分，color是控制文字顏色的屬性，black是顏色的值，此例的效果是使頁面中的文字為黑色。
如果屬性的值是多個單片語成，必須在值上加引號，比如字型的名稱經常是幾個單詞的組合：
為了使你定義的樣式表方便閱讀，你可以採用分行的書寫格式：
/*（段落排列置中，段落中文字為黑色，字型是arial）*/
2. 選擇符組 (集體聲明 和 分項聲明方式)
你可以把相同屬性和值的選擇符組合起來書寫，用逗號將選擇符分開，這樣可以減少樣式重複定義：
/*（這個組裡包括所有的標題元素，每個標題元素的文字都為綠色）*/
p, table{ font-size: 9pt }
/*（段落和表格裡的文字尺寸為9號字）*/
/*效果完全等效於：*/
p { font-size: 9pt }
table { font-size: 9pt }
3. 類選擇符
用類選擇符你能夠把相同的元素分類定義不同的樣式，定義類選擇符時，在自定類的名稱前面加一個點號。假如你想要兩個不同的段落，一個段落向靠右對齊，一個段落置中，你可以先定義兩個類：
p.right {text-align: right}
然後用不在不同的段落裡，只要在HTML標記裡加入你定義的class參數：
<p class="center">
這個段落是置中排列的
</p>
<p class="right"> 這個段落向靠右對齊的
</p>
<p class="center">
這個段落是置中排列的
</p>
注意：類的名稱可以是任意英文單詞或以英文開頭與數位組合，一般以其功能和效果簡要命名。
類選擇符還有一種用法，在選擇符中省略HTML標記名，這樣可以把幾個不同的元素定義成相同的樣式：
（定義.center的類選擇符為文字置中排列）
這樣的類可以被應用到任何元素上。下面我們使h1元素（標題1）和p元素（段落）都歸為“center”類，這使兩個元素的樣式都跟隨“.center”這個類選擇符：
注意：這種省略HTML標記的類選擇符是我們經後最常用的CSS方法，使用這種方法，我們可以很方便的在任意元素上套用預先定義好的類樣式。
4. ID選擇符
在HTML頁面中ID參數指定了某個單一元素，ID選擇符是用來對這個單一元素定義單獨的樣式。
ID選擇符的應用和類選擇符類似，只要把CLASS換成ID即可。將上例中類用ID替代：
定義ID選擇符要在ID名稱前加上一個“#”號。和類選擇符相同，定義ID選擇符的屬性也有兩種方法。下面這個例子，ID屬性將匹配所有id="intro"的元素：
#intro （字型尺寸為預設尺寸的110%；粗體；藍色；背景顏色透明）
下面這個例子，ID屬性只匹配id="intro"的段落元素：
注意：ID選擇符局限性很大，只能單獨定義某個元素的樣式，一般只在特殊情況下使用。
●定義連結的樣式
CSS中用四個偽類來定義連結的樣式，分別是：a:link、a:visited、a:hover和a : active，例如：
a:link{font-size : 18pt ;text-decoration : none ;color : blue ;}
以上語句分別定義了"連結、已訪問過的連結、滑鼠停在上方時、點下滑鼠時"的樣式。注意，必須按以上順序寫，否則顯示可能和你預想的不一樣。記住它們的順序是“LVHA”。
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
