CSS——階層式樣式表（Cascading Style Sheet）簡稱“CSS”，通常又稱為“風格樣式表（Style Sheet）”，它是用來進行網頁風格設計的。
CSS屬性和選取器
css的文法結構僅僅有三部分組成：選取器（Selector）、屬性（property）、和值（value）。
使用方法：
selector {Property:value;}
選取器（Selector）指這組樣式編碼所要針對的對象。可以是一個XHTML標籤，如body,h1；也可以是定義了特定的ID或CLASS的標籤，如#main選取器表示選擇<div id="main">，即一個被指定了main為id的對象。瀏覽器將對css選取器進行嚴格的解析，每一組樣式均會被瀏覽器應用到對應的對象上。
屬性（Property）是CSS樣式控制的核心，對於每一個XHTML中的標籤，CSS都提供了豐富的樣式屬性，如顏色、大小、定位、浮動方式等。
值（value）是指屬性的值，形式有兩種，一種是指定範圍的值，如float屬性，只可能應用left，right，none三種值；另一種則是用數值的，如width能夠使用0-9999，或其它數學單位來指定。
在實際應用中，我們往往使用以下類似的應用形式：
body {background-color:blue;}
選取器有3類：ID選取器，類別選取器和HTML標籤選取器。其中優先順序為:ID選取器 > 類別選取器 > HTML標籤選取器。
ID選取器
ID是網頁中用來標識HTML中一個特定元素的，ID選取器在CSS中用#號來定義。
例：
HTML中：
<span id="special">欄目二</span>
CSS中：
#special{ font-size:14px;}
CLASS選取器(類別選取器)
class則是網頁中用來標識一組特定元素的，類別選取器在CSS中用.號來定義。
例：
HTML中：
<span class="menu3">欄目三</span>
CSS中：
.menu3 span{ color:#00f; font-size:40px;}
標籤選取器 （類型選取器）
類型選取器，是指以網頁中已有的標籤類型作為名稱的選取器。body是網頁中的一個標籤類型，div也是，span也是。因此以下選取器都是類型選取器，而它們將控制頁面中所有的body或div或span：
body{}div{}span{}
當然，CSS也提供了便捷的文法：
①.除了對單個XHTML元素進行樣式指定，同樣可以對一組對象進行相同的樣式指派，使用逗號對選取器進行分隔。
h1,h2,h3,p,span{font-size:12px; font-family:arial;}
使得頁面中所有的h1,h2,h3,p,span都將具有相同的樣式定義。這樣做的好處是對於頁面中需要使用同樣式的地方只需要書寫一次樣式表即可實現，減少代碼量，改善css代碼的結構。
②.可以對某一個對象的子物件進行樣式設定， 對象之間使用空格作為個分隔字元。
例：
HTML中：
<h1>這是我們的一段文本 <span>這是span內的文本</span></h1><h1>單獨的h1</h1><span>單獨的span</span><h2>被h2標籤套用的文本 <span>這是h2下的span</span></h2>
CSS中：
h1 span{font-weight:bold;}
h1標籤之下的span標籤將被應用font-weight:bold的樣式設定。注意，僅僅對有此結構的標籤有效，對於單獨存在的h1或單獨存在的span及其他非h1標籤下屬的span均不會應用此樣式。這樣做能夠協助我們避免過多的ID及CLASS的設定，直接對所需設定的過猶不及進行設定。
還有：
h1 .p1 {} /*表示h1標籤下的所有class為p1的標籤。*/#content h1{} /*表示id為content的標籤下的所有h1標籤。*/
當然多級也是支援的，如以下選取器樣式同樣能夠作用：
body h1 span stront{ font-weight=bold;}
css還提供了一些特殊標籤的表示方法：
①.用*號來泛指所有的元素
*{margin:0PX;padding:0Px;border:0px;}
②.body中設定全文的樣式
body{font-size:14px;}
③.a:link，a:hover，a:visited 可以設定 滑鼠未移上、經過、訪問過後的超連結樣式
a:link,a:visited{/*滑鼠未移上去的超連結的樣式*//*訪問過後的超連結的樣式*/color:#000;text-decoration:none;}a:hover{/*滑鼠移上去的超連結的樣式*/color:#00f;text-decoration:underline;}
④.置中對齊：
text-align :center; /*文本水平對齊*/line-height:2px;/*(數值與行高相同，則自動垂直對齊)*/vertical-align:middle; /*元素垂直對齊*/
三、使用CSS布局的優點使用CSS布局的網頁相對於傳統的Table布局的網頁有4大優勢：1.表示與內容分離2.提高頁面的載入速度3.易於維護和改版4.更符合W3C指定的WEB標準 四、CSS使用方式：CSS有3種方式可以在網站網頁上使用： ①內聯樣式：採用style屬性將樣式內嵌到各個網頁元素。
②內部樣式表：將用style元素建立嵌入的樣式表插入到網頁中的HEAD元素部分中。
③外部樣式表：用link元素將外部樣式表連結到網頁上。舉例說明：【內聯樣式】<html><head> <title>文檔標題</title> </head><body> <p style="color:Blue;font-Style:Italic;">我是內聯樣式</p> <p style="color:Red">我使用的是Style屬性</p></body></html>【內部樣式表】
<html><head> <title>文檔標題</title> <style type="text/css"> h1 {color:marron;}p {color:hotpink; font-familiy:Arial;} </style></head><body> <h1>我是內部樣式表</h1><p>我使用的是Style元素</p></body></html> 【外部樣式表】“Test.htm”檔案內容：
<html><head> <title>文檔標題</title> <link href="cssTest.css" rel="stylesheet",type="text/css"/> </head><body> <h1>我是外部樣式表</h1><p>我使用的是Link元素</p></body></html>“cssTest.css”檔案內容：
h1 {color:marron;} p {color:hotpink; font-familiy:Arial;}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
