層疊樣式表Cascading Style Sheets，簡寫CSS
關於css的歷史跟一般知識我這裏就簡單的說下,畢竟這些知識,說來也蠻長的,E文如果不錯的話,可以看以下的鏈接,對css的一些樣式進行了詳細的分類.
http://www.w3schools.com/c***ef/default.asp
記性不是很好的同學,可以把這個頁面複製到doc文檔裏面,以後用一些屬性記不起來的時候翻閱看看.
這裏推介一些工具
前端開發的話,是有必要安裝chrome或者是firefox瀏覽器的,按F12可以出調試控制檯.當然IE7以上的瀏覽器也都有這個.用起來的話,我感覺firefox的插件firebug是比較好的.工具的使用的話,具體看相關網站的幫助.debug工具大多都大同小異.之後會寫個這方面的專篇.初學者這塊瞭解多一些.
編輯器
有些人喜歡用記事本類工具加上代碼高亮就完全可以了.比如edit plus,notepad++,ueditor.
目前前端比較火的,sublime text2(已經有sublime text3)有很多的插件可以用.
集成的話,有eclipse的web版本,dreamwaver系列.等等,還有很多,選擇自己習慣用的編輯器可以提高自己的開發效率.
我自己比較傾向於notepad++,插件的話,該有的都有,自動提示比較差,不過也沒關係了.之後大概會寫一個專題介紹前端適用的編輯器跟插件.
題外話就說到這裏,下面開始正式的一些普通的課程裏面不會說到的一些東西.
一.css編寫
css的代碼組織方式: 標籤選擇器{屬性},如
body{font-size:12px;background:#white;color:#999;}
屬性之間有分號做間隔.有些屬性是可以簡寫,也可以把一個個分屬性拆開來寫,比如font跟background,margin,padding等.
二.css的解析方式
css的核心部分一半是那些修飾的屬性,只要記住相對應的屬性用途,編寫的難度不大,但是對於如何去寫好標籤選擇器,是很多新手前端所頭疼的問題,下面我來具體解釋一下.
選擇器的權重簡單算法及其相關的優先級(這裏的權重算法只是方便記憶,真實的算法下面我會解釋)
#id 權重 1000
.class 權重 100
標籤名 權重 1
列如有兩段css
#div .test div{
color:#white;
}
div{
color:#black;
}
同樣的對div去修飾,第一個的權重比是最優先的.第二個是最普遍性.簡單的說,第一個如果按照語義化的思維方式去理解,就是去先找id爲div的標籤,在找其內部class爲test的標籤,再在內部找到div的標籤.說的有些繞,簡單的說就是一層層找下去的.
如何去組織這樣的權重比是每個前端都要去思考的問題,下面我給出幾個普遍共識的原則
1.基於ID的選擇器的速度是相對最快的,權重也是最高的,所以能用id直接定位的選擇器優先
2.ID是dom結構中唯一存在的字符串.(雖然可以編寫出多個相同id的dom節點,不會強制檢查這個id並報錯.但在瀏覽器真正解析的時候,一般情況下只認一個節點,也就是說,你寫的樣式可能無效).選擇器中儘量不要出現兩個id或者多個id的情況.因爲id的唯一性,所以多個id是沒有必要的.多id的情況是有可能出現的,以下我會解釋.
3.class 一般翻譯做"類" (這裏的類的概念跟面向對象中類的概念,本質是完全不一樣的.大家不要混淆.)class選擇器是用的最多的,也是會多次出現在選擇器中的.有人問了如果我寫了10個class選擇器是不是就大於id的選擇器呢?其實是不然的,任何情況下的id選擇器的優先都要大於class,同理適合以下的選擇器,class大於標籤.原理的話,類似於加減乘除的優先算法.
4.根據以上的種種,編寫選擇的時候,儘量遵循 #id .class1 .class2 ... 標籤名1 標籤名2 ... 這樣的順序.
5.就近原則,在寫選擇器的時候,儘量選擇最近父節點上的id或者class.
6.儘量在寫選擇器的時候,不要太多的使用標籤,這涉及到了一個遍歷問題.
簡單的闡述一下,dom結構在結合css的時候是如何渲染的.
dom結構,如果從數據結構的角度上看,這是一顆樹狀結構,由於css一些屬性的問題,所以css的渲染模型必然要從最子節點去解析渲染.舉個例子
p#id>div.t1>div.t2>span.t3>span.t4(zenCoding的一個html編寫方式,以後會談到)
span.t4是最後的子節點,解析的時候是反而是要第一被解析的.
實際上的解析順序就是 span.t4 -> span.t3 -> div.t2 -> div.t1 -> p#id
跟編寫者的思維完全是一個反方向的.而且解析的唯一方式就是遍歷.(這裏也是html標籤爲什麼會有兩個,一個打開一個閉合的其中一個原因.確定子父節點)
所以我們在編寫選擇器的時候,需要儘量向子節點靠擾.如果在選擇器中有大量的標籤選擇器,可想而知,遍歷的效果是多慢.當然現在的電腦的性能都是非常出色的.任何能找到元素寫法都是可以的,但這就是區分是否是一個優秀的前端的一個標誌.
推介一編寫css選擇器的文章,裏面詳細的寫了一大堆選擇器並附有代碼,這裏我就不寫了.阮一峯的博客還是有很多的乾貨的.
http://www.ruanyifeng.com/blog/2009/03/css_selectors.html
這個是css的第一篇.