當前位置:才華齋>設計>網頁設計>

用CSS約定寫法詳解

網頁設計 閱讀(1.51W)

以前在程式中,有美工設計好了靜態頁面,而我們程式設計師將其整理成動態頁面(例如jsp頁面),一般程式設計師是不會管像圖片、樣式這樣的東西,直接拿來就用了。這時可能出現下面幾個問題:

用CSS約定寫法詳解

1 修改過幾次後,會出現無用的樣式或者圖片;

2 不同頁面所用的樣式可能在一個css檔案中,查詢起來非常的麻煩。

3 沒有良好的結構,對以後的擴充套件(例如換膚)非常不利

4 樣式或者圖片名稱起的很隨意或者不符合實際要求,對理解有一定的影響。

下面是總結的一些css使用約定:

1儘量使用外部連結的方式引入css

2 css檔案開發版本中儘量加入樣式註釋

3 css命名規則

css檔名稱建議具有實際意義,例如,公用css可以命名為、郵件專用css可以命名為:

4 css樣式命名規則:

樣式命名建議根據實際用途進行命名,例如,用於標題的樣式可以e{};

儘可能的保證不同css中定義的樣式不會發生命名上的衝突,以免造成不必要的相互影響

5 css用到的圖片放置規則:

Css用到的圖片,主要是背景。可以按照如下規則去做:

在css檔案相同目錄下建立資料夾images.在images下新建與css同名的資料夾(不帶字尾名稱),css檔案的圖片均放在這裡面,

詳見示例:

6建議將佈局css與面板css分開編寫。

佈局Css即那些對網站骨骼結構產生影響的css,比如寬高、border、margin等等。

面板CSS指的.是諸如顏色、背景圖片這樣的,不會對頁面骨骼結構產生影響的css。這裡分開,主要是為了以後的換膚功能,如不實現換膚的話,可以寫在一起。

7佈局css如果只用到一次(在一個頁面中的一處地方使用),可以寫在頁面中,甚至直接寫在html元素中,如果用到2次以上(同一頁面或者不同頁面中),必須歸納出來形成獨立的css。