手寫樣式表:CSS文法全攻略(1)

來源:互聯網
上載者:User
css|攻略|樣式表|文法

放棄可視化編輯器寫CSS

如果有看上篇的例子的CSS時,你可能會問,我在DW中要怎樣做才能有像下面這樣的CSS呢?
.test1,.test2 {color:Purple !important;color:blue;}

手寫,在DW也有代碼區,而且是有智能提示的,等於半手動寫,本人一直用TopStyle,除了對中文的支援不是很好外,各方面都不錯。在學C#的那段時間,發現VS.NET寫CSS也很不錯,就是有點大。

為什麼不能用可視化編輯器寫CSS呢?理由很簡單,手寫CSS可以寫很多可視化編輯器寫不出的樣式,剛開始手寫可能會不大習慣,可是配合智能提示,寫熟了是不會比可視化編輯器點的慢。

想學好CSS就要學會接受各種瀏覽器的虐待(當然做某些特定只要針對只有IE使用者的網站例外),在接受瀏覽器的虐待的第一步是放棄可視化編輯器。如果不能放棄,後面的很多東西你就只能看看。

各種類型的選擇符
為什麼要出現不同的選擇符呢?個人認為是主是模組化跟重用性。
下面的Element表示元素。

通配選擇符
*
像很多語言一樣 * 代表所有,一般開始我會在一個CSS的開始時做下面這樣的定義:這樣定義是把所有的元素的margin跟padding定義為0。例子
* {margin:0; padding:0;}

* 也是可以像下面這樣用的:把div元素下的所有元素定義。
div * {color:#94439F; }

這樣定義時要小心應用,像下面這樣的定義是用乘的。例子
ul * {font-size:120%; }
所以大家在用通配選擇符出現百分比的定義時要小心。

類型選擇符
Element
這個是大家最最常用的吧,說Element可能大家不會知道,看下面的。例子
p {color:blue;}

當然有時 HTML 也搞搞特別的,自訂元素是其中的一種,例子
rotui\:aoao {color:#123456;}

包含選擇符 也有人叫派生選擇符
Element1 Element2
像剛才的顯著 div * 就是,當然還可以像下面這樣。例子
p strong {color:blue;}

子物件選擇符
Element > Element
這個跟包含選擇符有什麼不同呢?他只對他的子一級元素有效(IE6還不支援)。例子
p > span { color:red;}

相鄰選取器
Element + Element
只對相鄰的元素,也就是下一個元素的定義(IE6還不支援)。例子
p + p { border:1px red solid;}

ID選擇符
#IDName
Element#IDName
直接定義HTML的ID名。例子
#csser { border :1px #000 solid;}

類選擇符
.className
Element.className
這兩個有什麼不同呢,前一個是定義所有class="className"。例子
.rotui { border:1px #000 solid;}

屬性選擇符
Element[attr]
Element[attr=value]
Element[attr~=value]
Element[attr|=value]
Element[attr] 選擇具有attr屬性的E1 例子
input[value] {border:1px #000 solid;}

Element[attr=value]選擇具有attr屬性且屬性值等於value的元素 例子
input[type=password] {border:1px red solid;}

Element[attr~=value]選擇具有attr屬性且屬性值為一用空格分隔的字詞列表,其中一個等於value的Element。這裡的value不能包含空格 例子
input[value~="aoao"] {color:red;}

Element[attr|=value] 選擇具有attr屬性且屬性值為一用連字號(-)分隔的字詞列表,必須是以value開始的元素。 例子
input[value|="rotui"] {color:blue;}

PS:以上的IE瀏覽器看不到.

選擇符分組
Element1,Element2
將同樣的定義應用於多個選擇符,可以將選擇符以逗號分隔的方式並為組。不只只是元素,上面所說的八類選擇符跟下面的都可以應用 。例子
th,td {color::1px red solid;}

偽類選擇符
Element:link
Element:visited
Element:hover
Element:active
Element:focus
Element:first-child
Element:lang
當然還有定義列印的:first :left :right,這裡只介紹螢幕上的。例子:link,:visited,:hover,:active 這四類是常見到的,因為IE的 a 元素支援他。 例子:focus 對象在成為輸入焦點(該對象的onfocus事件發生)時出現(IE不支援)。例子

input:focus {color:blue;}
:first-child 包含選擇符裡面的第一個元素的定義。例子div p:first-child {background-color :#ccc;}
:lang() 對已指明語言的元素進行定義。例子p:lang(en) {color :Blue;}


偽對象
Element:first-letter
Element:first-line
Element:before
Element:after
:first-letter 首字定義,很好理解,就是第一個字。例子
.letter:first-letter {font-size :300%;}


:first-line 首行定義,第一行會有效果,分行符號(<br />)也可以分割第一行。例子 .letter:first-line {color:red;}

:before和:after 在元素之前(before)跟之後(after)配合 content屬性新增內容。例子
em:before {content:"我來自CSS";}
em:after {content:"我也是CSS裡出來的";}


選擇符的優先權
那樣多個選擇符,我怎知道哪個優先權高呢?上一篇只講到 important 提高優先權,現在再說說選擇符的優先權,old9兄的blog已經有了一篇講到,這裡引用一下,也好偷下懶首先就是CSS規則的specificity(特殊性),CSS2.1有一套關於specificity的計算方式,用一個四位的數字串(CSS2是三位)來表示,最終specificity越高的規則越特殊,在優先順序判定時也就越有優勢。關於specificity的具體計算在各種情況下的數字加成有如下一般規則:

每個ID選擇符(#someid),加 0,1,0,0。 每個class選擇符(.someclass)、每個屬性選擇符(形如[attr=”"]等)、每個偽類(形如:hover等)加0,0,1,0
每個元素或虛擬元素(:firstchild)等,加0,0,0,1 其他選擇符包括全域選擇符*,加0,0,0,0。相當於沒加,不過這也是一種specificity,後面會解釋。 舉一些例子吧:

h1 {color: red;}
/* 只有一個普通元素加成,結果是 0,0,0,1 */
body h1 {color: green;}
/* 兩個普通元素加成,結果是 0,0,0,2 */
——後者勝出
 
h2.grape {color: purple;}
/* 一個普通元素、一個class選擇符加成,結果是 0,0,1,1*/
h2 {color: silver;}
/*一個普通元素,結果是 0,0,0,1 */
——前者勝出
 
html > body table tr[id=”totals”] td ul > li {color: maroon;}
/* 7個普通元素、一個屬性選擇符、兩個其他選擇符,結果是0,0,1,7 */
li#answer {color: navy;}
/* 一個ID選擇符,一個普通選擇符,結果是0,1,0,1 */
——後者勝出
除了specificity還有一些其他規則

文內的樣式優先順序為1,0,0,0,所以始終高於外部定義。這裡文內樣式指形如<div style=”color: red”>blah</div>的樣式,而外部定義指經由<link>或<style>標籤定義的規則。
有!important聲明的規則高於一切。
如果!important聲明衝突,則比較優先權。
如果優先權一樣,則按照在源碼中出現的順序決定,後來者居上。
由繼承而得到的樣式沒有specificity的計算,它低於一切其他規則(比如全域選擇符*定義的規則)。
關於經由@import載入的外部樣式,由於@import必須出現在所有其他規則定義之前(如不是,則瀏覽器應該忽略之),所以按照後來居上原則,一般優先權衝突時是佔下風的。
這裡需要提一下IE,IE是可以識別位置錯誤的@import的,但無論@import在什麼地方,它都認為是位於所有其他規則定義之前的,這可能會引發一些誤會。
看來一篇寫不完了,屬性留在下篇再說吧(這年頭多混個頁的流量也不容易) !



相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。