【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;
/*顏色 背景圖 是否平鋪 固定於可視區 上對齊/鋪滿整個盒子*/5. 關於列表：
list-style-type:square/none;
list-style-position:inside;
list-style-image:url(filename.gif);
/*縮寫成：*/
list-style:none inside url(filename.gif);二、運用4種方法來引入CSS樣式
<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>[email protected] 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]的上面,注意:把[]換成<>*/