第二种增加css样式的方法，可以在head中增加style标签，style中通过选择器定位标签增加css样式
CSS选择器分为六种：
1、id选择器
2、class选择器
3、标签选择器
4、层级选择器（空格）
5、组合选择器（逗号）
6、属性选择器（中括号）
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7
8
9 /*id选择器*/
10 #i1{
11 background-color: #0000CC;
12 width: 100px;
13 height: 50px;
14 }
15
16
17 </style>
18 </head>
19 <body>
20
21 <div id="i1">id选择器</div>
22
23 </body>
24 </html>
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7
8
9 /*class选择器*/
10 .c1{
11 background-color: red;
12 width: 100px;
13 height: 50px;
14 }
15
16 /*为什么有id和class两种选择器？*/
17 /*id在html页面中，只允许出现1个同名id；但是class是可以重复的；*/
18 /*实际前端开发中，主要用class进行定位的，因为多个标签可以同时引用一个css样式*/
19
20
21 </style>
22 </head>
23 <body>
24
25 <div class="c1">class选择器</div>
26
27 </body>
28 </html>
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7
8
9 /*标签选择器*/
10 /*表示 这个页面下所有的div标签，都增加这个样式*/
11 div{
12 background-color: pink;
13 width: 100px;
14 height: 100px;
15 }
16
17
18 </style>
19 </head>
20 <body>
21
22 <div></div> /*标签选择器*/
23
24 </body>
25 </html>
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7
8
9 /*层级选择器*/
10 /*表示div标签下的span标签使用这个样式*/
11 div span{
12 background-color: pink;
13 width: 100px;
14 height: 100px;
15 }
16
17
18 </style>
19 </head>
20 <body>
21
22 <div>
23 <span>层级选择器</span>
24 </div>
25
26 </body>
27 </html>
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7
8
9 /*id组合选择器 id i1 i2 i3 共用一套css样式*/
10 #i1, #i2, #i3 {
11 background-color: #0000CC;
12 width: 100px;
13 height: 100px;
14 }
15
16
17 /* 组合选择器 class s1 s2 s3 共用一套css样式*/
18 .s1,.s2,.s3{
19
20 background-color: darkmagenta;
21
22 height:48px;
23
24 }
25
26
27 /*最常用：class层级选择器*/
28 .c2 span{
29 background-color:blue;
30 width: 100px;
31 height: 100px;
32 }
33
34
35
36 </style>
37 </head>
38 <body>
39
40 <!--id组合选择器-->
41 <div id="i1"></div><br>
42 <div id="i2"></div><br>
43 <div id="i3"></div>
44
45
46 <!-- class组合选择器 -->
47 <div class="s1"></div>
48 <div class="s2"></div>
49 <div class="s3"></div>
50
51 <!--class选择器-->
52 <div class="c2">
53 <span>123</span>
54 </div><br>
55 <div class="c2">
56 <span>456</span>
57 </div><br>
58 <div class="c2">
59 <span>789</span>
60 </div>
61
62 </body>
63 </html>
原文地址：https://www.cnblogs.com/testfan/p/8955400.html
时间： 2024-10-19 10:14:52