目录
一、CSS（层叠样式表，Cascading Style Sheets）简介
一、CSS（层叠样式表，Cascading Style Sheets）简介
CSS是一种样式表语言，用来描述HTML或XML文档的呈现，CSS描述了如何在屏幕、纸张或其他媒体上显示HTML元素。
作用：①对页面的外观进行美化
????????? ②统一网站页面的风格
????????? ③实现内容和样式的分离，适合团队开发
HTML、CSS、JavaScript关系：
????????? HTML是网页的结构，CSS是网页的外观，JavaScript是页面的行为。
二、CSS引用方式
①内联样式表：将CSS代码和HTML代码放在同一个文件中，给标签添加style属性，用来设置样式。
例：
<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <meta http-equiv="X-UA-Compatible" content="IE=edge">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <title>内联样式表</title>
</head>
<body>
? ? <p style="color: blueviolet;">哈哈哈哈哈哈哈</p>
? ? <p style="color: blueviolet;font-size: 30px;">哈哈哈哈哈哈哈</p>
? ? <p style="color: red;font-size: 30px;font-family: 楷体;">哈哈哈哈哈哈哈</p>
</body>
</html>浏览器预览效果如下：
②内部样式表：将CSS代码和HTML代码放在同一个文件中，CSS代码放在<style></style>标签对之中。
例：
<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <meta http-equiv="X-UA-Compatible" content="IE=edge">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <title>内部样式表</title>
</head>
<style>
? ? #d1{
? ? ? ? color: blueviolet;
? ? }
? ? #d2{
? ? ? ? color: blueviolet;font-size: 30px;
? ? }
? ? #d3{
? ? ? ? color: red;font-size: 30px;font-family: 楷体;
? ? }
</style>
<body>
? ? <p id="d1">哈哈哈哈哈哈哈</p>
? ? <p id="d2">哈哈哈哈哈哈哈</p>
? ? <p id="d3">哈哈哈哈哈哈哈</p>
</body>
</html>浏览器预览效果如下：
③外部样式表：将CSS代码和HTML代码单独放在不同的文件中，通过link标签将HTML和外部的CSS文件链接起来。
例：
html文件：
<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <meta http-equiv="X-UA-Compatible" content="IE=edge">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <title>外部样式表</title>
? ? <link rel="stylesheet" href="waibu3.css">
</head>
<body>
? ? <p id="d1">哈哈哈哈哈哈哈</p>
? ? <p id="d2">哈哈哈哈哈哈哈</p>
? ? <p id="d3">哈哈哈哈哈哈哈</p>
</body>
</html>
?
css文件：
#d1{
? ? ? ? color: blueviolet;
}
#d2{
? ? ? ? color: blueviolet;font-size: 30px;
}
#d3{
? ? ? ? color: red;font-size: 30px;font-family: 楷体;
}浏览器预览效果如下：
三、CSS的样式规则
CSS样式规则语法样式是CSS的基本单位，每个样式规则都是由选择器和声明块两个基本部分组成的。
选择器用于指明样式作用的对象。
声明块定义相应的样式，它包含在一对花括号内，有一条或多条声明组成，而每一条声明则由一个属性和一个值组成，中间用冒号隔开。
（1）字体规则：
表1 字体规则表
| 属性 | 说明 |
| font-style | 字体样式 |
| font-size | 字体大小 |
| font-family | 字体 |
| font-weight | 字体粗细 |
（2）列表规则：
表2 列表规则表
| 属性 | 说明 |
| list-style-position | 项目符号和文本的位置 |
| list-style-image | 项目符号图像 |
| list-style-type | 项目符号类型 |
| list-style | 列表样式 |
（3）表格规则：
表3 表格规则表
| 属性 | 说明 |
| border-color | 边框颜色 |
| border-width | 边框宽度 |
| border-style | 边框线的样式 |
| border-radius | 边框的弧度 |
| border-spacing | 指定单元格之间的距离,不能是负值 |
| border-collapse | 指定单元格的边框是否合并 |
四、CSS的选择器
CSS选择器是在CSS中定位页面中的标签。
（1）CSS选择器的格式：
选择器
?
{
??? 样式属性1:取值1;
??? 样式属性2:取值2;
??? ……
}（2）CSS基本选择器
①标签名选择器：
标签名{
???? 样式规则(属性): 值;
}②类选择器：在页面中给标签添加class属性,标签的class属性值可以重复
.类名(标签的class属性值){
??? 样式规则(属性): 值;
???????? }③id选择器：在页面中给标签添加id属性,标签的id属性值不能重复
#id名{
样式规则(属性): 值;
}④通配选择符：*，代表所有元素
?*{
? ?样式规则(属性): 值;
?? }（3）CSS属性选择器
①标签名[属性名]：选择含有给定属性的标签
②标签名[属性名=值]：选择含有给定属性值的标签
③标签名[属性名^=值]：选择给定属性值是以某个字符开头的
④标签名[属性名$=值]：选择给定属性值是以某个字符结尾的
（4）CSS关系选择器
相邻兄弟关系选择器就是选中该元素的下一个兄弟元素，相邻选择器的操作对象是该元素的同级元素，用+、~进行连接。
（5）CSS复合选择器
复合选择器就是同时对几个选择器进行相同的操作，不同选择器之间用逗号分隔。
（6）CSS子元素选择器
子元素选择器就是选中某个元素下的子元素，然后对该子元素设置CSS样式，用>进行连接；
（7）CSS伪类选择器
包含6个分类，分别是
动态伪类选择器
目标伪类选择器
语言伪类选择器
元素状态伪类选择器
结构伪类选择器
否定伪类选择器