【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]的上面,注意:把[]換成<>*/