CSS(层叠样式表cascading style sheet
主要作用
(1)对页面的外观进行美化
(2)统一网站页面的风格
(3)实现内容和样式的分离,适合团队开发
使用方法
1、行内嵌入式
给标签添加style属性,用来设置样式， 只对当前嵌入的标签有效。如：<p style="color: cyan; font-size: 45px;">中国</p>
2、页面嵌入式
在页面中使用定义不同的样式规则，如下：
// An highlighted block
<style>
body{ /* 表示body中的所有内容都居中 */
text-align: center;
}
p{
color: red; /*color表示文字的颜色*/
font-size: 45px; /*font-size表示字号*/
}
</style>
<body>
<p>北京</p>
<p>西安</p>
</body>
3、导入css文件的方式
步骤：第一步：创建扩展名为.css的样式文件。
第二步：在页面中通过标签将外部的css文件链接起来。
CSS的选择器
1、标签名选择器：
标签名{
样式规则(属性): 值;
}
2、类选择器
在页面中给标签添加class属性,标签的class属性值可以重复。
.类名(标签的class属性值){
样式规则(属性): 值;
}
3、id选择器
在页面中给标签添加id属性,标签的id属性值不能重复
#id{
样式规则(属性): 值;
}
4、通配选择符
（*），代表所有元素
*{
样式规则(属性): 值;
}
常用CSS的样式规则
1、字体规则
| 字体 | 作用 |
|---|---|
| font-style | 字体样式 |
| font-size | 字号 |
| font-family | 字体 |
| font-weight | 文字的粗细 |
2、列表样式
| 列表 | 作用 |
|---|---|
| list-style-position | 设置项目符号和文本的位置 |
| outside | 默认值，列表项目符号放置在文本以外，且环绕文本不根据符号对齐 |
| inside | 列表项目符号放置在文本以内，且环绕文本根据符号对齐 |
| list-style-image | 指定项目符号的图像 |
| list-style-type | 指定项目符号的类型 |
| list-style | 指定列表样式 |
3、表格样式
| 表格 | 作用 |
|---|---|
| border-spacing | 指定单元格之间的距离,不能是负值 |
| border-collapse | 指定单元格的边框是否合并,取值有两个 |
| separate | 单元格边框独立,默认值 |
| collapse | 相邻单元格的边框合并 |
| border-color | 边框颜色 |
| border-width | 边框宽度 |
| border-style | 边框线的样式 |
| border-radius | 边框的弧度 |
CSS常用属性选择器
1、标签名[属性名]：选择含有给定属性的标签
2、标签名[属性名=值]：选择含有给定属性值的标签
3、标签名[属性名^=值]：选择给定属性值是以某个字符开头的
4、标签名[属性名$=值]：选择给定属性值是以某个字符结尾的
CSS的关系选择器
子元素选择器(用>进行连接)、相邻兄弟关系选择器(用+、~进行连接)
1、父标签 > 子标签
2、相邻兄弟关系选择器
(1)临近兄弟选择器：同一个父元素、第二个元素必须紧跟在第一个元素后
(2)普通兄弟关系
复合选择器
用逗号分隔，如下：
span,#gl,.hm{
color: green;
font-size: 45px;
}
子元素选择器
#parent p {
font-family: '隶书';
}
伪类选择器
1、:hover：当鼠标悬停在目标对象上时
2、a:visited：表示已经访问过的超链接
3、a:link：超链接未被访问的样式
4、a:active：激活超链接时
5、:root：匹配文档的根元素,页面的根元素是<html>，该选择器设置的样式对页面的所有元素均有效
6、:not(element)：匹配不是指定元素的元素
7、:only-child：匹配只有一个子元素的元素
8、:first-child：匹配父元素中的第一个子元素
9、:last-child: 匹配父元素中的最后一个子元素
10、:nth-child(n)：匹配父元素中正数第n个元素
11、:nth-last-child(n)：匹配父元素中倒数第n个元素
12、:before：在匹配的元素之前添加指定的内容,要和content结合使用
13、:after：在匹配的元素之后添加指定的内容
相关资料：https://www.w3school.com.cn/cssref/func_calc.asp
453
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
