CSS(Cascading Style Sheets)

CSS是Cascading Style Sheets的英文縮寫，譯為「串接樣式表」，為「樣式表」(Style Sheets)的一種，定義HTML網頁的字型、文字顏色、大小、行間距離等的配置。「樣式表」，除了CSS支外還有XSL（eXtensible Stylesheet Language）等。不同的是XSL是針對XML文書樣式做定義。

如何定義CSS?

①CSS檔: 製作外部CSS檔案，利用Link元素建立關連。
②style元素: 在HTML文的文件標頭（"<head>～</head>"）間，利用Style元素指定樣式。
③Style屬性: 直接在元素中利用Style屬性直接指定樣式。

<head>
<!--① 利用外部的CSS檔定義-->
<meta http-equiv="Content-Style-Type" content="text/css">
<link rel="stylesheet" type="text/css" href="stylesheets/ul.css"/>

<!--② 利用style元素定義-->
<style type="text/css">
.sample {
	font-size:14pt;
	color:#f30;
}
</style>
</head>
<body>
......
<!--③ 直接利用style屬性定義-->
<ul style="font-size:14p;color:#f30;="></ul>
......
<!--② 參照style元素定義-->
<ul class ="sample"></ul>
......
<!--① 參照外部CSS檔定義-->
<ul class ="sample1"></ul>

</body>
</html>

參照外部CSS檔的好處

和外部CSS定義檔建立關連的好處，不僅所有的HTML的網頁都可以共用，所有的HTML的網頁樣式也可以簡單的統合一致。HTML文本身亦不用直接去定義每個構造的樣式，構文變成較為簡單，檔案的容量也會變較小，解析也會較快。

如何製作外部CSS檔

如上例所示，首先在文件標頭（"<head>～</head>"）間，使用meta元素定義樣式的MIME類型為"text/css"，可以避免在開啟網頁或搜尋引擎在搜尋時發生錯誤。接著利用link元素的href屬性指定外部CSS檔的所在位置(URI)，rel屬性設定連結對象和目前正閱覽的文件之間的關係，type屬性設定連結對象的MIME Type，讓UA端能夠正確的找到並解析外部CSS檔案。

外部的CSS檔只要使用Text編輯器(windows的筆記本等)即可編輯。如下範例所示，在stylesheets/ul.css檔內寫入選擇器(selector)為".sample1"，{ }括弧內設定文字大小樣式為12pt(font-size:12pt;)、顏色為紅色(color:red;)之後，上列的網頁中類別(class)為sample1的ul元素的文字大小就會變成12pt、顏色變成紅色。

stylesheets/ul.css檔

.sample1	{
	font-size:12pt;
	color:red;
}