DIV CSS 佈局教程網

div id class
編輯:布局基本知識     

 

div iddiv class

在div css布局中常常用id和class來引入CSS樣式(通俗理解通過id和class賦予外部css)。

一、div id

1、div使用id

<div id="abc"></div> 

如上代碼div標簽內直接使用id,id值等於“abc”一個命名。

對應在css中,以井號“#”命名的選擇器.

#abc{width:100px} 

設置id=abc的樣式寬度為100px

2、div id特點 需要注意
一個id命名在同一個網頁中只能使用一次,id具有唯一性,多次使用當然聰明浏覽器也是正常解析的,但是語法錯誤。一定一定要注意同一個命名id在同一個HTML網頁中只能使用一次。

二、div class

1、div使用class

<div class="efg"></div> 

如上代碼div標簽內使用class其值等於“efg”一個命名。

對應css中,以句號“.”命名的選擇器類。

.efg{height:100px} 

設置class=efg的樣式高度為100px

2、div class應用
這裡看出div id和class其用法語法均相同,都是放入標簽內使用,其後面值以等號後面命名為值。而class特點是,一個class(程序上把class也叫類)命名,在同一個html中同一個命名class可以無限次使用(也就是 在一個HTML中命名相同值的class可以根據需求多次重復使用)。

三、div class和div id小實例

1、css代碼

.exp{ width:200px; color:#F00; height:100px; border:1px solid #F00} 
#exp{ width:300px; height:80px; color:#00F; border:1px solid #00F}
.abc{ width:150px; color:#0F0; height:60px; border:1px solid #FF0}

2、html代碼

<div class="exp"> 
class=exp,css中以.exp命名
</div>
<div id="exp">
id=exp,css中以#exp命名
</div>
<div class="abc">class=abc多次使用</div>
<div class="abc">class=abc多次使用</div>

3、div id class實例截圖

id與class在div中使用實例截圖
id與class在div中使用實例截圖

4、實例說明
這裡故意將一個class=exp和id=exp(id和class值)命名相同,但觀察,id和class命名雖然相同,但各引入對應CSS(以“#”和“.”命名)樣式選擇器。所以雖然命名相同但是id和class是不同的。

5、在線演示

查看案例

6、小實例打包免費下載

立即下載(0.931KB)

關於id和class相關文章教程
1、《id class區別與用法》
2、《CSS布局時定義id與class有什麼區別嗎》
3、《div id與div class什麼意思》

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved