學習CSS需知道的十件事

1.　CSS的要點是在你的頁面中使用簡潔的HTML代碼,然後編寫CSS"控制規則"來樣式化頁面中的對象.頁面保持清晰有條不紊看上去非常棒.這樣你的Html頁面可以在行動裝置和標準瀏覽器中運行.這就是CSS的要點.

不過CSS的藝術在於能夠利用CSS控制規則快速有效地操縱頁面對象.把CSS規則與HTML標記匹配起來的操做就好像是一種對話:兩者需要條理清楚且保持同步,否則的話他們將答非所問,搞得你頭大.

2.常規操作還是靈活匹配:假設你要樣式化頁面中一個<h1>header,可選擇操作有:

*用CSS規則h1{...定義所有的<h1>標記

*在對象實際位置進行樣式定義,舉個例子:<b>位於標記<p>的內部,在定義的時候你應該這樣p b{...

*針對某個特定的類型進行定義,為你想定義的標記<h1>添加class="myheader",然後使用CSS規則 .myheader{...

*僅僅定義個別<h1>header,你可以為標記<h1>添加id="myheader",然後使用CSS規則#myheader{...

當然你也可通過不同的方式混合使用上面的規則:

要定義所有位於類型為"magicform"的表單中的類型為"barleymash"的<h1>標記,你可以這樣form.magicform h1.barleymash {...

3.　擷取目標:匹配規則出錯會浪費很多的時間,這裡有個小竅門:在打算實施你的規則之前,不妨先使用color:red;這個屬性,它既書寫簡便又利於觀察. 一旦你看到HTML頁面中的文本變為紅色,說明規則匹配正確.這時你會知道你的規則可以在文檔中正確的部分生效,然後,刪除color:red;替換成原來你想實施的規則語句.

4.　掌握專利技術JM3 Gasbag Model:一個CSS布局設計就好比一個裝滿對象的大袋子.每一個對象均能夠對外施加壓力(聯想一下瓦斯泄露,如同你的布局設計)大多數情況下,壓力表現出來(margins, padding,以及float都是跟"推"密切相關的屬性)通過修改CSS規則,你判斷壓力,在瀏覽器中觀察你的頁面好比是搖晃一下袋子,會顯現出壓力集中在什麼地區產生影響,這就是CSS-管理壓力對象保持平衡的秘密.對付壓力,一次性應用過多的屬性,衝突就會導致你的對象到處擁擠,對象相互之間以及袋子會被紮出許多洞來.頁面漏洞百出,實在是沒勁.

Gasbag 例子1:要產生置中的效果,設定margin-left:auto ,margin-right:auto;這樣做是有效,因為你平衡了分布在左右兩側的壓力,於是元素就像放置在兩塊磁鐵中間的鐵球一樣被完美保持在了中間位置.

5.　GasbagCorollary 1:JM3 Gasbag Model　 只適用於使用預設的CSS"telative"定位元模式.當然也可能適用於"absolute"的定位元模式(通過給定精確的座標定位每個模組的布局方式),但是千萬不要輕易這樣做,一旦文本或者圖象的數量有所變動它會花費你很長時間來重新布局並且使你的頁面看上去很糟糕.只有那些怪異的出版設計師願意那樣做.

6.　規則A-Divs和Spans:CSS中的混合語言是兩個名為<div>和<span>的標記,兩者均沒有預設的外觀,所謂的 <div>以及<span>不過是一些容器和在文本中的線。他們只是普通的用以應用樣式的標記

7.　規則B：Div是容器，<span>是文本，<div>是有高度，寬度，隊列可以與之打交道。還有：一個<div> 的高度是指它其中內容的高度（文本、映像或者其他<div>）.<sapn>標記用於文本中的分割，正因他們只在成一條直線的文本中有意義，所以被稱為"inline"元素，其他的標記如：bold(b),italic(i),underline(u)等，他們被稱為是< span>/元素。

不要使用<div>來標記文本，也不要將<span>直接用於“袋子”，這樣你的布局工作才會變得容易

8.　應用CSS的三個層級：應用於較多數量的頁面（通過使用副檔名為.css的檔案）適用於單一頁面（通過定義一個樣式代碼塊），還有就是應用於頁面內部明確的標記（通過在標記內部添加style"..."屬性），當你完成一個頁面配置設計，把所有的CSS代碼轉換為一個獨立的css檔案是一個不錯的主意-你可以到處使用它。當你測試代碼時，僅僅將此CSS檔案內容複寫到HTML頁面內部的樣式代碼塊中(這對你來說很容易做到)然後你就不必在兩個檔案之間來回切換.當樣式代碼定下來的時候再修改原CSS檔案(我認為這段話作者的意思是:不斷備份一個穩定的測試代碼).

9.　保持代碼簡潔：書寫簡潔的HTML雖然很簡單，但即便是那些自認為很瞭解CSS的人也沒有把它寫的簡潔高效。高效的代碼不能使你的頁面載入更快，但是它能夠讓你的編碼工作更容易。

three tips：

*精簡你的規則語句：將(font-family, font-size) (margin-left, margin-right)轉換為單行規則margin：0px 10px 10px 10px；

*當你看到一個人的層疊樣式表有許多像下面這樣的行：

.redtext {font-family: Arial, Helvetica, sans-serif;color: red;}

.bluetext {font-family: Arial, Helvetica, sans-serif;color: blue;}

這就表示他們可能不知道這個技巧。

*使用“，”一次性將同一CSS樣式規則應用到多種類型的HTML標記中： p, b, i {… 使用一行程式碼完成把樣式應用到段落、粗體、 以及斜體文本的任務.

10.　所謂技巧（hacks）其實是愚蠢的，你不需要他們：許多CSS指南的書都一再強調“要使你的頁面適應多瀏覽器環境，你應當學習很多“CSS技巧”。諸如此類都是廢話。它對你來說毫無用處。

對每個人來說學習CSS開始都是一個痛苦的過程。不必擔心，愚蠢的不是你而是CSS。不要認為你需要記住所有的屬性，可以在旁邊開啟網頁Got API’s handy cheat sheet參考的嘛!