本文關(guān)鍵詞：CSS禪意花園，由筆耕文化傳播整理發(fā)布。

CSS大道至簡--讀《CSS禪意花園》

CSS大道至簡

只承認(rèn)一個(gè)個(gè)確實(shí)存在的東西，凡干擾這一具體存在的空洞的普遍性概念都是無用的累贅和廢話，應(yīng)當(dāng)一律取消。如無必要，勿增實(shí)體。

周末找了兩個(gè)主題研究了一下：CSS 正則表達(dá)式

1.   HTML語言的本意是以結(jié)構(gòu)化的方式表示文檔 。一些基本的HTML的元素被濫用于頁面布局中。例如Table就是用來顯示二維數(shù)據(jù)，，而不是用于頁面布局，我們這樣用是因?yàn)樗恢北憩F(xiàn)的良好。而Font本來是文檔級別的標(biāo)簽的確是過度使用了。
 

來表現(xiàn)，這樣頁面就變成了兩層：HTML代表的文檔層，CSS代表的表現(xiàn)層，為了兩層之間的靈活可以添加JavaScript層。
 

文檔類型聲明讓瀏覽器和用戶（包括搜索引擎）知道你使用的HTML語言類型，是一個(gè)健壯文檔所必需的。之后的Title應(yīng)該概括當(dāng)前頁的內(nèi)容而不是千篇一律的標(biāo)識系統(tǒng)名稱。

4.  原則：根據(jù)文檔的內(nèi)容和結(jié)構(gòu)選擇HTML元素，而不是HTML的樣式。
換句話說，HTML標(biāo)簽使用得越少越好
例如用P包含段落而不是為了換行，blockquote包含引用的語句而不是為了縮進(jìn)

5.   為什么基于Web標(biāo)準(zhǔn)開發(fā)？更小的文件 更快的下載速度 更好的可訪問性
（W3c content-accessibility guidelines）

元素較少，使用了一些更有明確意義的，如果你沒有找到合適的標(biāo)簽來描述一個(gè)結(jié)構(gòu)可以使用span div代替。當(dāng)然也要避免濫用DIV，嵌套太多層不是一個(gè)好主意。

7.   應(yīng)用樣式可以使用class id前者是可以復(fù)用的，而后者在一個(gè)頁面上是獨(dú)一無二的

頁面上添加這樣一個(gè)空腳本可以解決IE中文檔樣式短暫缺失的情況。
 

標(biāo)簽的一個(gè)重要作用是圖像替換

10.  基于標(biāo)準(zhǔn)的設(shè)計(jì)很重要的一個(gè)目標(biāo)就是避免不必要的元素。

11.  內(nèi)容決定樣式，如果內(nèi)容本身就十分復(fù)雜，而且足夠吸引瀏覽者的注意那么就沒有必要添加過多的修飾。
 

12.  圖標(biāo)是簡化了的符號，用來標(biāo)識某一個(gè)事物和概念，或者用一個(gè)抽象化的圖形來代替一段很長的文字。

13.  線條的作用是增加頁面的韻律和層次，但是過多的線條會給瀏覽者網(wǎng)格結(jié)構(gòu)的暗示，無論你的原意是不是這樣。所以線條只用在最需要的地方。

14.  為頁面留白是一個(gè)很好的理念，文本需要呼吸的空間，瀏覽者需要思考的空間。間隔的空白并不是什么都沒有，信息顯示的方式更加優(yōu)雅，讓瀏覽者倍感輕松。

15.  光和影的作用是增強(qiáng)真實(shí)感 距離感 和層次感，說到底是怎樣使用光源的問題。錯(cuò)誤的使用光源會把問題搞糟，比如光影效果的不一致。

16.  形狀：圓形經(jīng)常和女性、溫暖舒適 愛情聯(lián)系在一起；圓弧經(jīng)常和社區(qū)、群體、忍耐、運(yùn)動、安全的含義。三角形通常讓人聯(lián)想到男性陽剛表達(dá)諸如強(qiáng)壯、攻擊、運(yùn)動感等含義。瀏覽者的目光經(jīng)常被棱角的方向?qū)�，指向上方代表攻擊性，指向下方則暗示出消極的意義。方形暗示了力量和根基可以讓它看起來足夠的監(jiān)視穩(wěn)重。

17.  色彩：藍(lán)色是全世界范圍內(nèi)都被廣泛接受的顏色。紅色和白色同時(shí)使用有加強(qiáng)的意義。綠色在美國讓人聯(lián)系到金錢，在其它的文化環(huán)境中不一定。橙色標(biāo)識降價(jià)，這也是一個(gè)世界范圍內(nèi)的共識。黃色代表了溫暖樂觀。紫色一直是頁面配色的禁忌。棕色是一種中立顏色。黑色代表沉重，白色代表純潔，可是同時(shí)這兩種顏色都有悲傷和死亡的暗示。
不同的顏色還會引起瀏覽者不同的心理聯(lián)想。CSS現(xiàn)在支持17中顏色。

18.  圖案：是重復(fù)填充到指定區(qū)域的一小塊視覺元素；CSS background-repeat屬性就可以靈活的解決這個(gè)問題。

19.  布局：HTML文檔流按照聲明順序顯示在頁面上，absolute可以將文檔中的位置從原來的位置上刪除，并重新定位到新的任意位置上；float并不是定位選項(xiàng)而是給元素分配空間，然后然文檔中的其它元素自動環(huán)繞其周圍；float的優(yōu)勢在于它保留在文檔之中而周圍的元素也清楚它的位置。
絕對定位是一個(gè)最直接最有效最簡單的布局方式，而如果那些需要考慮頁腳，或者其它元素需要了解周圍元素的布局，Float是不二之選。
 

：inline

21.  如果一個(gè)頁面需要分三欄而且有頭尾，分出的三欄又寬度高度不統(tǒng)一可以使用#Wraper
float的方式，然后Footer使用Clear：both來清除前面定義的浮動定義。

22.  巧妙的組合使用布局，唯一可能讓作品受限制的就是創(chuàng)造力。

23.  流式布局liquid頁面寬度使用百分比指定，所以瀏覽器大小變化的時(shí)候，頁面的寬度也變化。而固定布局的時(shí)候頁面寬度是不變化的。
 

：負(fù)外邊距同時(shí)使用絕對定位：position：absolute left;50% margin_left:-380px 這是目前最好的方案

25.  LOGO：為什么很多網(wǎng)站都放在左上角？因?yàn)闉g覽者的目光首先落在這里；
右上角的內(nèi)容重要性略輸于左上角，但是還是高于其它部分的內(nèi)容。

26.  內(nèi)容溢出:使用浮動就一定要同時(shí)清除浮動,使用浮動的時(shí)候最容易出現(xiàn)的情況就是內(nèi)容溢出.限制溢出的方法:1.清除浮動 2.同時(shí)使用overflow 這個(gè)方法比較好 3.斜有時(shí)候也會引起內(nèi)容溢出4.單位使用em代替px

27.  圖像:圖像的格式有很多種，但是適合Web的只有三種：GIF JPEG PNG；Jpeg不支持透明度 GIF支持1位的透明設(shè)置 PNG支持8位的透明度

周末看的電影:《男兒當(dāng)自強(qiáng)之莫欺少年窮》 主演：Beyond

周一的時(shí)候要記得給花換水！

Let life be beautiful like summer flowers and death like autumn leaves. 

發(fā)表于

  本文關(guān)鍵詞：CSS禪意花園，由筆耕文化傳播整理發(fā)布。