【WEB前端】CSS書寫規范

　　古語有雲：不以規矩，不成方圓。不管是國還是家還是...都得有規矩加以約束。同樣，在我們程序猿的代碼中也有一定的規矩——W3C標准，但是我今天不會講那么高深的道理，我只想說說，我近些日子在開發中所總結出來的CSS一些書寫規范：

一、善用css縮寫規則

1. 邊距（4邊）：

1px 2px 3px 4px (上、右、下、左)

1px 2px 3px（省略  左等於右）

1px 2px (省略  上等於下)

1px（四邊都相同）

2. 縮寫（border）特定樣式：

border:1px solid #ffffff;/*粗細   樣式   顏色*/
border-width:0 1px 2px 3px;/*上、右、下、左*/

3. 關於文字的縮寫規則：

font-style:italic; /*斜體形式*/
font-variant:small-caps/normal; /*變體樣式：小型大寫字母/正常*/
font-weight:bold;/*粗體*/
font-size:12px;/*字體大小*/
line-height:1.2em(120%)/1.5em(150%);/*行高*/
font-family:arrial,sans-serif,verdana;/*字體樣式*/
/*縮寫成：*/
font:italic small-caps bold 12px/1.5emarrial,sans-serif;

/*注意：Font-size和Line-height用斜杠組合在一起不能分開寫。*/

4. 關於背景圖片的：

background:#FFF url(log.gif) no-repeat fixed top/cover;
/*顏色   背景圖    是否平鋪   固定於可視區   上對齊/鋪滿整個盒子*/

6. 關於列表：

list-style-type:square/none;
list-style-position:inside;
list-style-image:url(filename.gif);
/*縮寫成：*/
list-style:none inside url(filename.gif);

二、運用4種方法來引入CSS樣式

1.link

<link rel=”stylesheet” type=”text/css”href=”a.css”>
/*rel 關系  type 數據類型    href 路徑*/

/*部分瀏覽器支持候選樣式,關鍵字:alternate:*/
<link rel=”stylesheet” type=”text/css”href=”a.css”>
<link rel=”alternate stylesheet”type=”text/css” href=”b.css”>
<link rel=”alternate stylesheet”type=”text/css” href=”c.css”>

2.內部樣式塊

<style rel="stylesheet" type="text/css">
    h1{
        color:red;
    }
</style>

3.@import url{a.css

注意:此指令必須放在<style>容器中,並且在所有樣式之前

建議放在一個html注釋中,<!– –>瀏覽器會不顯示注釋內的內容,而import等css代碼能正常工作

4.內聯樣式

<p style=”color:red;”>

使用情景:
行內樣式=>本地調試
內部樣式=>單頁面樣式
外聯樣式=>企業大型項目 便於后期維護

三、選擇器

選擇器是css的一個基本概念，基本規則如下：

1.規則結構：h1 {color:red;}選擇器 {屬性:值;}

這是元素選擇器，基本可以包括所有html的元素

屬性值可以包括多個元素，如：border：1px solid red;

2.常用語法

　2-1.分組：選擇器和聲明都可以分組:

　h1,h2,h3{color:red;background:#fff;} ,選擇器用“,”分割開,屬性用”;”分割

　2-2類選擇器,即通過class=”stylename”應用的聲明

　定義:.stylename{color:red;}

注意:在html中可以使用多類選擇:如class=”cn1 cn2 cn3″

3.ID選擇器,即與id屬性對應的樣式

   定義:#a{color:red;} ->這個定義對用id=”a”的元素

4.這部分都是我們常見的css語法，下面談一下我們不常見的選擇器語法

1)父子結構,跟文檔結構圖對應(后代/子代選擇器)

如p span{border:1px solidred;}對應的是<p>下面的<li>標簽,這個很用用途,可以准確定位.

一些特殊應用(IE7支持):

(1) p > span{},匹配所有p下所有的span

(2) p + span{} ,匹配緊接着p元素后出現的第一個span標簽,2者要有相同的父標簽

2)屬性選擇器:(注意:屬性選擇器ie7才開始支持,以下版本並不支持,其他的瀏覽器基本可以)

語法:img[alt]{border:1pxsolid;}

表示對應有alt屬性的img標簽,當然可以支持多個屬性對應,如img[alt][title]{};表示這個2個屬性都有的img標簽,

也可以與具體值對應:如:img[alt=”攝影”]{};

屬性選擇器中的高級應用,特殊匹配:

(1)img[class~=”b”], ~= : 與屬性中的一個值對應的,即與<img class=”a b c”>對應

(2)[class^=”a”],以a開頭的

(3)[class$=”a”],以a結束的

(4)[class*=”a”],包含a的

(5)[class|=”a”],等於a或以a(a-)開頭的

(6)[class="a"] 選擇所有class屬性等於'a'的某元素

3)偽類和偽元素

日常使用中主要是<a>標簽的幾個偽類:link:hover:active:visited

以及:first-child:first:before:left:right:lang:focus:fist-line等等

注意:動態偽類可以應用到任何元素,如,input:focus{background:red;}當input標簽獲得焦點時背景變紅

以上語法組合使用,就能實現定位准確、簡單間接的樣式了

注：盡量使用子選擇器減少id和class的定義

四、選擇器優先級:
初級:ID選擇器>class選擇器>元素選擇器>通配符選擇器(*)
　　注:優先級相同時，會按代碼執行順序進行樣式覆蓋
　　后代選擇器擴展優先級:
　　1.當ID選擇器個數不相等，ID選擇器個數多的優先級較高
　　2.當ID選擇器個數相等時，就比Class選擇器個數，個數多的優先級較高
　　3.當Class選擇器個數相等時，就比元素選擇器，個數多的優先級較高
　　選擇器基本原則:
　　精准控制元素=>越精准的優先級越高=>精准度一樣時，遵循上面的規則
　　注:!important會提升優先級，但是不建議使用

樣式優先級:

　　行內樣式>內部樣式=外聯樣式(也就是說，內部和外聯樣式的優先級遵循選擇器優先級)

五、CSS的命名規范

 1. id的命名

(1)頁面結構

容器: container                                     頁頭：header

內容：content/container                      頁面主體：main

頁尾：footer                                        導航：nav

側欄：sidebar                                      欄目：column

頁面外圍控制整體布局寬度：wrapper

左右中：left right center

2.導航

導航：nav                                              主導航：mainnav

子導航：subnav                                     頂導航：topnav

邊導航：sidebar                                     左導航：leftsidebar

右導航：rightsidebar                              菜單：menu

子菜單：submenu                                  標題: title

摘要: summary

3.功能

標志：logo                                             廣告：banner

登陸：login                                            登錄條：loginbar

注冊：regsiter                                       搜索：search

功能區：shop                                        標題：title

加入：joinus                                          狀態：status

按鈕：btn                                              滾動：scroll

標簽頁：tab                                          文章列表：list

提示信息：msg                                     當前的: current

小技巧：tips                                          圖標: icon

注釋：note                                            指南：guild

服務：service                                        熱點：hot

新聞：news                                          下載：download

投票：vote                                           合作伙伴：partner

友情鏈接：link                                    版權：copyright

2. class的命名

(1)顏色:使用顏色的名稱或者16進制代碼,如

.red { color: red; }

.f60 { color: #f60; }

.ff8600 { color: #ff8600; }

(2)字體大小,直接使用"font+字體大小"作為名稱,如

.font12px { font-size: 12px; }

.font9pt {font-size: 9pt; }

(3)對齊樣式,使用對齊目標的英文名稱,如

.left { float:left; }

.bottom { float:bottom; }

(4)標題欄樣式,使用"類別+功能"的方式命名,如

.barnews { }

.barproduct { }

注意事項::

一律小寫;盡量用英文;不加中杠和下划線;2個組合的單詞不用中杠和下划線可以將第二個單詞的首字母大寫（eg:mainContent）;盡量不縮寫，除非一看就明白的單詞.

3. 主要的站點css文件

主要的 master.css                                        模塊 module.css

基本共用 base.css（root.css）                    布局，版面 layout.css

主題 themes.css                                          專欄 columns.css

文字 font.css                                               表單 forms.css

補丁 mend.css                                            打印 print.css

六、如果文字過長,則將過長的部分變成省略號顯示

<style=”width:120px;height:50px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap”>

七、並不是所有樣式都要簡寫

當樣式表前定義了如p{padding:1px2px 3px 4px}時，在后續工程中又增加了一個樣式上補白5px，下補白6px。我們並不一定要寫成p.style1{padding:5px 6px 3px 4px}。可以寫成p.style1{paddingtop:5px;padding-right:6px;},你可能會感覺這樣寫還不如原來那樣好，但你想沒想過，你的那種寫法重復定義

了樣式，另外你可以不必去找原來的下補白與左補白的值是多少！如果以后前一個樣式P變了話，你定義的p.style1的樣式也要變。(此種方法對后期修改樣式很重要)

八、幾個常用到的CSS細節處理上的樣式

1）中文字兩端對齊：text-align:justify;text-justify:inter-ideograph;

2）固定寬度漢字截斷：overflow:hidden;text-overflow:ellipsis;white-space:nowrap;(不讓其換行，不過只能

處理文字在一行上的截斷，不能處理多行。)（IE5以上）FF不能，它只隱藏。

萬能強制換行：white-space:normal;word-break:break-all

禁止換行：white-space:nowrap

強制換行：word-wrap:break-word; word-break: normal;

.AutoNewline{
    /*word-break: break-all; 方法一必須*/
    /*word-wrap:break-word;overflow:hidden; 方法二*/
    /*word-wrap:break-word; word-break: normal;方法三 */
    word-wrap:break-word; word-break:break-all;
}
.NoNewline{
    /*word-break: keep-all; 方法一必須*/
    white-space:nowrap;
}

3）固定寬度漢字（詞）折行：table-layout:fixed; word-break:break-all;（IE5以上）FF不能。

4）<acronym title=”輸入要提示的文字”style=”cursor:help;”>文字</acronym>

　　用鼠標放在前面的文字上看效果。這個效果在國外的很多網站都可以看到，而國內的少又少。

5）圖片設為半透明：

.halfalpha {
    background-color:#000000;filter:Alpha(Opacity=50)；
}
/*在IE6及IE5測試通過，FF未通過，這是因為這個樣式是IE私有的東西；*/

6）FLASH透明：

選中swf,打開原代碼窗口，在</object>前輸入<paramname=”wmode” value=”transparent”>

以上是針對IE的代碼。針對FIREFOX 給<embed> 標簽也增加類似參數wmode=”transparent”

7）在做網頁時常用到把鼠標放在圖片上會出現圖片變亮的效果，可以用圖片替換的技巧，也可以用如下的濾鏡：

.pictures img {
    filter: alpha(opacity=45); 
}
.pictures a:hover img {
    filter: alpha(opacity=90);
}

8）層在瀏覽器中居中對齊問題

body {
    text-align: center;
}
#content {
    text-align: left;
    width: 700px;
    margin: 0 auto;
}

9)單行內容在層中垂直對齊問題

#content{
    height:19px;
    line-height:19px;
}/*缺點是要內容不要換行。*/

10）層在瀏覽器中垂直居中對齊問題

　　缺點是：水平、垂直方向上不能出現滾動條，只能是在一屏的情況下

　　其實解決的思路是這樣的：

div {
    position:absolute;
    top:50%;
    left:50%;
    margin:-150px 0 0 -200px;
    width:400px;
    height:300px;
    border:1px solid red;
}

 

除了上述思路，還有其他方法：

/*1.固定盒子寬高，將margin的值通過計算寫死*/
/*2.定位一：*/
div{
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    right:0;
    margin:auto;
}/*(不支持IE7以下)*/
/*3.vertical-align*/
div{
    margin:auto;
    text-align:center;
    line-height:XXpx;
}
div > p{
    vertical-align:middle;
}
/*4.flex彈性盒模型:*/
div{
    display:flex;
    justify-content:center;
    align-items:center;
}
/*5.box彈性盒模型:*/
div{
    display:-webkit-box;
    -webkit-box-pack:center;
    -weibkit-box-algin:center;
}
/*6.table布局居中*/
/*7.font-size居中*/
div{
    text-algin:center;
}
div > p{
    display:inline-block;
    vertical-algin:middle;/*(IE6,IE7)*/
}
/*8.定位2：*/
div{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
} /* 50%為自身尺寸的一半 */

 

11）CSS控制圖片自適應大小

div img {
    max-width:600px;
    width:600px;         
　　width:expression(document.body.clientWidth>600?"600px":"auto");
    overflow:hidden;
}

 

九、使用float屬性的元素要注意的問題

1. 利用border屬性確定出錯元素的布局特性

使用float屬性布局一不小心就會出錯。這時為元素添加border屬性確定元素邊界，錯誤原因即水落石出。

2. float元素的父元素不能指定clear屬性

MacIE下如果對float的元素的父元素使用clear屬性，周圍的float元素布局就會混亂。這是MacIE的著名的bug，倘若不知道就會走彎路。

3. float元素務必指定width屬性

很多瀏覽器在顯示未指定width的float元素時會有bug。所以不管float元素的內容如何，一定要為其指定width屬性。另外指定元素時盡量使用em而不是px做單位。

4. float元素不能指定margin和padding等屬性

IE在顯示指定了margin和padding的float元素時有bug。因此不要對float元素指定margin和padding屬性(可以在float元素內部嵌套一個div來設置margin和padding)。也可以使用hack方法為IE指定特別的值。

5. float元素的寬度之和要小於100%

如果float元素的寬度之和正好是100%，某些古老的瀏覽器將不能正常顯示。因此請保證寬度之和小於99%。

十、瀏覽器的兼容性問題（針對FF/IE6/IE7）

1.CSS hack:區分IE6，IE7，firefox，區別FF，IE7，IE6：

div{
    background:green !important;         
    background:orange;
    *background:blue;
}

/*IE6能識別*，但不能識別 !important,IE7能識別*，也能識別!important;
  FF不能識別*，但能識別!important;
  另外再補充一個，下划線”_“,IE6支持下划線，IE7和firefox均不支持下划線。於是大家還可以這樣來區分firefox，IE7，IE6*/

注：不管是什么方法，書寫的順序都是firefox的寫在前面，IE7的寫在中間，IE6的寫在最后面。

2.在firefox和IE中的BOX模型解釋不一致導致相差2px解決方法

div{
    margin:30px!important;
    margin:28px;
}
/*注意這兩個margin的順序一定不能寫反，!important這個屬性IE不能識別，但別的瀏覽器可以識別。所以在IE下其實解釋成這樣：*/
div{
    maring:30px;
    margin:28px;
}
/*重復定義的話按照最后一個來執行，所以不可以只寫margin:XXpx!important;*/

3.條件性注釋來選擇不同的瀏覽器（比CSS hack簡潔）

<!–[if IE 6]->
    <link rel=”stylesheet” type=”text/css”href=”ie6.css” mce_href=”ie6.css”>
<![endif]–>

 

 

4.區分IE8

.color{
    background-color: #CC00FF; /*所有瀏覽器都會顯示為紫色*/
    background-color: #FF0000\9; /*IE6、IE7、IE8會顯示紅色*/
    background-color: #0066FF; /*IE6、IE7會變為藍色*/
    _background-color: #009933; /*IE6會變為綠色*/
}
/*IE8兼容IE7
[metahttp-equiv="X-UA-Compatible" content="IE=EmulateIE7"/]
在[title]的上面,注意:把[]換成<>*/