一、對@import url（）的總結
1，@import url（）機制是不同於link的，link是在加載頁面前把css加載完畢，而@import url（）則是讀取完文件後在加載，所以會出現一開始沒有css樣式，閃爍一下出現樣式後的頁面(網速慢的情況下)。
2，@import 是css2裏面的，所以古老的ie5不支持。
3，當使用javascript控制dom去改變樣式的時候，只能使用link標籤，因爲@import不是dom可以控制的。4，link除了能加載css外還能定義RSS，定義rel連接屬性，@import只能加載css。
@import url(xxx.css); 有最大次數的限制，經測試IE6的最大次數是31次，第32個import及以後的都不能生效。
二、background-repeat:的用法
1.background-repeat: repeat-x 0 0 這種是DW8以後的默認書寫規範，是正確的。
2.background: repeat-x 0 0 這種是DW8以前的書寫規範，也是正確的。
意思就是背景以X軸（橫向）平鋪，並且起始平鋪的位置是x座標爲0，y座標爲0，就是左上角橫向平鋪。
如果換成“background: repeat-x 0 -50px”的話就是Y座標爲負的50像素橫向平鋪。
需要注意的是除0之外所有的數值都要加上單位（比如像素px）。
background-repeat: 指背景圖片的重複與否以及重複方式, 有no-repeat, repeat, repeat-x, repeat-y四種屬性值.
no-repeat: 即無論背景圖片的大小, 只顯示單個背景圖片, 如首頁的第一篇文章標題前的”NEW”圖標, 代碼如上所示;
repeat: 指背景圖片橫向和縱向重複連續顯示;
repeat-x: 指背景圖片橫向重複連續顯示;
repeat-y 指背景圖片縱向重複連續顯示示例:
示例：
<html> <head> <style type="text/css"> body { background-image:url('top-bj.gif'); background-repeat:repeat-x; } div { background:#ffffff url('top-3.gif') repeat-x fixed; } </style> </head> <body> <div>
</div> </body> </html>
三、CSS list-style-type 屬性
<ul class="circle">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
none 無標記。
disc 默認。標記是實心圓。
circle 標記是空心圓。
square 標記是實心方塊。
decimal 標記是數字。
decimal-leading-zero 0開頭的數字標記。(01, 02, 03, 等。)
lower-roman 小寫羅馬數字(i, ii, iii, iv, v, 等。)
upper-roman 大寫羅馬數字(I, II, III, IV, V, 等。)
lower-alpha 小寫英文字母The marker is lower-alpha (a, b, c, d, e, 等。)
upper-alpha 大寫英文字母The marker is upper-alpha (A, B, C, D, E, 等。)
lower-greek 小寫希臘字母(alpha, beta, gamma, 等。)
lower-latin 小寫拉丁字母(a, b, c, d, e, 等。)
upper-latin 大寫拉丁字母(A, B, C, D, E, 等。)
hebrew 傳統的希伯來編號方式
armenian 傳統的亞美尼亞編號方式
georgian 傳統的喬治亞編號方式(an, ban, gan, 等。)
cjk-ideographic 簡單的表意數字
hiragana 標記是：a, i, u, e, o, ka, ki, 等。（日文片假名）
katakana 標記是：A, I, U, E, O, KA, KI, 等。（日文片假名）
hiragana-iroha 標記是：i, ro, ha, ni, ho, he, to, 等。（日文片假名）
katakana-iroha 標記是：I, RO, HA, NI, HO, HE, TO, 等。（日文片假名）
四、text-transform 屬性控制文本的大小寫
值 描述
none 默認。定義帶有小寫字母和大寫字母的標準的文本。
capitalize 文本中的每個單詞以大寫字母開頭。
uppercase 定義僅有大寫字母。
lowercase 定義無大寫字母，僅有小寫字母。
inherit 規定應該從父元素繼承 text-transform 屬性的值。
示例：
<html>
<head>
<style type="text/css">
h1 {text-transform: uppercase}
p.uppercase {text-transform: uppercase}
p.lowercase {text-transform: lowercase}
p.capitalize {text-transform: capitalize}
</style>
</head>
<body>
<h1>This Is An H1 Element</h1>
<p class="uppercase">This is some text in a paragraph.</p>
<p class="lowercase">This is some text in a paragraph.</p>
<p class="capitalize">This is some text in a paragraph.</p>
</body>
</html>
五、display 屬性規定元素應該生成的框的類型
<html>
<head>
<style type="text/css">
p {display: inline}
div {display: none}
</style>
</head>
<body>
<p>本例中的樣式表把段落元素設置爲內聯元素。</p>
<p>而 div 元素不會顯示出來！</p>
<div>div 元素的內容不會顯示出來！</div>
</body>
</html>
本例中的樣式表把段落元素設置爲內聯元素。而 div 元素不會顯示出來！
<html>
<head>
<style type="text/css">
span
{
display: block
}
</style>
</head>
<body>
<span>本例中的樣式表把 span 元素設置爲塊級元素。</span>
<span>兩個 span 元素之間產生了一個換行行爲。</span>
</body>
</html>
本例中的樣式表把 span 元素設置爲塊級元素。
兩個 span 元素之間產生了一個換行行爲。
六、font: 12px/1.5 Tahoma, Helvetica, Arial, sans-serif;網頁設計中的默認字體
font-size採用px, 不採用em. 理由是em帶來的可用性提升很有限，同時基於em很難保證視覺設計的精確性，並且現在主流瀏覽器都支持“全頁面縮放（Full Page Zoom）”功能，是時候不用考慮基於字體大小（em）的設計了。
line-height採用1.5, 也就是18px. 這是淘寶視覺規範中定義的行高，對於12px字體，這個行高看起來很舒服。
font-family默認採用Tahoma. Tahoma是英文Windows操作系統的默認字體，這個字體比較均衡，顯示中英文混排很不錯，是經久耐看的一款字體。
Tahoma是Matthew Carter爲微軟公司設計的一款字體，從Mac OS X 10.5開始，默認也捆綁了這款字體。但在Mac OS X 10.4及其之前的系統中，沒有Tahoma字體，但有一款看起來比Tahoma更典雅的系統默認字體：Helvetica. 不信你玩玩這款遊戲：Helvetica vs. Arial. 個人情感上，我甚至想把Helvetica放在首位，但考慮到非Mac系統的Helvetica字體都是rip版，以及大部分淘寶用戶用的是Windows操作系統，因此只能委屈Helvetica, 放在第二位。
Arial是早期Windows英文系統的默認字體，XP和Vista上都是Tahoma了。Arial幾乎在所有操作系統中都有，因此放在最後，作爲一道屏障。
最後的sans-serif是針對強悍的Linux DIY族。Linux默認只有kernel, 字體完全由用戶自定義，針對這部分用戶，sans-serif可能能派上用場。
最後，無論在XP還是Vista下，不指定網頁的中文字體時，默認就是宋體。因此font-family裏的'宋體'是多餘的，可以省去。（Opera和Safari不認識SimSun, 用到宋體的地方，還是用'宋體'更保險）（待測試驗證：不指定中文字體時，網頁的默認中文字體是什麼？Linux是自己配的，Mac OS X呢？還有Vista中文系統。這些環境下，哪位朋友幫忙測試下網頁的默認中文字體？）
用Tahoma字體，在中英文混排時，也有個不好的地方：
兩個數字30所佔的寬度，大於一個宋體漢字，導致上圖中對不齊。但這僅是設計上的小不妥。調整爲以冒號爲基線，都向右對齊就可以避免了。
“helvetica, arial”, Not “arial, helvetica”（國內的copy&paste太嚴重了，百度有啊的默認字體是arial,helvetica,sans-serif, 雅虎中國的是arial,helvetica,clean,sans-serif, 還有一堆站點包括淘寶都犯了這個錯誤）
七、text-decoration 屬性文本裝飾
text-decoration 有 5 個值：
?none
?underline
?overline
?line-through
?blink
不出所料，underline 會對元素加下劃線，就像 HTML 中的 U 元素一樣。overline 的作用恰好相反，會在文本的頂端畫一個上劃線。值 line-through 則在文本中間畫一個貫穿線，等價於 HTML 中的 S 和 strike 元素。blink 會讓文本閃爍，類似於 Netscape 支持的頗招非議的 blink 標記。
none 值會關閉原本應用到一個元素上的所有裝飾。通常，無裝飾的文本是默認外觀，但也不總是這樣。例如，鏈接默認地會有下劃線。如果您希望去掉超鏈接的下劃線，可以使用以下 CSS 來做到這一點：
a {text-decoration: none;}注意：如果顯式地用這樣一個規則去掉鏈接的下劃線，那麼錨與正常文本之間在視覺上的唯一差別就是顏色（至少默認是這樣的，不過也不能完全保證其顏色肯定有區別）。
還可以在一個規則中結合多種裝飾。如果希望所有超鏈接既有下劃線，又有上劃線，則規則如下：
a:link a:visited {text-decoration: underline overline;}不過要注意的是，如果兩個不同的裝飾都與同一元素匹配，勝出規則的值會完全取代另一個值。請考慮以下的規則：
h2.stricken {text-decoration: line-through;}
h2 {text-decoration: underline overline;}
對於給定的規則，所有 class 爲 stricken 的 h2 元素都只有一個貫穿線裝飾，而沒有下劃線和上劃線，因爲 text-decoration 值會替換而不是累積起來。
八、white-space：屬性
<head>
<style type="text/css">
p
{
white-space: nowrap
}
</style>
</head>
<body>
<p>
這是一些文本。
這是一些文本。
這是一些文本。
這是一些文本。
這是一些文本。
這是一些文本。
這是一些文本。
這是一些文本。
這是一些文本。
這是一些文本。
這是一些文本。
這是一些文本。
</p>
</body>
</html>
這是一些文本。這是一些文本。這是一些文本。這是一些文本。這是一些文本。這是一些文本。這是一些文本。這是一些文本。這是一些文本。這是一些文本。這是一些文本。這是一些文本。
(不換行)
值 描述
normal 默認。空白會被瀏覽器忽略。
pre 空白會被瀏覽器保留。其行爲方式類似 HTML 中的 <pre> 標籤。
nowrap 文本不會換行，文本會在在同一行上繼續，直到遇到 <br> 標籤爲止。
pre-wrap 保留空白符序列，但是正常地進行換行。
pre-line 合併空白符序列，但是保留換行符。
inherit 規定應該從父元素繼承 white-space 屬性的值。
九、z-index:屬性
<html>
<head>
<style type="text/css">
img
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<img src="/i/eg_smile.gif" />
<p>由於圖像的 z-index 是 -1，因此它在文本的後面出現。</p>
</body>
</html>
十、點擊鏈接表色的CSS實現
<html>
<head>
<style type="text/css">
a:link {color: #FF0000}爲點擊的
a:visited {color: #00FF00}點擊了的
a:hover {color: #FF00FF}鼠標指着的
a:active {color: #0000FF}點完後的
</style>
</head>
<body>
<p><b><a href="/index.html" target="_blank">這是一個鏈接。</a></b></p>
<p><b>註釋：</b>在 CSS 定義中，a:hover 必須位於 a:link 和 a:visited 之後，這樣才能生效！</p>
<p><b>註釋：</b>在 CSS 定義中，a:active 必須位於 a:hover 之後，這樣才能生效！</p>
</body>
</html>