CSS样式
css样式的作用是改变标签的内容
如何选中标签的内容？ 方法是使用选择器来实现 ①标签选择器 ②类选择器 ③id选择器 ④通配符选择器标签选择器
语法：
标签{
属性：值;
属性：值；
.........
属性：值；
}
举个例子：
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <title>Document</title>
8 <style>
9 /* 写在style里面的属性为内部样式 */
10 /*
11 标签选择器
12 语法：标签{样式内容}
13 标签选择器会将该标签中的元素全部选中
14 */
15 p {
16 color: red;
17 }
18 </style>
19 </head>
20
21 <body>
22 <p>这是一个标签选择器</p>
23 </body>
24
25 </html>
效果展示：
类选择器
语法：
.类名{
属性：值；
属性：值；
................
属性：值；
}
如何在标签中使用：
<标签 class="类名"></标签>
注意类名的规范性：①不能以数字开头 ②不能以特殊字符开头，但可以以_开头
举个例子：
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <title>Document</title>
8 <style>
9 /* 写在style里面的属性为内部样式 */
10 /*
11 这是一个类选择器
12 */
13 .a {
14 color: red;
15 }
16 </style>
17 </head>
18
19 <body>
20 <p class="a">这是一个类选择器</p>
21 </body>
22
23 </html>
类选择器可以在多个标签中使用。
效果展示：
id选择器
语法：
#id名{
属性：值；
属性：值；
................
属性：值；
}
如何在标签中使用：
<标签 id="id名"></标签>
id选择器是唯一的，相当于门牌号一样唯一的，一个标签只能有一个id选择器
举个例子：
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <title>Document</title>
8 <style>
9 /* 写在style里面的属性为内部样式 */
10 /*
11 这是一个类选择器
12 */
13 #a {
14 color: red;
15 }
16 </style>
17 </head>
18 id
19 <body>
20 <p id="a">这是一个id选择器</p>
21 </body>
22
23 </html>
也要注意一下命名的规范：①不能以数字开头 ②不能以特殊字符开头，但可以以_开头
效果展示：
通配符选择器
语法：
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <title>Document</title>
8 <style>
9 /* z这是一个通配符选择器 */
10 *{
11 background-color: red;
12 }
13 </style>
14 </head>
15
16 <body>
17 <p>这是一个通配符选择器</p>
18 </body>
19
20 </html>
效果展示：
可以看到这里通配符选择器的选择作用范围是<body>标签以内的所有标签包括<body>标签
注意一点：
不同的选择器优先级的关系是不一样的。
举个例子：
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <title>Document</title>
8 <style>
9 /* 写在style里面的属性为内部样式 */
10 /*
11 标签选择器
12 语法：标签{样式内容}
13 标签选择器会将该标签中的元素全部选中
14 */
15 p {
16 color: aqua;
17 }
18
19 /*
20 类选择器
21 定义的语法 class="类名"
22 语法：.类名{样式内容}
23 类选择器会选中class中类名相同的标签，其中类选择器可以在多个标签中使用
24 */
25 .a {
26 color: antiquewhite;
27 }
28
29 .b {
30 font-size: 20px;
31 }
32
33 /*
34 id选择器
35 定义语法 id="id选择器名"
36 语法： #id选择器名{样式内容}
37 id选择器会选中id中id选择器名相同的标签，注意id选择器是唯一的
38 */
39 #f {
40 color: black;
41 }
42
43 /*
44 通配符选择器
45 语法：*{样式内容}
46 通配符选择器，选中body标签及body标签以内的所有标签
47 */
48 * {
49 color: red;
50 }
51 </style>
52 </head>
53
54 <body>
55 <!-- css样式的作用是改变标签的内容 -->
56 <!-- 如何选中标签的内容（通过选择器实现） ①标签选择器 ②类选择器 ③id选择器 -->
57 <p>abcd</p>
58 <p class="a b">abcd</p>
59 <!-- 类名的要求：1.不能以数字开头 2.不能以特殊字符开头 可以用_开头 -->
60 <p class="a">abcd</p>
61 <p id="f" class="a">abcd</p>
62 <p>abcd</p>
63 <h4>你好</h4>
64 <!--
65 这里通配符标签选中所有标签，而p标签选中所有的p标签
66 而id选择器也选中特有的p标签，类选择器也选中特有的标签
67 为什么展示出来的效果不一样的
68 因为这是选择器也是有优先级的
69 优先级是：id选择器>类选择器>标签选择器>通配符选择器
70 -->
71 </body>
72
73 </html>
效果展示：
我的<p>标签选择器将里面所有的<p>标签选中，但当类选择器也选中<p>标签的时候，并没有展示出<p>标签选择器中的颜色，所以类选择器的优先级是高于标签选择器
而标签选择器，类选择器和id选择器同时选中标签时，只有id选择器中的内容生效，所以id选择器优先级高于类选择器
而通配符选择器是选中<body>标签以及以内的所有标签，和标签选择器同时选中<p>标签，只有标签选择器的内容生效，所以标签选择器优先级比通配符选择器要高
所以选择器的优先级：id选择器>类选择器>标签选择器>通配符选择器
内部样式
内部样式，就是写在<head>标签里，通过被<style>标签包起来的样式。
语法：
1 <head> 2 <meta charset="UTF-8"> 3 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 4 <title>Document</title> 5 <style> 6 /* 7 里面是写不同种类的选择器 8 如：标签选择器，类选择器，id选择器，通配符选择器 9 */ 10 </style> 11 </head>
外部引用样式
外部引用样式，就是在其他文件中引用外部文件的css样式的。引用外部样式有两种方法。
①使用<link>标签实现
<link>标签是一个单标签，作用是引用外部的css样式
举个例子：
生成一个外部样式：
p {
color: red;
}
代码：
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>Document</title> 8 <link rel="stylesheet" href="./02.css"> 9 </head> 10 11 <body> 12 <p>这是外部css样式的方式一</p> 13 </body> 14 15 </html>
效果展示：
②使用@import url()
举个例子：
生成一个外部样式：
p {
color: blue;
}
代码：
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>Document</title> 8 <!-- 外部样式的引用方式 --> 9 <style> 10 /* 方法2：使用@import url(); */ 11 @import url(./01.css); 12 </style> 13 14 <!-- 因为同样都是外部样式优先级是相同的，所以谁离标签近谁，就按谁的改变样式 --> 15 </head> 16 17 <body> 18 <p>1234</p> 19 </body> 20 21 </html>
效果展示：
注意一点：可以生成多个外部样式，多个外部样式作用在同一个标签所使用的，但优先级是谁离标签近谁优先。
行内样式
在标签中写style属性设置css样式。
语法：
<标签名 style="属性:值；属性:值；........属性:值">
举个例子：
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>Document</title> 8 <link rel="stylesheet" href="./02.css"> 9 </head> 10 11 <body> 12 <p style="font-weight: bold;font-size: 18px;">这是外部css样式的方式一</p> 13 </body> 14 15 </html>
效果展示：
对于三种不同的样式（外部样式，内部样式，行内样式）它们之间优先级是不一样的。
优先级：行内样式>内部样式>外部样式
标签：样式,标签,通配符,id,color,选择器,CSS From： https://www.cnblogs.com/gzyhrc/p/17797557.html