關於CSS中的class與id區別及用法的解析-css教學-PHP中文網

首頁

web前端

css教學

關於CSS中的class與id區別及用法的解析

不言

Jun 15, 2018 am 09:23 AM

css

這篇文章主要介紹了CSS中的class與id區別及用法的解析，有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下

用p CSS製作Xhtml網頁頁面時，常會用到class 和id來選擇呼叫CSS樣式屬性，那麼什麼時候該用class，什麼時候又用id，下面詳細了解CLASS與ID基本屬性及用法

我們平常在用p CSS製作Xhtml網頁頁面時，常會用到class 和id來選擇呼叫CSS樣式屬性。對學習CSS的新手來說class和id可能比較模糊，同時不知道什麼時候該用class，什麼時候又用id，以及它們用法與限制是怎麼樣的。接下來我們就來詳細了解CLASS與ID基本屬性及用法。

Class 在程式中稱為“類別”，同時在CSS中也書面語也叫“類別”。在CSS樣式中以小寫的「點」及「.」來命名如： .css5{屬性：屬性值;} ,而在html頁面裡則以class="css5" 來選擇呼叫,命名好的CSS又叫css選擇器。如： .css5{屬性：屬性值;} 選擇器在html呼叫為「

我是class範例

」如果不知道怎麼引用CSS，那就可以了解下css引用。

而且class(類)在同一個html網頁頁面可以無數次的呼叫相同的class類，在這裡範例裡則可以在對應的網頁裡可以無數次呼叫選擇「css5」。這也說明class一般是用來呼叫css中的預配製屬性的，比如說有一個預製屬性為如這裡的“.class01{屬性：屬性值;} ”，這樣就可以像呼叫函數一樣不用再一個網頁頁面裡重複的設定一個「類別」屬性，而只需要寫上一個class類別選擇，就可以在同一個頁面裡任何位置呼叫選擇具有相同的CLASS類別。

ID是表示著標籤的身份，在JS腳本中會用到id，當JS要修改一個標籤的屬性時，JS會將id名作為該標籤的唯一標識進行操作。也就是說ID只是頁面元素的標識，供其他元素腳本等引用。假如你的頁面裡出現了兩個ID那JS效果特性較出現邏輯錯誤不知道依據哪個ID來改變其標籤屬性。在CSS裡的ID不一定為JS而設定的，但是同樣ID在頁面裡也只能出現一次，而且是唯一性。雖然可能我們才學p CSS愛好者在一個頁面裡同時調用相同的ID多次但是仍然沒有出現頁面混亂錯誤，但是我們為了W3C及各個標準我們也要遵循ID在一個頁面裡唯一性。以免出現瀏覽器相容問題。

p css 頁面中的ID是怎麼個用法呢？
通常我們在CSS樣式定義的時候以「#」來開頭命名id名稱如：#css5{屬性:屬性值;} 這個也有點像class的定義，只是class是以小寫句號「.」開頭命名，而ID是以「#」好開頭定義。那id是怎麼個用法呢？ Css裡的ID用法與class用法一樣，只是把class換成id。如範例：在CSS樣式定義ID --- #css5{height:25px;width: 200px;} ,呼叫ID ---

我是ID範例

。

接下來我們來看下完整關於CLASS和ID實例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>p CSS中CLASS与ID实例 - -p+CSS-www.pcss5.com</title> 
<style> 
.css5{ width:100px; height:100px; border:1px solid #000; float:left; } 
.css5_class{ background:#FFF;} /* 背景白色 */ 
#css5_id{ background:#FF0000;} /* 背景红色 */ 
</style> 
</head> 
<body> 
<p class="css5 css5_class">我在浏览器下浏览，内容背景将是白色</p> 
<p class="css5" id="css5_id">我在浏览器下浏览，内容背景将是红色</p> 
</body> 
</html>

接下來我們分析一下以上實例：class="css5 css5_class" 怎麼是這樣的？這裡是相當於呼叫選擇了class類別css5與css5_class 。 class="css5" id="css5_id" 這裡同樣是選擇呼叫了class類別 :css5和id :css5_id 。

本頁透過CSS實例與CLASS類別和ID分別的講解，相信您能從此深刻認識和區分它們並且靈活。特別注意：在命名id和class類別的時候特別要注意大小寫，ID和class是對大小寫非常敏感的，最好以英文開頭，不要用中文命名CSS類名。

以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！

相關推薦：

如何實作CSS控制DIV層顯示與隱藏

使用css如何讓背景圖片拉伸填入避免重複顯示

以上是關於CSS中的class與id區別及用法的解析的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

這不應該發生：對不可能進行故障排除May 15, 2025 am 10:32 AM

解決這些不可能的問題之一，這是您從未想過的其他問題的問題。

@KeyFrames vs CSS過渡：有什麼區別？May 14, 2025 am 12:01 AM

@keyframesandCSSTransitionsdifferincomplexity:@keyframesallowsfordetailedanimationsequences,whileCSSTransitionshandlesimplestatechanges.UseCSSTransitionsforhovereffectslikebuttoncolorchanges,and@keyframesforintricateanimationslikerotatingspinners.

使用頁面CMS進行靜態站點內容管理May 13, 2025 am 09:24 AM

我知道，我知道：有大量的內容管理系統選項可用，而我進行了幾個測試，但實際上沒有一個是一個，y＆＃039;知道嗎？怪異的定價模型，艱難的自定義，有些甚至最終成為整個＆

鏈接HTML中CSS文件的最終指南May 13, 2025 am 12:02 AM

鏈接CSS文件到HTML可以通過在HTML的部分使用元素實現。 1)使用標籤鏈接本地CSS文件。 2)多個CSS文件可通過添加多個標籤實現。 3)外部CSS文件使用絕對URL鏈接，如。 4)確保正確使用文件路徑和CSS文件加載順序，優化性能可使用CSS預處理器合併文件。

CSS Flexbox與網格：全面評論May 12, 2025 am 12:01 AM

選擇Flexbox還是Grid取決於佈局需求：1)Flexbox適用於一維佈局，如導航欄；2)Grid適合二維佈局，如雜誌式佈局。兩者在項目中可結合使用，提升佈局效果。

如何包括CSS文件：方法和最佳實踐May 11, 2025 am 12:02 AM

包含CSS文件的最佳方法是使用標籤在HTML的部分引入外部CSS文件。 1.使用標籤引入外部CSS文件，如。 2.對於小型調整，可以使用內聯CSS，但應謹慎使用。 3.大型項目可使用CSS預處理器如Sass或Less，通過@import導入其他CSS文件。 4.為了性能，應合併CSS文件並使用CDN，同時使用工具如CSSNano進行壓縮。

Flexbox vs Grid：我應該學習兩者嗎？May 10, 2025 am 12:01 AM

是的，youshouldlearnbothflexboxandgrid.1）flexboxisidealforone-demensional，flexiblelayoutslikenavigationmenus.2）gridexcelstcelsintwo-dimensional，confffferDesignssignssuchasmagagazineLayouts.3）blosebothenHancesSunHanceSlineHancesLayOutflexibilitibilitibilitibilitibilityAnderibilitibilityAndresponScormentilial anderingStruction