<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>id選擇器</title>
<style>
#identity1{
color: red;
}
#identity2{
color: green;
}
#identity3{
color: blue;
}
#identity4{
color: yellow;
}
</style>
</head>
<body>
<!--
1.什么是id選擇器?
作用: 根據指定的id名稱找到對應的標簽, 然后設置屬性
格式:
#id名稱{
屬性:值;
}
注意點:
1.每個HTML標簽都有一個屬性叫做id, 也就是說每個標簽都可以設置id
2.在同一個界面中id的名稱是不可以重復的
3.在編寫id選擇器時一定要在id名稱前面加上#
4.id的名稱是有一定的規范的
4.1id的名稱只能由字母/數字/下划線
a-z 0-9 _
4.2id名稱不能以數字開頭
4.3id名稱不能是HTML標簽的名稱
不能是a h1 img input ...
5.在企業開發中一般情況下如果僅僅是為了設置樣式, 我們不會使用id ,因為在前端開發中id是留給js使用的
-->
<p id="identity1">遲到毀一生</p>
<p id="identity2">早退窮三代</p>
<p id="identity3">按時上下班</p>
<p id="identity4">必成高富帥</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>類選擇器</title>
<style>
.pp{
color: red;
}
.ppp{
color: green;
}
.pppp{
color: blue;
}
.ppppp{
color: yellow;
}
.para1{
font-size: 100px;
}
.para2{
font-style: italic;
}
</style>
</head>
<body>
<!--
1.什么是類選擇器?
作用: 根據指定的類名稱找到對應的標簽, 然后設置屬性
格式:
.類名{
屬性:值;
}
注意點:
1.每個HTML標簽都有一個屬性叫做class, 也就是說每個標簽都可以設置類名
2.在同一個界面中class的名稱是可以重復的
3.在編寫class選擇器時一定要在class名稱前面加上.
4.類名的命名規范和id名稱的命名規范一樣
5.類名就是專門用來給CSS設置樣式的
6.在HTML中每個標簽可以同時綁定多個類名
格式:
<標簽名稱 class="類名1 類名2 ...">
錯誤的寫法:
<p class="para1" class="para2">
-->
<p class="pp">遲到毀一生</p>
<p class="ppp">早退窮三代</p>
<p class="pppp">按時上下班</p>
<p class="ppppp">必成高富帥</p>
<p class="para1 para2">我是段落</p>
<p class="para1 para2">我是段落</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>id選擇器和class選擇器</title>
<style>
/*這么寫不好。語句很多是重復冗余的。*/
/*
.para1{
color: red;
font-size: 30px;
}
.para2{
font-size: 30px;
text-decoration: underline;
}
.para3{
color: red;
text-decoration: underline;
}
*/
.colorR{
color: red;
}
.size30{
font-size: 30px;
}
.line{
text-decoration: underline;
}
</style>
</head>
<body>
<!--
1.id和class的區別?
1.1
id相當於人的身份證不可以重復
class相當於人的名稱可以重復
1.2
一個HTML標簽只能綁定一個id名稱
一個HTML標簽可以綁定多個class名稱
2.id選擇器和class選擇器區別?
id選擇器是以#開頭
class選擇器是以.開頭
3.在企業開發中到底用id選擇器還是用class選擇器?
id一般情況下是給js使用的, 所以除非特殊情況, 否則不要使用id去設置樣式
4.在企業開發中一個開發人員對類的使用可以看出這個開發人員的技術水平
一般情況下在企業開發中要注重冗余代碼的抽取, 可以將一些公共的代碼抽取到一個類選擇器中, 然后讓標簽和這個類選擇器綁定即可
-->
<!--
<p class="para1">第一段文字</p>
<p class="para2">第二段文字</p>
<p class="para3">第三段文字</p>
-->
<!-- 利用一個標簽可以綁定多個類名 -->
<p class="colorR size30">第一段文字</p>
<p class="size30 line">第二段文字</p>
<p class="colorR line">第三段文字</p>
</body>
</html>
