日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

本文向大家描述一下CSS編碼與組織技巧，主要包括組織你的樣式表，使用屬性縮寫(xiě)，利用繼承和默認(rèn)值，利用多個(gè)class和多元選擇符等內(nèi)容，希望本文介紹對(duì)你的學(xué)習(xí)有所幫助。

公司主營(yíng)業(yè)務(wù)：成都做網(wǎng)站、成都網(wǎng)站制作、移動(dòng)網(wǎng)站開(kāi)發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實(shí)現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競(jìng)爭(zhēng)能力。創(chuàng)新互聯(lián)建站是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊(duì)。公司秉承以“開(kāi)放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對(duì)我們的高要求，感謝他們從不同領(lǐng)域給我們帶來(lái)的挑戰(zhàn)，讓我們激情的團(tuán)隊(duì)有機(jī)會(huì)用頭腦與智慧不斷的給客戶帶來(lái)驚喜。創(chuàng)新互聯(lián)建站推出重慶免費(fèi)做網(wǎng)站回饋大家。

淺談CSS編碼與組織技巧

這恐怕是許多開(kāi)發(fā)者都關(guān)心的問(wèn)題。我想，大概沒(méi)有什么魔法，可以保證一下就把你的樣式表縮小到百分之多少，但合理的CSS編碼與組織技巧，的確能夠幫助你的更有效率地寫(xiě)出更清晰高效的代碼，自然，樣式表大小的縮減還能減少下載的時(shí)間。

組織你的樣式表

　　盡管我們有種種CSS的開(kāi)發(fā)工具，比如TopStyle，比如StyleMaster，它們可以讓你對(duì)當(dāng)前這個(gè)樣式表里面定義了哪些規(guī)則，涉及哪些class，哪些ID一目了然，但這不等于說(shuō)你的樣式表就組織清晰了，隨寫(xiě)，隨看，隨改大概是我們常用的開(kāi)發(fā)方式，一開(kāi)始樣式表還有點(diǎn)層次，后面這里加一點(diǎn)，那里加一點(diǎn)，就越來(lái)越亂了。所以不妨考慮規(guī)范一下你的寫(xiě)作方式。

　　大概有兩種組織方式，一種是我們常用的，把所有的描述同一個(gè)元素(和它的子元素)的規(guī)則都放到一起來(lái)，那么如果需要查閱頁(yè)面中某個(gè)元素究竟受哪些規(guī)則影響的時(shí)候，就不必在整個(gè)樣式表中翻來(lái)翻去了。

　　另一種也值得參考，即，把描述某些特性的規(guī)則放到一處，把描述另一些特性的放到另一處，比如說(shuō)關(guān)于顏色的定義，放到color.css文件中，描述字體的定義，放到font.css中，描述布局的定義，放到layout.css中，這也能讓你的樣式表結(jié)構(gòu)清晰，方便理解。最大的優(yōu)點(diǎn)是，如果你希望換一套配色方案，可以只修改一下color.css，完全不必?fù)?dān)心其他的規(guī)則是否會(huì)影響頁(yè)面的顏色。

　　在傳統(tǒng)的程序設(shè)計(jì)中，我們常常提到程序的風(fēng)格是如何重要，培養(yǎng)良好的編碼風(fēng)格甚至遠(yuǎn)比掌握程序的語(yǔ)法和語(yǔ)義重要，盡管Web設(shè)計(jì)者不一定要掌握那些程序設(shè)計(jì)的技巧，但培養(yǎng)良好的CSS編寫(xiě)風(fēng)格的確是很有用的。

使用屬性縮寫(xiě)

　　屬性縮寫(xiě)的介紹可以參考上的其它相關(guān)文章，這里我們來(lái)小結(jié)一下：

　　首先，有這么幾個(gè)常用的屬性縮寫(xiě)：

  　　font

　　　background

　　　list-style

　　　margin

　　　border

　　　padding

　　多數(shù)是可以把幾個(gè)常規(guī)屬性合并到一起使用的，也就是說(shuō)，可以給這些簡(jiǎn)記屬性賦予好幾個(gè)值，每個(gè)值之間用空格分隔。
　　第三，margin,border和padding都遵循中順時(shí)針原則，如果給定了四個(gè)值，從上方開(kāi)始每次順時(shí)針轉(zhuǎn)90度。

　　如果給定了三個(gè)值，則是上側(cè)一種，左右同一種，下側(cè)一種。
　　如果給定了兩個(gè)值，就是上下一種，左右一種。
　　如果只給了一個(gè)值，那就是都一樣。
　　簡(jiǎn)記屬性（屬性縮寫(xiě)）的使用，見(jiàn)仁見(jiàn)智，一方面，它的確是可以大大縮短代碼(如果用得頻繁的話)，另一方面，修改的時(shí)候又未免帶來(lái)不直觀和不方便。

利用繼承和默認(rèn)值

　　同樣參見(jiàn)書(shū)寫(xiě)高效的CSS中的相關(guān)章節(jié)，我想，這也得斟酌使用，首先，繼承和默認(rèn)值在W3C標(biāo)準(zhǔn)中都沒(méi)有嚴(yán)格(must)的規(guī)定(BTW,就算有又如何呢？)，瀏覽器未必真的會(huì)像你預(yù)期的那樣去實(shí)現(xiàn)，某些屬性的默認(rèn)值真的是0么？在所有瀏覽器里都是0么？需要反復(fù)嘗試后總結(jié)經(jīng)驗(yàn)；再者，如果代碼中含有過(guò)多的這樣的“隱喻”，就未免不大好讀了，某某元素會(huì)顯示出某某特性，乃是繼承自它的父元素……在編寫(xiě)樣式表的當(dāng)天你可能還清楚，過(guò)一段時(shí)間忘了，就會(huì)很奇怪為什么不曾定義這個(gè)規(guī)則卻又顯現(xiàn)出那個(gè)特性了。
　　所以建議，如果你要用到繼承和默認(rèn)值來(lái)簡(jiǎn)化代碼的話，最好寫(xiě)下一些注釋予以說(shuō)明。

利用多個(gè)class和多元選擇符

　　一個(gè)HTML元素可以屬于多個(gè)類，比如這樣：

ExampleSourceCode

 
 
 

  
  
  
(-$422.72) 
  
  
  
 
 
 
 

　　你可以給“合總”的那些表格欄設(shè)定一個(gè)樣式，再給包含負(fù)數(shù)的那些表格欄設(shè)定一個(gè)樣式，把它們疊加在上面：

ExampleSourceCode

 
 
 

  
  
  
.subtotal{font-weight:bold;}  
  
  
  
.negative{color:red;}  
  
  
  
 
 
 
 

　　這種特性有時(shí)能夠讓你很靈巧地實(shí)現(xiàn)一些功能，即縮短了HTML代碼，又清晰了CSS規(guī)則。關(guān)于多個(gè)class的詳細(xì)說(shuō)明(包括選擇符的兼容性測(cè)試..)請(qǐng)參考的相關(guān)文章介紹。

小結(jié)

　　選擇一種CSS規(guī)則的組織方式，并堅(jiān)持使用它！
　　謹(jǐn)慎地使用一些雖然能夠簡(jiǎn)短代碼，但會(huì)影響可讀性的書(shū)寫(xiě)方式！
　　適時(shí)地了解一些已經(jīng)普遍實(shí)現(xiàn)的CSS2新特性，能夠大大方便你的設(shè)計(jì)！

【編輯推薦】

1. 不為人知的CSS經(jīng)典技巧
2. 如何使用CSS框架這把雙刃劍？
3. CSS布局中八個(gè)你需要掌握的技巧
4. 解析四大CSS屬性值選擇器用法
5. 專家推薦 DIV CSS表單布局的五個(gè)小技巧

當(dāng)前標(biāo)題：暢談CSS編碼與組織技巧
網(wǎng)站路徑：http://m.5511xx.com/article/ccoeddp.html