文章簡介:CSS制作流程及標准.CSS制作流程及標准
(一)制作流程:1,創建文件(文件管理及命名)2,與Html文檔建立關系注意點:1)
不建議使用:內聯樣式和內嵌樣式
原因:結構(Html)和表現(CSS樣式)沒有分離
2)
區別:外鏈樣式與導入樣式(http://zhidao.baidu.com/question/198616109.Html)
3)
網站常用:外鏈樣式
3,制作頁面樣式注意點:
- 同Html框架一致從上到下
- 從整體到局部
- 共用樣式到個別樣式
4,添加注釋注釋范圍:1)每個文檔對應一個文檔注釋(方便後期維護和管理)
主要注釋說明:文檔創建人,時間,內容等
2)
屬性注釋說明:CSS hack,特殊屬性等
3)
功能注釋說明:默認樣式,按鈕,彈出框等
5,完成檢查*********************************************************************
(二)制作標准:(有利於開發和後期管理)這個標准是我們公司的。各個公司有所不同,僅供大家參考~~
縮進及換行:說明:縮進:設置tab鍵制表符(同Html的一樣)——點擊tab生成2個空格
換行:
選擇器換行:相同樣式2個以上選擇器,每個選擇器一行
屬性換行:
1)只有一個屬性時,選擇器與屬性在同行
2)2個以上屬性,每個屬性占一行
簡寫1)顏色:16進制顏色值:#RRGGBB——R,G,B都成對相同時,縮寫成:#RGB
- color:#336699;
- 簡寫:color:#369;
2)單位:數值為0時,單位可以省略
- margin:0px;
- 簡寫:margin:0;
3)字體
4)背景
- background-color:red;
- background-image:url();
- background-repeat:no-repeat;
- baclgrpimd-position:top right;
- background-attachment:fixed;
- (每個屬性都可省略)簡寫:background:background-color background-image background-repeat background-position background-attachment;
5)內外邊距(margin與padding簡寫方式相同)
6)邊框
- border-width:1px;
- border-style:solid;
- border-color:red;
- 簡寫:border:border-width border-style border-color;
- border:1px solid red;
- 單邊簡寫:border-top:1px solid red;
- border-right:1px solid red;
- border-bottom:1px solid red;
- border-left:1px solid red;
- (不推薦)單屬性簡寫:(順序:上右下左)
- border-width:border-top-width border-right-width border-bottom-width border-left-width;
- border-style:border-top-style border-right-style border-bottom-style border-left-style;
- border-color:border-top-color border-right-color border-bottom-color border-left-color;
CSS代碼順序CSS文檔的順序
- 共用的代碼樣式放在文檔最前面
- CSS結構的順序依照Html的結構
css選擇器中的屬性順序:顯示屬性->自身屬性->文本屬性
- 顯示屬性:display, list-style, position, float, clear
- 自身屬性:width, height, margin, padding,border,background
- 文本屬性:color, font, text-decoration, text-align,vertical-align, white-space, content
原 因:這個順序是項目開發的代碼標准,符合浏覽器的渲染順序,最終達到提高執行效率目的