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