目录
- [1. CSS 的基本语法规范](#1. CSS 的基本语法规范)
- [2. CSS 的引入方式](#2. CSS 的引入方式)
- [3. CSS 选择器的种类](#3. CSS 选择器的种类)
-
- [3.1 标签选择器](#3.1 标签选择器)
- [3.2 类选择器](#3.2 类选择器)
- [3.3 id 选择器](#3.3 id 选择器)
- [3.4 复合选择器](#3.4 复合选择器)
- [3.5 通配符选择器](#3.5 通配符选择器)
- [4. 补充内容](#4. 补充内容)
1. CSS 的基本语法规范
选择器 + {1 条 / n 条声明}
- 选择器决定的是修改谁
- 声明决定的是怎么修改
- 声明的属性是键值对，使用 ; 区分键值对，使用 : 区分键和值
2. CSS 的引入方式
| 引入方式 | 描述 |
|---|---|
| 行内样式 | 在标签内使用 style 属性 |
| 内部样式 | 一般在 HTML 的 head 标签中定义 style 标签，在标签内部定义 css 样式 |
| 外部样式（常用） | 一般在 HTML 的 head 标签中定义 link 标签，通过 href 属性引入 css 外部文件 |
行内样式：
内部样式：
外部样式：
css.css 文件：
3. CSS 选择器的种类
3.1 标签选择器
在 head 标签中定义 style 标签，含义为将选中的标签全部更改为自己所定义的样式；
代码：
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css选择器</title>
<style>
/* 1. 标签选择器 */
/* 将全部 div 标签改为红色，p 标签改为蓝色，h1 标签改为绿色 */
div {
color: red;
}
p {
color: blue;
}
h1 {
color: green;
}
</style>
</head>
<body>
<h1>一级标题</h1>
<div>我是div1</div>
<div>我是div2</div>
<p>我是p标签1</p>
<p>我是p标签2</p>
</body>
</html>代码运行结果：
3.2 类选择器
这个类的意思和 Java 中的类概念不同，这里表示一类、分类；
在标签后加入 class 属性对标签进行分类更改样式；
类选择器前边要加点（.）；
代码：
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css选择器</title>
<style>
/* 2. 类选择器 */
/* 将 red 类改为红色，将 green 类改为绿色 */
.red {
color: red;
}
.green {
color: green;
}
</style>
</head>
<body>
<h1>一级标题</h1>
<div class="red">我是div1</div>
<divc class="green">我是div2</div>
<p class="red">我是p标签1</p>
<p class="green">我是p标签2</p>
</body>
</html>代码运行结果：按不同类进行了颜色的更改
3.3 id 选择器
在上述代码的基础上，如果想对p标签1再进行颜色更改，可以加如 id 属性；
代码：
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css选择器</title>
<style>
.red {
color: red;
}
.green {
color: green;
}
/* 3. id选择器 */
/* 将id="p1"的标签改为棕色 */
#p1 {
color: brown;
}
</style>
</head>
<body>
<h1>一级标题</h1>
<div class="red">我是div1</div>
<divc class="green">我是div2</div>
<p class="red" id="p1">我是p标签1</p>
<p class="green">我是p标签2</p>
</body>
</html>代码运行结果：
3.4 复合选择器
复合选择器就是由多个单选择器组成；
代码：
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 4. 复合选择器 */
/* 表示只更改li标签下的a标签 */
li a {
color: red;
}
/* 表示只更改id为middle标签下的li标签 */
#middle li {
color: red;
}
/* 表示只更改ul标签下li标签的a标签 */
ul li a {
color: green;
}
/* 表示只更改ol标签下li标签的a标签 */
ol li a {
color: pink;
}
/* 表示将id为a1,a2的标签一并修改 */
#a1, #a2 {
color: pink;
}
/* 等价于ul li a {} 写法*/
ul>li>a {
color: red;
}
</style>
</head>
<body>
<div class="font32">我是一个div, class为font32</div>
<div class="font32">我是一个div, class为font32</div>
<div><a href="#">我是一个div</a></div>
<ul>
<li>aaa</li>
<li>bbb</li>
<li><a href="#" id="a1">ccc</a></li>
</ul>
<ol id="middle">
<li>1111</li>
<li>2222</li>
<li>3333</li>
</ol>
<ol>
<li>1111</li>
<li>2222</li>
<li><a href="#" id="a2">3333</a></li>
</ol>
<button id="submit">提交</button>
</body>
</html>运行结果这里不做展示
3.5 通配符选择器
代码：
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 5. 通配符选择器 */
/* 将所有标签改为绿色，字体改为40像素 */
* {
color: green;
font-size: 40px;
}
</style>
</head>
<body>
<div class="font32">我是一个div, class为font32</div>
<div><a href="#">我是一个div</a></div>
<ul>
<li>aaa</li>
<li>bbb</li>
<li><a href="#" id="a1">ccc</a></li>
</ul>
<ol>
<li>1111</li>
<li>2222</li>
</ol>
<button id="submit">提交</button>
</body>
</html>运行结果：
4. 补充内容
- 当指定样式存在多处定义时，一般遵循就近原则，谁离得近就是谁的设计样式；
- 当一个标签中 class 和 id 同时定义了相同属性的不同参数时， id 的样式生效；
- 上文代码中
ul a {}，ul 下面的标签，a 不需要紧挨着 ul，a 是 ul 的子孙即可；ul>li>a {}ul 下面的标签，li 必须要紧挨着 ul，a 必须要紧挨着 li，必须是父子关系； - 颜色 color 表示有三种，英文单词、RGB、十六进制，一般使用后两种，表示的颜色范围更广；