目录
前言
上一期我们学习了如何编写一个基本的网页，但要如何把我们网页装饰的更加美观呢？我们就要用到CSS。CSS是一种格式化网页的方式，让我们能够用更有效，更易维护的方式设置网页格式。
1.网页中引用CSS的方法
1.1行内式
通过用style属性来设置各个元素从而达到设置样式的目的，格式为：
<标签 style="属性：属性值；属性：属性值；...">
<h2 style="color: brown; font-size: 30px; font-family: 正楷;">测试css引入方式：行内式</h2>此代码运用了行内式来给字体设置了文字的颜色，文字的大小和字体
1.2 内嵌式
与 行内式不同， 将css代码放置于页面的<head>与</head>之间，格式为：
<style type="text/css">
选择符1{属性：属性值；属性：属性值；...}
选择符2{属性：属性值；属性：属性值；...}
...
选择符n{属性：属性值；属性：属性值；...}
</style>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>内嵌式</title>
<style>
h3{
color: chocolate;
font-size: 30px;
font-family: 宋体;
}
</style>
</head>
<body>
<h3>测试css引入方式：内嵌式</h3>
</body>
</html>这里先在body写好想要改变样式的字体，然后在head部分通过style属性来对文本进行一个样式的改变。
1.3 外链式
通过<link>标签将定义了样式的一个或多个css文件链接到HTML文档
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>外链式</title>
<!-- css外链最好使用相对路径，以提高代码移植性 -->
<link rel="stylesheet" href="./style.css">
</head>
<body>
<h4>测试css引入方式：外链式</h4>
</body>
</html>rel:定义文档与被链接文档之间的关系，在这里指定为stylesheet表被链接文档是一个样式文档。
href：定义所链接外部样式表文件的URL，可以是相对路径也可以是绝对路径。
注：这里使用了一个外链接植入的方法来对文字进行了一个样式的改变，首先你可以在你想要的文件夹内单独放置一个style属性的样式设置文件，然后通过link的href来进行一个植入。
本代码中植入的是这个：
2 基本选择器
2.1 类选择器
格式为：
<style>
.类{
属性设置
}
</style>
<!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>
.book-name{color: rgb(199, 29, 29);}
</style>
</head>
<body>
<!-- 类选择器 优先级中间-->
<h1 class="book-name" id="网易">第五人格</h1>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>这里通过给标签内设置类名的方式来进行一个样式的改变，本代码中通过给h1的一个类名设置，然后在head标签内通过style属性 来对指定的类进行样式改变
注：类名不可重复
2.2 id 选择器
格式为：
<style>
#id名{
属性设置
}
</style>
id 选择器和 类选择器基本差不多
<!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>
#木瓜黄{color: rgba(255, 255, 0, 0.749);}
</style>
</head>
<body>
<!-- id选择器 优先级最高-->
<h1 id="木瓜黄">撒野</h1>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>2.3 标签选择器
<style>
标签选择符1{属性：属性值；属性：属性值；...}
标签选择符2{属性：属性值；属性：属性值；...}
...
标签选择符n{属性：属性值；属性：属性值；...}
</style>
<!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>
h2{color: rgb(241, 203, 50);}
</style>
</head>
<body>
<!-- 标签选择器 优先级最低-->
<h2 class="book1" id="墨香">天官赐福</h2>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>此代码中文本用了h2标签来设置文本，所以我们可以通过h2标签来对文本进行样式设置。
3 复合选择器
3.1 交集选择器
1.选择的元素要同时满足多个条件
2.选择器间紧紧相连
3.标签选择器放在前，类选择器在后
格式为：
p.class/id { color:red; }
"p"为标签，任何标签都可以。“class/id”二选一即可。
<!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>
/* 交集选择器 */
/* 选择id名为木瓜黄的h1标签 */
h1#木瓜黄{color: rgb(255, 0, 183);}
/* 选择类名为章节的ul标签 */
ul.章节{color: brown;}
</style>
</head>
<body>
<h1 class="book" id="木瓜黄">撒野</h1>
<ul class="章节">
<li>第一章</li>
<li>第二章</li>
<li>第三章</li>
</ul>
</body>
</html>3.2 并集选择器
选中多个基本选择符，集中设置样式。其结果是所有选中的基本选择符的样式改变一致。
如下图，这里选择了基本选择符 h1,h1,h3，那么最后的结果是 h1,h1,h3的文本样式均改变一致。
<style>
h1,h2,h3{color: aqua;}
</style>
<h1>第五人格</h1>
<h2>撒野</h2>
<h3>天官赐福</h3>当然任何形式的 基本选择符都可以作为并集的一部分，如下图，并集选择符使用了id 选择符作为并集选择符。
<!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>
/* 并集选择器 */
#网易,#木瓜黄,#墨香{color: blue;}
</style>
</head>
<body>
<h1 class="book-name" id="网易">第五人格</h1>
<ul>
<li></li>
<li></li>
<li></li>
<h1 class="book" id="木瓜黄">撒野</h1>
<ul class="章节">
<li>第一章</li>
<li>第二章</li>
<li>第三章</li>
</ul>
<h1 class="book1" id="墨香">天官赐福</h1>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>4.关系选择器
4.1 后代选择器
后代选择器，包含在父代里面的所有子代，中间要用空格隔开。这个只作用于后代，不会作用于父代
格式： 父代 子代 {}
代码演示：
.box li{
color: deeppink;
}
<ul class="box">
<li>儿子1</li>
<li>儿子2</li>
<li>儿子3</li>
<li>儿子4</li>
<li>儿子5</li>
</ul>ul里面包含了li，为父子关系,而class作为ul的类，所以也可以作为父代使用，在父代下面的li为子代，因此在ul之下的li样式均被改变。
4.2子代选择器
格式：父代>子代{}
只是子代生效， 但不往下递归
<style>
ul>#one{
color: deeppink;
}
</style>
<ul>
<li id="one">儿子1</li>
<li id="two">儿子2</li>
<li>儿子3</li>
<li>儿子4</li>
<li>儿子5</li>
</ul>这里只有儿子1的样式被改变，其他均不变。
4.3相邻兄弟选择器
格式：大哥+二哥{}
但仅有二哥生效 大哥不生效 后面的平级也不生效
<style>
.t3+h1{
color: #fa4d15;
}
</style>
<p class="t3">大哥</p>
<h1>二哥</h1>
<h1>三哥</h1>这个代码中只有二哥字体颜色变了，无论是大哥还是二哥后面的均没有改变。
4.4 通用兄弟选择器
在平级中所有兄弟都生效，但除了大哥
.t1 ~ p{
color: yellow;}
<h2 class="t1">大哥</h2>
<p>二哥</p>
<p>三哥</p>这里除了大哥以外，二哥和三哥均变黄色。
标签：color,标签,样式,选择符,速通版,选择器,CSS,属性 From： https://blog.csdn.net/2301_82005922/article/details/142746056