一、問題:我們前面講了標簽選擇器有一個缺陷就是它不加選擇的把所有相同的標簽全都變成統一樣式,這對於我們個性化定製產生了阻礙,因此我們便引出了id選擇器,來進行特別指定進行配置樣式 二、id選擇器 1.定義:根據指定的id名稱找到對應的標簽,然後設置屬性 2.格式: #id名稱{ 屬性:值; } 3. ...
一、問題:我們前面講了標簽選擇器有一個缺陷就是它不加選擇的把所有相同的標簽全都變成統一樣式,這對於我們個性化定製產生了阻礙,因此我們便引出了id選擇器,來進行特別指定進行配置樣式
二、id選擇器
1.定義:根據指定的id名稱找到對應的標簽,然後設置屬性
2.格式:
#id名稱{
屬性:值;
}
3.例如:
<style> p{ color: rgb(255,45,45); } #label1{ color:black; } #label2{ color: #37fa1e; } #label3{ color: blue; } #label4{ color:green; } </style> </head> <body> <b id="label1"></b> <p id="label2">遲到毀一生</p> <p id="label3">早退窮三代</p> <p id="label4">按時上下班</p> <p id="label5">必成高富帥</p>
4.註意:
(1)每個HTML標簽中都有一個屬性叫做id ,也就是說每個標簽都可以設置id
(2)在同一個界面中id名稱是不可以重覆的
(3)在編寫id選擇器的時候一定要在id名稱前面加上#
(4)id名稱是有規範的:只能由字母、數字、下劃線組成的,且不能以數字開頭;id名稱不能以HTML標簽名來命名
(5)在企業開發中一般情況下如果僅僅是為了設置樣式,我們一般不會使用id,因為在前端開發中id是留給js使用的,可以使用類選擇器
三、類選擇器
1.定義:根據指定的類名稱找到對應的標簽,然後進行設置屬性
2.格式:
(1)寫在HTML中的與id的格式是一致的
(2)在style中:
.類名{
屬性:值;
}
3.例子:
<style> .pp2{ color: aqua; } .pp3{ color:blue; } </style> </head> <body> <p class="pp2">遲到毀一生</p> <p class="pp3">早退窮三代</p> <p class="pp2">按時上下班</p> <p class="pp2">必成高富帥</p> </body>
4.註意點:
(1)每個HTML標簽中都有一個屬性叫做class ,也就是說每個標簽都可以設置class
(2)在同一個界面中class名稱是可以重覆的
(3)在編寫class選擇器的時候一定要在class名稱前面加上.
(4)class名稱是有規範的:只能由字母、數字、下劃線組成的,且不能以數字開頭;class名稱不能以HTML標簽名來命名(和id的命名規範一樣)
(5)使用類選擇器就是為了設置樣式的
(6)在HTML中每個標簽可以同時綁定多個類名
格式:
<標簽名稱 class=“class名1 class名2 class名3”>
例如:
.ppp{ font-size: 50px; } .pppp{ color:red; } .ppppp{ font-family: 微軟雅黑; } .......(省略中間的) <p class="ppp pppp ppppp">實驗一下</p>
多個類名控制不同的屬性。
四、源碼:
d69_class_selector
d68_id_selector
地址:
https://github.com/ruigege66/HTML_learning/tree/master
2.CSDN:https://blog.csdn.net/weixin_44630050(心悅君兮君不知-睿)
3.博客園:https://www.cnblogs.com/ruigege0000/
4.歡迎關註微信公眾號:傅里葉變換,後臺回覆“禮包”獲取Java大數據學習視頻禮包