web前端初學者必看css技巧規範（轉）

一、善用css縮寫能夠減小頁面文件大小，提升下載速度，同時使代碼簡潔可讀。 
如： 

1.

border-top:1px solid #cccccc;
border-left:1px solid #cccccc;
border-right:1px soli #cccccc;
border-bottom:1px solid #cccccc;
能夠寫爲:border:1px solid #cccccc;

2.

margin-top:10px;
margin-right:20px;

margin-bottom:30px;
margin-left:40px;
能夠改寫爲：
/*注意上、右、下、左的書寫順序*/
margin:10px 20px 30px 40px
/*注意，數值與單位不能有空格，每一個值之間用空格隔開*/


二、能夠同時爲一個html元素的class屬性設定多個規則(多重class定義)。
一般咱們寫法爲：<p class=」a」></p>
實際上咱們能夠爲p元素指定多個規則，如：

CSS：
.a{…}
.b{….}
HTML：
<p class="a b">該元素同時包括a和b中設定的樣式</p>
注意：多個規則之間用空格分開。

三、明肯定義單位，除非值爲0
忘記定義尺寸是css初學者新手廣泛存在的問題。在html咱們能夠寫width=」100」，但在css中應該給出一個準確的單位。如：width:100px;height:50px;font-size:9pt ，0值除外，由於不論對於任何單位。0值的大小都是相等的。

注意：不要在數值和單位之間加空格。

四、區分大小寫
在xhtml中，css定義的元素名稱是區分大小寫的，class和id的值在html和xhtml中也是區分大小寫的，因此爲了不錯誤，推薦一概使用小寫。
如#aaa,與#AAA是不一樣的，在xhtml中，p和P也是不一樣的.他們之間不會覆蓋。
若是在css中定義了#aaa，在html元素中使用AAA來應用將不能獲得#aaa中定義的樣式。
示例代碼：
CSS:
#aaa{border:1px solid #ccc}  
HTML:
<div id="AAA">顯示不出來1個像素的邊線</div>

五、CSS的最近優先原則
若是對一個元素定義了屢次樣式，則以最近的一級優先，最近一級的樣式將覆蓋其餘的樣式定義。
如：
CSS:
p{color:red}
.blue{color:blue}
.yellow{color:yellow}
HTML:
<p>此處顯示爲紅色</p>
<p class="blue">此處顯示爲藍色</p>
<p class="blue" style="color:green">此處顯示爲綠色</p>
<p class="blue yellow">此處顯示爲黃色</p>
 注意：
（1）注意樣式的幾個優先順序(優先級由上至下遞減)：
--元素style設定 
--head區<style></style>中的設定 
--外部引用css文件
（2）優先級不是按訪問順序來設定的，而是又css中的聲明順序來設定的。
如上例中<p class="yellow blue">此處顯示爲黃色</p>也顯示爲黃色，由於在css定義中.yellow在.blue的後面。

六、使用子選擇器減小id和class的定義
例如：
#contain{..}
#contain_ul{...}
.contail_li{...}
<div id="contain">
   <ul id="contain_ul">
      <li class="contain_li"></li>
      <li class="contain_li"></li>
   </ul>
</div>
能夠更改成：
 #contain{..}
 #contain ul{...}
 .contain ul li{...}
 <div id="contain">
   <ul>
      <li></li>
      <li></li>
   </ul>
 </div>

 七、不要給背景圖片路徑加引號
將background:url("xxx.gif")改成background:url(xxx.gif)
由於對於部分瀏覽器加引號反而會引發錯誤。

八、背景圖片的路徑是相對與當前css頁面的路徑。

例如：
有以下目錄結構
|--images
   |--xxx.png
|--css
   |--xx.css
|--index.html
代碼內容
index.html引用xx.css文件。<link rel="stylesheet" href="css/xx.css" />
xx.css要引用xxx.png圖片其寫法爲：background:url(../images/xxx.png)

九、使用組選擇器爲不一樣元素應用相同的樣式
如h1,h2,h3,div{font-size:16px;font-weight:bold}
則h1,h2,h3,div元素的樣式都爲字體16像素，字體粗體

十、書寫正確的連接樣式
當用css定義連接的各類狀態時，必定要注意其書寫順序，即：:link :visited :hover :active。
若是不按照該順序書寫可能沒法達到本身但願的效果。爲了記憶該順序咱們抽取每一個單詞的首字母：L V H A，你能夠經過記憶LoVe,Hate,兩個單詞來記住其順序。

十一、禁止內容換行與強制內容換行
在表格或層中咱們可能但願內容不換行或強制換行，咱們能夠經過一些css屬性來達到這些要求。
禁止換行：white-space:nowrap
強制換行：word-wrap: break-word; word-break: normal; 

 十二、區別div和span
div是一個塊級元素，能夠包含段落，表格等內容，用於放置不一樣的內容。通常咱們在網頁經過div來佈局定位網頁中的每一個區塊。
span是一個內聯元素，沒有實際意義，它的存在純粹是爲了應用樣式，給一段內容加上<span></span>標記能夠經過在span上定義樣式來設定其內容的樣式。

1三、區別display和visibility
display:none和visibility:hidden均可以隱藏一個元素
但visibility:hidden只是隱藏了元素的內容，但其使用的位置空間仍然被保留。
而display:none則至關把元素從頁面中去除，其佔用位置也將被刪除。