讀《精通CSS：高級Web標準解決方案》

    由於最近在看《精通CSS:高級Web標準解決方案》，作了一些記錄。

---

  由於不少開發人員對於XHTML2的開發不滿，因而出現了WHATWG和W3C的分裂，WHATWG決定開發本身的規範，也就是HTML5,而W3C的XHTML2標準已被放棄，HTML5成爲了W3C的正式標準。XHTML和HTML的區別就是XHTML嚴格遵照XML編碼規定，瀏覽器會依據文檔的MIME 類型來解析文檔，若是不遵循規範會致使錯誤，而HTML倒是很寬鬆的。

     Doctype類型和瀏覽器模式，DTD（文檔定義類型）是一組機器可讀的規則，它們定義XML或HTML的特定版本中運行有什麼，不容許有什麼。瀏覽器會對頁面進行相應的措施，並決定採起何種行爲。瀏覽器會經過分析頁面的Doctype來了解使用哪一個DTD。

 

添加在全部站點上都使用的經常使用規則，造成某種原型CSS文件，這能夠節省更多的時間。

 

模式組合是一個頁面或一系列頁面，他們使用當前的樣式表顯示站點上可能吸納時的每種樣式排列組合，從標題級別和文本樣式直到特定的內容和佈局類型。

 

最基本的樣式指南應該描述通常性設計指南，好比rue處理標題和其餘排版元素，網格結構的設計方式是什麼，以及使用哪一個調色板。

 

IE7和更低版本不支持在除連接以外的其餘元素上使用僞類選擇器，可是全部現代瀏覽器都支持。

 

連接應該只用於get請求，決不要用於post請求。

 

把表單反饋信息寫在label標籤裏，而後絕對定位更好？

 

CSS框架試圖經過在標記和表現之間創建強耦合來簡化CSS佈局，可是這種耦合正式咱們拋棄基於表格佈局的主要緣由。

 

要想建立可伸縮且容易維護的CSS相同，首先應該檢查設計，尋找重複的模式，這包括頁面結構中的模式或在站點中等元素反覆出現的方式。在這個階段，不該該太關注表現方式，而是應該注意結構和意義。

1，先把頁面劃分爲大的結構性區域，好比容器，頁眉，頁面區域和頁腳。

2，而後注意力轉移到內容區域自己，開始創建網格結構。尋找共同的特徵而不是視覺表現。

3，而後在各個區域中尋找不一樣的佈局結構，是否想要把某些信息分紅兩列，三列或四列。

4，結構設計完以後，如今能夠開始關注不一樣類型的內容。給每一個內容塊起一個有意義的名稱，而後分析他們的關係。

5，查看每一個內容塊的結構，看看不一樣的類型中是否有共同的模式，不如公告和新聞其實和同樣的。

6，找出模式並肯定命名約定以後，最好立刻開始定義將使用的元素，這是有好處的。

 

混雜模式中IE5.x和IE6不支持margin:auto聲明，IE能夠設計text-align：center肯定居中，

 

用CSS進行佈局有集中不一樣的方式，包括絕對定位和使用負的外邊距。

 

爲了提升可訪問性，我選擇在源代碼中將祝內容區域放在次要內容區域的前面，這深深考慮到了屏幕閱讀器，由於屏幕閱讀器不用再通過不重要的內容，到達主內容部分。

 

在全部浮動元素中添加display:inline。這個預防措施用來防止IE中的外雙邊距產生的bug.

 

這兩個元素嵌套在contetn元素中，能夠建立關聯，我利用了這個事實，這有兩個好處。首先不須要爲要應用的每一個元素建立新的類名，而應使用層疊找到元素。

 

利用浮動包含浮動，從而簡化清除浮動這一步，簡直贊。

 

若是選用某個框架，你可能會在每一個項目中都使用它，所以思惟方式極可能會逐漸僵化。正如俗話所說的，若是你只有一把錘子，那麼是那麼東西看起來都是釘子。

 

這個工具箱能夠包含全局reset,排版樣式和表單處理，以及登陸表單，日曆表格和導航列表等經常使用HTML組建的標記模式。

 

最多見的CSS問題並不是來自源於瀏覽器BUG，而是來源於對CSS規範的理解不完整。

 

IE的開發節奏比其餘瀏覽器慢得多。

 

reset樣式表能夠避免和緩解HTML元素默認樣式不一致的問題，跨全部瀏覽器一個一致的舞臺。

 

我很是喜歡採用最小寬度和最大寬度的流式設計。

 

網格一般有預先肯定的寬度，包含指定數量的列和可選的隔離帶。網格是你最好的朋友，能夠幫助你克服困難。它是Photoshop和CSS之間的的「中間人」，能夠幫助你作出浮動，定位，外邊距，內邊距，邊框等相關的初步定位決定。