DIV CSS 佈局教程網

這篇文章主要介紹了CSS中的類型選擇器和ID選擇器以及類選擇器,選擇器時CSS入門學習中的基礎知識,需要的朋友可以參考下

類型選擇器
類型選擇器，是以Html元素類型作為選擇條件。
網頁元素：在CSS教程中，對於如“<p></p>”、“<h3></h3>”這些不再稱呼為標簽，而統一稱呼為網頁元素。
在網頁元素中，都可以按類型進行區分，其類型可以作為CSS的選擇符，如“<a></a>”、“<ul></ul>”、“<div></div>”等，對應的選擇器分別為“a”、“ul”、“div”。
例子：

CSS Code復制內容到剪貼板

1. a{
2. text-decoration: none;
3. }

該例子表示網頁上所有的超鏈接取消下劃線。

ID選擇器
CSS ID選擇器允許選擇網頁元素的ID進行樣式表應用。
ID選擇器以“#”標識，後面緊跟Html元素id名稱。
Html代碼如下：

XML/Html Code復制內容到剪貼板

1. <div id="nav"><!--nav start-->
2. <h2><a href="index.Html">首頁</a></h2>
3. <h2><a href="blog.Html">博客</a></h2>
4. <h2><a href="guestbook.Html">留言板</a></h2>
5. </div><!--nav end-->

在該Html代碼如中，有一個id="nav"的DIV網頁元素。使用ID選擇器對該元素進行樣式表應用：

CSS Code復制內容到剪貼板

1. #nav {
2. font-size: 14px;
3. width: 500px;
4. }

該CSS樣式表示id為nav的網頁元素，其寬度為500px，其內文字大小為14px。

類(class)選擇器
CSS 類選擇器允許選擇網頁元素的類進行樣式表應用。
類選擇器以 . 符號標識，後面緊跟類名稱。
一個類選擇器例子：

CSS Code復制內容到剪貼板

1. .catlist {
2. color: #d51300;
3. }

該 CSS 樣式表示網頁中 class="catlist" 的網頁元素，其文字顏色為 #d51300 。
在 Html 中應用類選擇器
要在 Html 代碼中應用一個類(class)樣式，只需在標簽內使用 class 屬性，取值為類名。
Html 代碼例子：

XML/Html Code復制內容到剪貼板

1. <h3>文章分類</h3>
2. <ul class="catlist">
3. <li>情感世界</li>
4. <li>技術文章</li>
5. <li>網絡文摘</li>
6. <li>其他</li>
7. </ul>

在該 Html 代碼如中，<ul></ul>內包含的文字顏色都被渲染為 #d51300 顏色。當然，也可以再為其中的一個或一些 <li></li> 元素單獨定義另外的樣式。
提示
如上例所示，只要網頁元素類名為 catlist ，都將受到該樣式表的影響，而不管它具體是何種類型的網頁元素。
類選擇器會作用於所有類名相同的網頁元素，有復用效果，這個是和 ID 選擇器的區別。
類名的第一個字符不能使用數字，它無法在 Mozilla 或 Firefox 浏覽器中起作用。