前端

CSS的编写位置

行内样式

直接添加在标签的属性内。

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>行内样式</title>
  </head>
  <body>
    <h1 style="color:red;font-size:60px;">测试文本1</h1>
  </body>
</html>

内部样式

在title下面添加style标签。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>内部样式</title>
    <style>
       h1{
         color:red;
         font-size:30px;
       }
       h2{
         color:green;
         font-size: 50px;
       }
       p{
         color: blue;
         font-size: 70px;
       }
       img{
         width: 200px;
       }
    </style>
  </head>
  <body>
    <h1>测试文本1</h1>
    <h2>测试文本2</h2>
    <p>测试文本3</p>
    <img src="aaa.webp" alt="aaa" />
  </body>
</html>

外部样式

这是最常用的方式。

新建一个.css文件。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
h1{
  color:red;
  font-size:30px;
}
h2{
  color:green;
  font-size: 50px;
}
p{
  color: blue;
  font-size: 70px;
}
img{
  width: 200px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>外部样式</title>
    <link rel="stylesheet" href="./pos3.css" title="" type="" />
  </head>
  <body>
    <h1>测试文本1</h1>
    <h2>测试文本2</h2>
    <p>测试文本3</p>
    <img src="aaa.webp" alt="aaa" />
  </body>
</html>

样式的优先级。

两句话。
天高皇帝远。
后来者居上。

CSS基本选择器

通配选择器

1
2
3
4
* {
  color: red;
  font-size: 70px;
}

元素选择器

选择某一类标签。

1
2
3
4
p {
  color: blue;
  font-size: 80;
}

类选择器

选择所有含某一class的标签。

1
2
3
4
5
6
.class_value1 {
  color: red;
}
.class_value2 {
  font-size: 60px;
}

id选择器

根据id值选择某一个元素。

1
2
3
4
#id_value {
  color: green;
  font-size: 80px;
}