css樣式表的使用技巧【一】
這篇文章總結了我在使用CSS布局方法以來所有的技巧和兼容方案，我會重點解釋一些新手容易犯的錯誤，我希望吧這些小技巧，或者說是一些應該注意的地方和大家分享。如果你已經是CSS高手，這些經驗技巧可能已經都知道，如果你有更多的，希望可以幫我補充。

 

 一.使用css縮寫

 

使用縮寫可以幫助減少你CSS文件的大小，更加容易閱讀。

 

css縮寫的主要規則如下：

 

 顏色

 

 16進制的色彩值，如果每兩位的值相同，可以縮寫一半，例如：

 

#000000可以縮寫為#000;#336699可以縮寫為#369;

 

 盒尺寸

 

通常有下面四種書寫方法:

 

 property:value1; 表示所有邊都是一個值value1；

 

property:value1 value2; 表示top和bottom的值是value1,right和left的值是value2

 

property:value1 value2 value3; 表示top的值是value1，right和left的值是value2，bottom的值是value3

 

property:value1 value2 value3 value4; 四個值依次表示top,right,bottom,left

 

方便的記憶方法是順時針，上右下左。具體應用在margin和padding的例子如下：

 

margin:1em 0 2em 0.5em;

 

 

 

邊框(border)

 

邊框的屬性如下：

 

 

 

border-width:1px;

 

border-style:solid;

 

border-color:#000;

 

可以縮寫為一句：border:1px solid #000;

 

語法是border:width style color;

 

背景(Backgrounds)

 

背景的屬性如下：

 

background-color:#f00;

 

background-image:url(background.gif);

 

background-repeat:no-repeat;

 

background-attachment:fixed;

 

background-position:0 0;

 

可以縮寫為一句：background:#f00 url(background.gif) no-repeat fixed 0 0;

 

語法是background:color image repeat attachment position;

 

你可以省略其中一個或多個屬性值，如果省略，該屬性值將用瀏覽器默認值，默認值為：

 

color: transparent

 

image: none

 

repeat: repeat

 

attachment: scroll

 

position: 0% 0%

 

字體(fonts)

 

字體的屬性如下：

 

font-style:italic;

 

font-variant:small-caps;

 

font-weight:bold;

 

font-size:1em;

 

line-height:140%;

 

font-family:"Lucida Grande",sans-serif;

 

可以縮寫為一句：font:italic small-caps bold 1em/140% "Lucida Grande",sans-serif;

 

注意，如果你縮寫字體定義，至少要定義font-size和font-family兩個值。

 

列表(lists)

 

取消默認的圓點和序號可以這樣寫list-style:none;,

 

list的屬性如下:

 

list-style-type:square;

 

list-style-position:inside;

 

list-style-image:url(image.gif);

 

可以縮寫為一句：list-style:square inside url(image.gif);

 

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

 

在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 { /* declarations */ }

 

fieldset.details { /* declarations */ }

 

可以寫成

 

#content { /* declarations */ }

 

.details { /* declarations */ }

 

這樣可以節省一些字節。

 

 

 第一講到此結束，謝謝大家！

接上篇講 ：

 

八.多重class定義

 

一個標簽可以同時定義多個class。例如：我們先定義兩個樣式，第一個樣式背景為#666；第二個樣式有10 px的邊框。

 

.one{width:200px;background:#666;}

 

.two{border:10px solid #F00;}

 

在頁面代碼中，我們可以這樣調用

 

<div class="one two"></div>

 

這樣最終的顯示效果是這個div既有#666的背景，也有10px的邊框。

 

 

九.使用子選擇器(descendant selectors)

 

CSS初學者不知道使用子選擇器是影響他們效率的原因之一。子選擇器可以幫助你節約大量的class定義。我們來看下面這段代碼：

 

<div id="subnav">

 

<ul>

 

<li class="subnavitem"> <a href="#" class="subnavitem">Item 1</a></li>>

 

<li class="subnavitemselected"> <a href="#" class="subnavitemselected"> Item 1</a> </li>

 

<li class="subnavitem"> <a href="#" class="subnavitem"> Item 1</a> </li>

 

</ul>

 

</div>

 

這段代碼的CSS定義是：

 

div#subnav ul { /* Some styling */ }

 

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

 

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

 

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

 

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

 

 你可以用下面的方法替代上面的代碼

 

 <ul id="subnav">

 

 <li> <a href="#"> Item 1</a> </li>

 

 <li class="sel"> <a href="#"> Item 1</a> </li>

 

 <li> <a href="#"> Item 1</a> </li>

 

 </ul>

 

 樣式定義是：

 

 #subnav { /* Some styling */ }

 

 #subnav li { /* Some styling */ }

 

 #subnav a { /* Some styling */ }

 

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

 

 

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

 

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

 

 

 十.不需要給背景圖片路徑加引號

 

 為了節省字節，我建議不要給背景圖片路徑加引號，因為引號不是必須的。例如：

 

 background:url("images/***.gif") #333;

 

 可以寫為

 

 background:url(images/***.gif) #333;

 

 

 如果你加了引號，反而會引起一些瀏覽器的錯誤。

 

 

 

十一.組選擇器(Group selectors)

 

 

 

當一些元素類型、class或者id都有共同的一些屬性，你就可以使用組選擇器來避免多次的重復定義。這可以節省不少字節。

 

 

 

例如：定義所有標題的字體、顏色和margin，你可以這樣寫：

 

 

 

h1,h2,h3,h4,h5,h6 {

 

 

 

font-family:"Lucida Grande",Lucida,Arial,Helvetica,sans-serif;

 

 color:#333;

 

 

 margin:1em 0;

 

 

}

 

 

如果在使用時，有個別元素需要定義獨立樣式，你可以再加上新的定義，可以覆蓋老的定義，例如：

 

 

 h1 { font-size:2em; }

 

 h2 { font-size:1.6em; }

 

 

 

十二.用正確的順序指定鏈接的樣式

 

當你用CSS來定義鏈接的多個狀態樣式時，要注意它們書寫的順序，正確的順序是：:link :visited :hover :active。抽取第一個字母是"LVHA"，你可以記憶成"LoVe HAte"(喜歡討厭)。為什么這么定義，可以參考Eric Meyer的《Link Specificity》。

 

 

如果你的用戶需要用鍵盤來控制，需要知道當前鏈接的焦點，你還可以定義:focus屬性。:focus屬性的效果也取決與你書寫的位置，如果你希望聚焦元素顯示:hover效果，你就把:focus寫在:hover前面;如果你希望聚焦效果替代:hover效果，你就把:focus放在:hover后面。

第三講完畢，請達人多多指點！