首頁 > web前端 > css教學 > css網頁製作實用技巧9則

css網頁製作實用技巧9則

高洛峰
發布: 2016-11-24 14:51:31
原創
1295 人瀏覽過

 本篇總結了一些css常用技巧,為網站重構打下基礎,但願您能學到一點有用的東西。

  一.使用css縮寫

  使用縮寫可以幫助減少你CSS檔案的大小,更加容易閱讀。 css縮寫的主要規則請參考《css基本語法》。

  二.明確定義單位,除非值為0

  忘記定義尺寸的單位是CSS新手普遍的錯誤。在HTML中你可以只寫;100,但是在CSS中,你必須給一個準確的單位,例如:" width:100em。只有兩個例外情況可以不定義單位:行高和0值。除此之外,其他數值都必須緊跟單位,注意,不要在數值和單位之間加空格。這個錯誤,我建議所有的定義名稱都採用小寫。 XHTML裡的標籤是一致的。 ,鴆las s可以在頁面中多次使用。

  #content { /* declarations */ } 

  .details { /* declarations */ }

  這樣可以節省一些字節。

  五.默認值

  通常padding的默認值為0,background-color的預設值是transparent。 :0; 

  padding:0; 

  }


  六.不需要重複定義可繼承的值

  }

  六.不需要重複定義可繼承的值


  CSS中,子元素自動繼承父元素的屬性值

  CSS中,子元素自動繼承父元素的屬性值,像元素、字體等,已經在父元素中定義,已經過在父元素的屬性值,像元素等,已經過父元素等,已經過父元素的屬性值,的,在子元素中可以直接繼承,不需要重複定義。 ,以最接近(最小一級)的定義為最優先,例如有這麼一段程式碼

  Update: Lorem ipsum dolor set

  在CSS檔案中,你已經定義了元素p,又定義了一個classupdate { 

  margin:1em 0; 

  font-size:1em; 
  color:#333; 
  } 
  .update { 

  font-weight:bold; 

  color:#600; 

  }

  這兩個定義中,class ="update將被使用,因為class比p更近。你可以查閱W3C的《" Calculating a selector's specificity》 了解更多。

  八.多重class定義

  一個標籤可以同時定義多個class。例如:我們先定義兩個樣式,第一個樣式背景為# 666;第二個樣式有10 px的邊框。 div class="one" two></div>

  這樣最終的顯示效果是這個div既有#666的背景,也有10px的邊框。九.使用子選擇器(descendant selectors)

  CSS初學者不知道使用子選擇器是影響他們效率的原因之一。


  <div id="subnav>" 
  <ul> 
  <li class="subnavitem>" <a href="http://www.php1./o]o.Swhom">wwwLow&www.Pet; href="http://www.php1.cn/">  <li class="subnavitem>" <a href="http://www.php1.cn/">  </ul> 
  </div>
  這段程式碼的CSS定義是:

  div#subnav ul { /* Some styling */ } 
  div#subnav ul li.subnavitem { /* Some divssubling */~o. { /* Some styling */ } 

  div#subnav ul li.subnavitemselected { /* Some styling */ } 

  div#subnav ul li.subnavitemselected a.subnavitemselected { /* Some styling */ }

  你可以用下面的方法取代上面的程式碼

  <ul id="subnav>" 

  <li> <a href="http://www.php1.cn/">  <li class="sel>="http ://www.php1.cn/">  <li> <a href="http://www.php1.cn/">  </ul>


  樣式定義是:

  #subnav { /* Some styling */ } 
  #subnav li { /* Some styling */ } 
  #subnav a { /* Some styling * /  # subnav .sel a { /* Some styling */ }

  用子選擇器可以使你的程式碼和CSS更加簡潔、更加容易閱讀。

相關標籤:
css
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板