css標籤選擇器，類選擇器
阿新 • • 發佈：2018-12-26
一，類選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>10-css類選擇器.html</title>
<!--
類選擇器,根據指定class找到對應的標籤,然後設定屬性
1,格式:
.類名{
屬性:值;
}
2,注意點:
(1),class命名,不能以數字開頭
(2),class命名格式包括字母、數字、下劃線
(3),不能是標籤的名稱
(4),在編寫id選擇器時,一定要在class前面加上.
(5),在同一介面中class命名可以重複
(6),class是專門給某個特定的標籤設定樣式的
(7),在html中每個標籤可以同時繫結多個class,但是id是唯一的
格式:<標籤名稱 class="類名1 類名2 ...> </標籤名稱>"
--> 二，id類選擇器和class選擇器的比較
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>11-cssid選擇器和class選擇器.html</title>
<!--
1,id和class的區別
(1)
id相當於身份證號是不可以重複的
class相當於人名可以重複
(2)
一個html標籤只能有一個id名稱
一個html標籤可以有多個class名稱
2,id選擇器和class選擇器的區別
(1)
id選擇器是以#開頭
class選擇器是以.開頭
3,在企業開發中到底是使用id選擇器還是class選擇器呢
id一般是給js使用的,所以除了特殊情況,一般是不是使用id來設定樣式的
4,在企業開發中一個開發人員對類的使用可以看出這個開發人員的技術水平
例如下面的程式碼
-->
<style>
/*
.para1{
color: red;
font-size: 30px;;
}
.para2{
font-size: 30px;
text-decoration: underline;
}
.para3{
color: red;
text-decoration: underline;
}*/
.coloR{
color: red;
}
.size30{
font-size: 30px;
}
.line{
text-decoration: underline;
}
</style>
</head>
<body>
<!--<p class="para1">第一段文字</p>-->
<!--<p class="para2">第二段文字</p>-->
<!--<p class="para3">第三段文字</p>-->
<p class="coloR size30">第一段文字</p>
<p class="size30 line">第二段文字</p>
<p class="coloR line">第三段文字</p>
</body>
</html>