CSS简介
层叠样式表 (英文全称：Cascading Style Sheets) 是一种用来表现 HTML（标准通用标记语言的一个应用）或 XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS 不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
选择器 {
声明1;
声明2;
}
详细样例：
h1 {
font-size:12px;
color:#F00;
}
CSS 的最后一条声明后的 “;” 可写可不写，但是，基于 W3C 标准规范考虑，建议最后一条声明的结束“;” 都要写上。
基本用法——给元素添加样式
行内样式
通过直接在元素上写个 style 属性
<h1>改变标题颜色</h1>
这个语句的效果就是调整标题的颜色
运行效果：
内部样式
通过选择器，选择当前的文档中的元素，统一添加样式
<style type="text/css">
选择器{
样式的属性名：属性值;
}
h1{
color:red;
}
</style>
<h1>内容</h1>
完整样例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
h1{
color: red;
}
</style>
<title></title>
</head>
<body>
<h1>内容</h1>
</body>
</html>
效果截图：
这样我们就通过内部样式的方式来修饰了 h1。
外部样式
单独将 style 标签中的内容统一定义在一个 css 文件中，css 文件中，不需要写 style 标记，直接写样式即可。
定义样式 css 文件
CSS 代码保存在扩展名为. css 的样式表中. HTML 文件引用扩展名为. css 的样式表
h1{
color:red;
}
在 html 中引入 css 文档
<head>
……
<link href="css文件的位置" rel="stylesheet" type="text/css" />
……
</head>
<h1>需要样式的标记</h1>
样例：
↓这个是 css 文件
↓这个是 html 代码
05.html 文件通过
<link href="css/h1red.css" rel="stylesheet" type="text/css" />这句代码调用同级文件夹 css 中的 h1red.css 的 css 文件，来对 h1 标题进行颜色修改
完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="css/h1red.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>需要样式的标记</h1>
</body>
</html>
效果截图：
标签选择
<h1>一级标题</h1>
h1{
color: cornflowerblue;
}
完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
h1{
color: blue;
}
</style>
</head>
<body>
<h1>一级标题</h1>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h2>二级标题</h2>
<h2>二级标题</h2>
</body>
</html>
效果截图：
从上面的效果截图我们可以所有的一级标题都变成了蓝色，因为我们对所有的 h1 标签都进行了设置颜色，这就是标签选择。
类选择
<h1>一级标题</h1>
<h2>二级标题</h2>
.colorblue{
color: cornflowerblue;
}
完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.colorblue{
color: cornflowerblue;
}
</style>
</head>
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h2>二级标题</h2>
<h2>二级标题</h2>
<h3>三级标题</h3>
</body>
</html>
效果截图：
从上图我们可以发现所有的 class=“colorblue” 的标题都是蓝色，不论是几级标题，而其他的非 colorblue 类都没有变颜色，这就是对类进行选择。
id 选择
<h2>二级标题</h2>
#idh2{
color: red;
}
完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#aa{
color: red;
}
</style>
</head>
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h2>二级标题</h2>
</body>
</html>
运行效果截图：
通过上面的截图，我们不难发现只有只有 id=“aa” 的标题变了颜色，与是几级标题无关，只看是不是 id=“aa” ，这就是 id 选择
写作不易，如果看完对你有帮助，感谢点赞支持！
加油！
共同努力！
Keafmd
