CSS入門系列：第二部分 屬性（四）

——摘自《CSS入門經典（第3版）》 Lan Pouncey、Richard York著

【樣式化列表】·list-style-type屬性改變每個清單項目之前的項目符號的樣式。

屬性	值
list-style-type	disc|circle|square|decimal|decimal-leading-zero|lower-roman|upper-roman|lower-greek|lower-latin|upper-latin|armenian|georgian|none 無序列表的初始值：disc 有序列表的初始值：decimal

·樣式化無序列表

有4種可能的符號類型：disc、circle、square和none，預設值是disc。

·樣式化有序列表

在所有瀏覽器上都支援的關鍵字：decimal、lower-roman、upper-roman和none。

·list-style-image屬性，接受一副映像的URL

屬性	值
List-style-image	<uri> | none 初始值：none

·list-style-position屬性

控制清單項目符號的位置是出現在清單項目元素的內部還是外部。

·list-style簡寫屬性

屬性	值
List-style	<list-style-type> | <list-style-position> | <list-style-image>

List-style屬性指定1~3個值。

【定位】·position屬性用於為元素指定不同的定位類型。

屬性	值
Position	static | relative | absolute | fixed

z-index採用預設值auto的定位元素依次向上堆疊。預設升序。

【樣式化表】·HTML表支援許多可選元素：

<caption>元素用來提供表標題或者表名稱。

<colgroup>元素用來閉合表中所有的<col>元素。<colgroup>元素不會顯示。

<col>元素用來控制與每個表列有關的屬性，例如列寬，<col>元素不會顯示，也不包含內容。

<thead>元素閉合與列表頭有關的資訊。如果列印的表跨越多頁，那麼<thead>中的資訊會在每頁的頂部重複出現。

<tbody>元素包含了主要的表資料。

<tfoot>腳註內容

<table><caption>Ingredients</caption><colgroup><col class=”ngredient”><col class=”quantity”></colgroup><thead><tr><th>Ingredient</th><th>Quantity of Ingredent</th></tr></thead><tfoot><tr><tr><Ingredient/tr><tr>Quantity of Ingredient</tr></tr></tfoot><tbody>.......</tbody></table>

·caption-side屬性控製表標題的位置 是出現在表的上方還是下方。

屬性	值
caption-side	top|bottom 初始值：top

註：IE6和IE7支援<caption>元素，不支援caption-side屬性。

·表列

<colgroup>和<col>元素控制列的寬度、背景顏色或者文本顏色。

·控製表的布局

屬性	值
table-layout	auto| fixed 初始值：auto

在預設情況下，表會擴充或收縮以容納其中包含的資料。

有些時候需要強製表以及儲存格具有固定的寬度，如下代碼 效果，因為常值內容太寬，表的寬度仍會大於100px：

......<title></title><style type=”text/css”>table..control {width:100px;}table.th.td..control {width:20px}...</style>

在這種情況下可以使用 table-layout fixed強制使用一個寬度，那麼效果文本會超出表格邊界，而在IE瀏覽器中 溢出的文本會被裁剪，不同瀏覽器顯示不一致。

· border-collapse屬性控製表儲存格的間距

屬性	值
border-collapse	collapse| separate 初始值：sepaarate

值設定為collapse刪除儲存格之間的間距

·border-spacing屬性控制邊框間距

屬性	值
border-spacing	<length><length>? 初始值：0

註：IE6、IE7不支援border-spacing屬性，如果必須支援這兩個瀏覽器，常用的一種解決方案是從表格儲存格中完全移除邊框，然後把每個儲存格的內容放到一個<div>元素中，對這些<div>元素應用所需的邊框和內邊距。

border-spacing屬性的文法：

border-spacing:<horizongtal spacing length> <vertical spacing length>

如果提供了可選的第二個值，分別指定垂直水平方向的間距。

【建立完整的布局】·例子

body {font:82%/1.4  Verdana, Arial, Helvetica, sans-serif;   %}h2.h3 {font-family:Georgia,Times,Times New Romas, serif;}

//在body元素上設定字型大小為82%，行高為1.4，這使得本文的大小為13px，增加了每一行的間距，以適應多數人的閱讀習慣，通過使用百分比指定字型大小不會違反IE中字型大小調整功能。

使用@font-face規則向網站訪問者提供他們沒有安裝的字型。

@font-face {　　font-family:Raleway;　　src:url(raleway_thin.eot);　　src:local(releway_thin),url(raleway_thin.ttf) format(opentype);}

//這建立了一個可以在CSS中使用的新的font-face引用，這條規則包含兩個部分：

font-family屬性，提供了一個用於在以後引用字型的標籤

src屬性，第一條src聲明應用於IE，其值就是字型檔的URL；第二條src應用於其他所有瀏覽器，它們支援Open Type字型格式，這條聲明必須放在前一條的後面，以便它能夠重寫支援瀏覽器的第一條src聲明。第二條src還包含了local，表示應該首先在使用者已安裝的字型中尋找該字型。

註：自訂字型麻煩少用

·例子

.......navigation a {display:block;margin-left:0.5em;padding:0.5em;border:1px solid #ccc;color:#233;text-decoration:none;}.navigation a:focus,.navigation a:hover {background:#233;color:#FFF;}......<ul class=”navigation”><li><a href=”#”>Home</a></li><li><a href=”#”>Recipes</a></li><li><a href=”#”>Suggestions</a></li></ul>

·漸層背景

background-image:-moz-linear-gadient(top,#233,#FFF);background-image:-webkit-gradient(linear,left top,left bottom,from(#233));-ms-filter:”progid:DXImageTransform.Microsoft.Gradient(StartColorStr=#223333),EndColorStr=##FFFFFF”;background-image:linear-gradient(top,#233,#FFF);

//第一條和第二條聲明應用於Mozilla Firefox和Webkit瀏覽器（Apple Safari和Google Chrome）屬性值帶有-moz-和-webkit-首碼，供應商首碼允許瀏覽器實現尚未最終完成的CSS3規範。

最後一條聲明沒有供應商首碼，因為這是當前CSS3建議中推薦的格式。

第三條聲明採用了一種不同的格式，可以使用Microsoft提供的篩選器來實現漸層，IE8和IE9都支援這種篩選器。

IE不能正確支援簡寫十六進位形式。

例子：

html{height:100%;background-color;#233;background-image:-moz-linear-gradient(top,#233,#FFF);background-image:-webkit-gradient(linear,left top,left bottom,from to(#FFF));-ms-filter:”progid:DXImageTransform.Microsoft.Gradient(StartColorStr=#223333,EndColorStr=#FFFFFF)”;background-image:linear-gradient(top,#233,#FFF);}

//除了應用漸層，還添加了一條height聲明，設定的高度使得漸層應用於頁面的整個高度，而不是在內容結束的地方停止。

而background-color對於不支援漸層背景的瀏覽器很重要。