CSS 層疊樣式表
CSS的建立，有四種方式，例子如下：
例一：<div style="width:200px"></div>
例二：
<html>
<head>
<style type="text/css">
.del{width:200px;}
</style>
</head>
<body></body>
</html>
例三：
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/de.css"/>
</head>
<body></body>
</html>
例四：
<html>
<head>
<style>
@import url("css/css.css");
</style>
</head>
<body></body>
</html>
三種建立樣式的方式：寫在標籤中的樣式，內聯的樣式，外部檔案引入的樣式。
項目經驗總結-注意：
1.寫在標籤中的樣式：一般情況下，是用js動態載入在其中的，為了實現某些互動效果。（正常靜態頁面，禁止寫在標籤中）。
2.內聯的樣式：在模組化的開發中，這種情況的出現，是為了減少HTTP的請求，一般是在訪問量比較大的首頁中，用內聯的方式，載入各模組的樣式。
3.外部檔案引入的樣式：（正常靜態頁面，必須用外部檔案的方式引入），這樣做的目的很簡單，一是為了縮減整個靜態頁面的大小，二是外部檔案易於維護，實現結構層、表現層、行為層的分離。
4.最後@import url為載入，這種模式，僅僅用在模組化開發中（建議）；
選取器：
ID選取器：
結構：<div id="de"></div>
樣式檔案：#id{width:200px;}
id選取器，是通過一個#符號，後跟你命名的id名字。
注意：一個ID只能應用於一個HTML標籤。
class選取器：
結構：<div class="de"></div>
樣式檔案：.de{width:200px;}
class選取器，是通過一個.符號，後跟你命名的class名字。
注意：CSS類別選取器中，只允許使用數字、字母、連字號（-）、和底線（_），要區分大小寫。
標籤選取器：
在CSS規則中，很容易辨認出標籤選取器，因為它們與要設定的標籤同名。如：h1 table img
例：img{windth:200px; height:200px;}
群選取器：
在某些實現中，可能很多地方需要用到相同的顏色，那麼就可以設定群選取器。例子：
h1, h2, h3, h4, h5, h6{color:red;}
也可以是類別選取器或者ID選取器，.de, .dell{color:red;} #de, #dell{color:red;} 也可以是組合模式:h1, p, .de, #dell{color:red;}
通用選取器：
*號是選擇每一個標籤通用的標誌，例子如：*{margin:0px;padding:0px;} #de*{color:red;}
注意：選擇所有ID為de元素內的字型顏色為紅色。
偽類：
pseudo-class:
a:link
注意：是指訪客還沒訪問到、滑鼠尚未滑過、或者點擊到的連結。
a:visited
注意：是指已經點擊過的連結。
a:hover
注意：滑鼠滑動過時改變連結的展示效果。
a:active
注意：訪客點擊時而展現的效果。
這些是比較常用的偽類，欲知詳細的偽類資訊，請參閱《CSS權威指南第三版》
派生選取器：
派生選取器是根據HTML族譜來實現的，比
例子：p a{color:red;}
注意：p標籤下的所有a標籤的字型顏色為紅色。
子選取器：
子選取器，是用>來標識其關係，這裡需要搞清楚，html標籤之間的關係。
例子：div>h1{color:red;} 表示：div 下的h1的字型顏色為紅色
同胞選取器：
同胞選取器，是表示相鄰的標籤，用+來標識其關係。
例子：h2+p{color:red;} 注意：h2相鄰的p標籤中的字型顏色為紅色。
屬性選取器：
注意：這個選取器的使用，在實際開發項目，非常不常見，幾乎很少使用，它的例子如下：如何用title屬性選取器選擇所有的img標籤：
img[title]
解釋：第一部分是標籤名(img),第二部分是屬性名稱，[title]，如此，便選擇了所有的帶有title屬性的img標籤。
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
