divcss技巧介紹

大家知道divcss技巧嗎?下面我們就給大家詳細介紹一下吧!我們積累了一些經驗，在此拿出來與大家分享下，請大家互相指正。

1、善用css縮寫可以減少頁面文件大小，提高下載速度，同時使代碼簡潔可讀。

如：

以下是引用片段：

div{

border-top:1px solid #cccccc;

border-left:1px solid #cccccc;

border-right:1px soli #cccccc;

border-bottom:1px solid #cccccc;

}

可以寫為：p{border:1px solid #cccccc}

再如：

以下是引用片段：

div{

margin-top:10px;

margin-right:20px;

margin-bottom:30px;

margin-left:40px;

}

可以改寫為：

以下是引用片段：

/*注意上、右、下、左的書寫順序*/

div{margin:10px 20px 30px 40px}

/*注意，數值與單位不能有空格，每個值之間用空格隔開*/

2、可以同時為一個html元素的class屬性設定多個規則(多重class定義)。

通常我們寫法為：

實際上我們可以為p元素指定多個規則，如：

以下是引用片段：

CSS：

.a{…}

.b{….}

HTML：

該元素同時包括a和b中設定的樣式

注意：多個規則之間用空格分開。

3、明確定義單位，除非值為0

忘記定義尺寸是css初學者新手普遍存在的問題。在html我們可以寫width=”100”，但在css中應該給出一個准確的單位。如：width:100px;height:50px;font-size:9pt ，0值除外，因為不論對於任何單位。0值的大小都是相等的。

注意：不要在數值和單位之間加空格。

4、區分大小寫

在xhtml中，css定義的元素名稱是區分大小寫的，class和id的值在html和xhtml中也是區分大小寫的，所以為了避免錯誤，推薦一律使用小寫。如#aaa,與#AAA是不同的，在xhtml中，p和P也是不同的.他們之間不會覆蓋。如果在css中定義了#aaa，在html元素中使用AAA來應用將不能得到#aaa中定義的樣式。

示例代碼：

以下是引用片段：

CSS:

#aaa{border:1px solid #ccc}

HTML:

顯示不出來1個像素的邊線

相信大家已經學會divcss技巧了吧!感謝大家對我們網站的支持!

相關推薦：

divcss做一個網頁表單實例介紹