在網上論壇上經常看到一些朋友對
css的提問，他們總是不能很好的控制
css，影響
css的效率發揮。今天整理了一下資料，下面我給大家說說
css的
8種技巧：
一
.使用
css縮寫
使用縮寫可以幫助減少你
css檔案的大小，更加容易閱讀。
css縮寫的主要規則請參看《常用
css縮寫語法總結》，這裡就不展開描述。
二
.明確定義單位，除非值為
0
忘記定義尺寸的單位是
css新手普遍的錯誤。在
html
中你可以只寫
width="100"
，但是在
css中，你必須給乙個準確的單位，比如：
width:100px width:100em
。只有兩個例外情況可以不定義單位：行高和
0值。除此以外，其他值都必須緊跟單位，注意，不要在數值和單位之間加空格。
三
.區分大小寫
當在xhtml
中使用css
，css
裡定義的元素名稱是區分大小寫的。為了避免這種錯誤，我建議所有的定義名稱都採用小寫。
class和id
的值在html
和xhtml
中也是區分大小寫的，如果你一定要大小寫混合寫，請仔細確認你在
css的定義和
xhtml
裡的標籤是一致的。
四
.取消
class
和
id前的元素限定
當你寫給乙個元素定義
class
或者id
，你可以省略前面的元素限定，因為
id在乙個頁面裡是唯一的，而
clas s
可以在頁面中多次使用。你限定某個元素毫無意義。例如：
div#content fieldset.details
可以寫成
#content .details
這樣可以節省一些位元組。
五
.預設值
通常padding
的預設值為0，
background-color
的預設值是
transparent
。但是在不同的瀏覽器預設值可能不同。如果怕有衝突，可以在樣式表一開始就先定義所有元素的
margin
和padding
值都為0
，象這樣：
*六
.不需要重複定義可繼承的值
css中，子元素自動繼承父元素的屬性值，象顏色、字型等，已經在父元素中定義過的，在子元素中可以直接繼承，不需要重複定義。但是要注意，瀏覽器可能用一些預設值覆蓋你的定義。
七
.最近優先原則
如果對同乙個元素的定義有多種，以最接近
(最小一級
)的定義為最優先，例如有這麼一段**
update: lorem ipsum dolor set
在css
檔案中，你已經定義了元素
p，又定義了乙個
class"update"
p .update
這兩個定義中，
class="update"
將被使用，因為
class比p
更近。你可以查閱
w3c的《
calculating a selector
』s specificity》
八
.
除錯技巧：層有多大？
當除錯css
發生錯誤，你就要象排版工人，逐行分析
css**。我通常在出問題的層上定義乙個背景顏色，這樣就能很明顯看到層佔據多大空間。有些人建議用
border
，一般情況也是可以的，但問題是，有時候
border
會增加元素的尺寸，
border-top
和boeder-bottom
會破壞縱向
margin
的值，所以使用
background
更加安全些。
另外乙個經常出問題的屬性是
outline
。outline
看起來象
boeder
，但不會影響元素的尺寸或者位置。只有少數瀏覽器支援
outline
屬性，我所知道的只有
safari
、omniweb
、和opera。
看了css的8
中技巧是不是對
css更進一步了解了呢？本文主要是針對新手的一些問題，希望對大家有送幫助。
使用過的CSS小技巧筆記
1.實現兩個按鈕水平居中顯示 讓兩個按鈕分別作品有浮動，然後調節左右margin就可以 兩個button標籤，id為login和register login register 2.實現div或者img頭像畫成圓形並居中顯示 img標籤的id為welcomeimg welcomeimg 原文 的方法 ...
常用的css小技巧
li first child li last child li nth child 4 width 200px word break break all text overflow ellipsis display webkit box 物件作為伸縮盒子模型顯示 webkit box orient ...
css中的小技巧
1.css實現文字單行居中，多行居左 效果圖 style type text css fu.fu p style div class fu p 文字單行居中，多行居左 p p 文字單行居中，多行居左 子元素中，設定text align left 文字單行居中，多行居左 子元素中，設定text ali...