寫CSS文件的流程和CSS代碼順序

2024-07-11 09:01:36

字體：大中小

來源：轉載

供稿：網友

武林網(www.survivalescaperooms.com)文章簡介：css制作流程及標準.

css制作流程及標準

（一）制作流程：
1，創建文件（文件管理及命名）
2，與html文檔建立關系

注意點：
1）不建議使用：內聯樣式和內嵌樣式
原因：結構（html）和表現（css樣式）沒有分離
2）區別：外鏈樣式與導入樣式（）
3）網站常用：外鏈樣式

3，制作頁面樣式

注意點：
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）背景

5）內外邊距（margin與padding簡寫方式相同）

6）邊框

css代碼順序
css文檔的順序

共用的代碼樣式放在文檔最前面

css結構的順序依照html的結構

css選擇器中的屬性順序：顯示屬性->自身屬性->文本屬性

原因：這個順序是項目開發的代碼標準，符合瀏覽器的渲染順序，最終達到提高執行效率目的

上一篇：CSS技巧匯總:網頁制作常用的22個CSS技巧