偷偷摘套内射激情视频,久久精品99国产国产精,中文字幕无线乱码人妻,中文在线中文a,性爽19p

CSS中實(shí)現(xiàn)id與class命名及編碼的六大技巧

開發(fā) 前端
CSS網(wǎng)頁布局有很多值得學(xué)習(xí)的地方,本文向大家介紹一下CSS網(wǎng)頁布局id與class命名及編碼的6個(gè)最佳習(xí)慣,希望對(duì)你的學(xué)習(xí)有所幫助。

CSS網(wǎng)頁布局目前是比較主流的網(wǎng)頁布局技術(shù),這里和大家重點(diǎn)討論一下CSS網(wǎng)頁布局id與class命名及編碼的6個(gè)***習(xí)慣,相信本文介紹一定會(huì)讓你有所收獲。

CSS網(wǎng)頁布局id與class命名及編碼的6個(gè)***習(xí)慣

一、用class_name方式寫類名

  以前喜歡用class-name寫,不過好像兩樣也沒什么差別。但我比較反對(duì)用className寫類名,因?yàn)槭冀K對(duì)瀏覽器大小寫敏感的問題抱有懷疑態(tài)度。但是id我會(huì)寫成駝峰式,理由見下一條。

二、樣式都用class而不用id

  有三個(gè)理由。

  1,id不可以重復(fù),所以用class的話,可以肆無忌憚的用無數(shù)次。
  2,id的優(yōu)先級(jí)太高,若是寫了一個(gè)#page_contenta{color:#f60},那你完蛋了,里面要改鏈接顏色,都必須加上#page_content才能越過這個(gè)優(yōu)先級(jí)。
  3,id專門留給JS用,這樣才符合表現(xiàn)與行為分離的原則。所以id我用駝峰式,也是為了體現(xiàn)這一點(diǎn)。

三、margin和padding,盡量省略***一個(gè)值

  比如margin:20px10px5px10px;,左右值是一樣的,就應(yīng)該省略掉***一個(gè)值,寫成margin:20px10px5px;這樣到時(shí)候要改左右間距,改一個(gè)就好,免得改漏了。其實(shí)這個(gè)問題雖然很細(xì)小,但是可以看得出對(duì)margin四個(gè)值省略規(guī)則的熟練程度。

四、按標(biāo)準(zhǔn)寫css,再針對(duì)特定瀏覽器作hack

  比如,通常我們會(huì)遇到如下的寫法:

ExampleSourceCode

  1. .side_col_52CSS{  
  2. float:left;  
  3. display:inline;  
  4. margin-left:20px;  
  5. }  
  6.  

  而我的寫法會(huì)是:

ExampleSourceCode 

  1. .side_col_52CSS{  
  2. float:left;  
  3. margin-left:20px;  
  4. }  
  5. *.side_col_52CSS{  
  6. _display:inline;/*hackedforIE6*/  
  7. }  
  8.  

  看明白了么?不應(yīng)該把hack混在一起,也不應(yīng)該用一種僥幸的心態(tài),覺得float:left與display:inline寫在一起沒事。嗯,它們倆確實(shí)沒事兒,但是其他的hack就不一定了。而且這里寫display:inline純粹就是為了解決IE6的bug,所以前面加上下劃線,以明確的表達(dá)你的目的。
  另外不要以為凡是hack都是為IE準(zhǔn)備的。其實(shí)有些hack是針對(duì)其他瀏覽器的,比如FF。這就要求你對(duì)css標(biāo)準(zhǔn)的熟練掌握,能夠自信的判斷哪些渲染是遵守標(biāo)準(zhǔn),哪些違反標(biāo)準(zhǔn)的。
  此外,我喜歡在hack前面加上星號(hào),其實(shí)這純粹是個(gè)人習(xí)慣了。可能過段時(shí)間我就不這么用了,呵呵。

五、記得加空格

  .class_name{property:value;}。我個(gè)人覺得合理的空格是優(yōu)秀代碼的一個(gè)指標(biāo)。按英文的習(xí)慣,標(biāo)點(diǎn)后面都應(yīng)該帶空格(如果你寫Thisisapen.That’sapencil.句點(diǎn)后面不加空格,word里面會(huì)有錯(cuò)誤提示)。所以既然css是外國(guó)人發(fā)明的,應(yīng)該按他們的格式來寫。類似的,在JS里vara=b+c;里面的空格也應(yīng)該都要加。

六、適當(dāng)?shù)膶盈B(Cascading)或縮進(jìn)以定義css的“作用域”

  啥叫“css的作用域”?其實(shí)并不是所有的樣式都在所有的地方使用。有的樣式只用在某一塊里面,比如“導(dǎo)航欄”里的“搜索框”,可能應(yīng)該寫成:

ExampleSourceCode

  1. .nav.search{}  
  2.  

  而有時(shí)候用層疊會(huì)增加代碼優(yōu)先級(jí),所以也可以用縮進(jìn)來“象征性的”體現(xiàn)作用域。像這樣:

ExampleSourceCode

  1. .login_box{}  
  2. .forgot_pwd{}  
  3.  

  縮進(jìn),是為了表示它們對(duì)應(yīng)的標(biāo)簽具有父子關(guān)系。但這樣只能起一個(gè)提醒的作用。

文章來源:Div-Css.net設(shè)計(jì)網(wǎng)參考:http://www.div-css.net/div_css/topic/index.asp?id=6851

【編輯推薦】

  1. DIV CSS隱藏內(nèi)容樣式方法詳解
  2. IE6.0對(duì)padding的解讀分析
  3. 揭露CSS中margins折疊現(xiàn)象內(nèi)幕
  4. 七大CSS選擇符用法說明
  5. 技術(shù)分享 如何使用CSS控制超鏈接文字樣式
責(zé)任編輯:佚名 來源: div-css.net
相關(guān)推薦

2010-09-01 13:44:23

idclassCSS

2010-09-08 11:23:27

2010-08-27 09:51:25

idclassCSS

2010-09-03 09:46:50

idclassCSS

2010-08-30 10:52:39

CSSclassid

2010-08-23 10:57:14

CSSclassid

2010-09-10 10:42:07

idclassDIV CSS

2010-09-08 16:49:05

CSSclassid

2010-09-14 15:24:49

CSSIDClass

2010-09-01 12:43:47

CSSidclass

2010-09-08 15:44:17

CSSidclass

2010-09-03 16:16:23

CSSidclass

2010-09-07 14:14:46

DIV+CSS

2010-08-23 14:16:17

DIVclassid

2011-07-20 13:23:48

SaaS云計(jì)算

2010-07-01 16:48:54

UML序列圖

2016-11-01 17:29:53

電商負(fù)載測(cè)試

2010-09-03 14:46:46

CSS縮寫CSS

2010-08-27 08:53:18

CSS類id命名DIV

2015-11-25 13:48:18

Linux虛擬機(jī)技巧
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)