6、CSS三大特性
6.1 层叠性
如果样式发生冲突，则按照优先级进行覆盖。
6.2 继承性
元素自动继承其父元素、祖先元素所设置的某些元素，优先继承较近的元素。
6.3 优先级
6.3.1 简单分级
- 1、内联样式
- 2、ID选择器
- 3、类选择器/属性选择器
- 4、标签名选择器/伪元素选择器
- 5、通配符选择器/子代选择器
- 6、继承样式
6.3.2 复杂分级
格式：（a, b, c），从左到右依次比较，全部相同则后"来者居上"，以后面的属性为主。
字母 含义 a ID选择器的个数 b 类、伪类、属性选择器的个数 c 元素、伪元素选择器的个数
<style>/* (1, 3, 5) */div.containter>li div.info a#top1>span:nth-child(1) {color: red;}/* (1, 1, 2) */a#top1>span:nth-child(1) {color: green;}/* 在属性值后面若有!important,则该属性优先级最高 */span.title {color: pink !important;}
</style>
- 注意：
- 行内样式权重大于所有选择器；
- !important的权重大于所有选择器（包括行内选择器）
7、颜色
7.1 常见颜色写法
<style>div {font-size: 50px;}/* 以名称定色 */.one {color: red;}/* 以rgb定色 */.two {color: rgb(0, 255, 0);}/* 以rgba变色 */.three {color: rgb(0, 255, 0, 50%);}/* HEX变色 */.four {color: #0000ff;}/* HEXA变色 */.five {color: #0000ff0f;}
</style>
7.2 色相环
- 颜色分布
<style>div {font-size: 50px;}/* hs1(色相, 饱和度, 亮度) 角度 饱和度 亮度*/.one {color: hsl(180, 100%, 50%);}/* hs1a(色相, 饱和度, 亮度, 透明度) 角度 饱和度 亮度 透明度*/.one {color: hsla(180, 100%, 50%, 30%);}
</style>
8、CSS常见属性
8.1 字体属性
8.1.1 字体大小
<style>/* 调整字体大小为20px */.one {font-size: 20px;}
</style>
- 有时将字体设置的过大或者过小会有个限制，这是浏览器的设置导致的。
8.1.2 字体族
- 查看电脑自带字体，或者下载ttf字体文件
<style>/* 调整字体大小为20px */div {font-size: 20px;}.one {font-family: "楷体";}/* 从前到后选择字体，不符合依次向下依赖，都没有则选择默认 */.two {font-family: "华文彩云", "微软雅黑";}.three {font-family: "宋体";}
</style>
8.1.3 字体风格
<style>/* 调整字体大小为20px */div {font-size: 20px;}/* 默认 */.one {font-style: normal;}/* 斜体，使用字体自带的斜体。推荐 */.two {font-style: italic;}/* 斜体。强制倾斜产生的效果 */.three {font-style: oblique;}
</style>
8.1.4 字体粗细
<style>/* 加细 */.one {font-weight: light;}/* 正常 */.two {font-weight: normal;}/* 加粗 */.three {font-weight: bold;}/* 加粗再加粗，由于默认字体只有三种粗细，所以和加粗字体粗细一致 */.four {font-weight: bolder;}/* 以数值控制，还是依赖于字体 */.five {font-weight: 100;}
</style>
8.1.5字体复合属性
<style>.top1 {font: bold italic 100px "STCaiyun";}
</style>
8.2 文本属性
8.2.1 文本颜色
- 使用上面的color属性即可。
8.2.2 文本间距
属性值为px，正值让间距变大，负值让间距变小。
<style>/* 调整所有字母之间的间距 */div:nth-child(2) {letter-spacing: 20px;}/* 调整单词之间的距离，以空格为准 */div:nth-child(3) {word-spacing: 30px;}
</style>
8.2.3 文本类型
<style>/* 设置上划线类型与颜色 */div:nth-child(1) {text-decoration: overline dotted red;}/* 设置下划线类型与颜色 */div:nth-child(2) {text-decoration: line-through wavy blue;}/* 设置下划线 */div:nth-child(3) {text-decoration: underline;}/* 去除下划线 */a,ins,del {text-decoration: none;}
</style>
8.2.4 文本缩进
- text-indent: 距离; 属性值为CSS的长度单位。例如px。
8.2.5 文本对齐
- 水平对齐
<style>/* 左对齐 */div:nth-child(1) {text-align: left;}/* 居中对齐 */div:nth-child(2) {text-align: center;}/* 右对齐 */div:nth-child(3) {text-align: right;}
</style>
- 垂直对齐
vertical-align：用于指定同一行元素之间，或表格单元格内文字的垂直对齐方式。（不能控制块元素）
常用值：
- baseline：默认值，使元素的基线与父元素的基线对齐；
- top：使元素的顶部与其所在行的顶部对齐；
- middle：使元素的中部与父元素的基线加上父元素字母x的一半对齐；
- bottom：使元素的底部与其所在行的底部对齐。
<style>* {font-size: 40px;}/* 只对单行文字生效 *//* 1、顶部对齐，默认即为顶部对齐 *//* 2、居中对齐，height=line-height *//* div {background-color: aqua;height: 80px;line-height: 80px;} *//* 3、底部对齐line-height=(height×2)-font-size -x，x的值依据字体族的大小而定 */div {background-color: aqua;height: 60px;line-height: 50px;}
</style>
8.2.6 文本行高
<style>/* 默认行高 *//* div {line-height: normal;} *//* 直接写行高像素大小 *//* div {line-height: 60px;} *//* 1.5倍行高 *//* div {line-height: 1.5;} *//* 默认行高的150% */div {line-height: 150%;}
</style>
注意事项：
- line-height过小文字会产生重叠，最小值为0，不能为负数；
- line-height可以继承，最好采用倍数写法
- line-height等于height可以实现文字的垂直居中，但并不是绝对的垂直居中。
8.3 各类元素的属性
8.3.1 列表
<style>ul {/* 去除列表前面的符号 */list-style-type: none;/* 将列表元素放入外部 */list-style-type: outside;/* 自定义列表符号 */list-style-image: url(../imgs/加载环.gif);/* 复合属性 */list-style: decimal inside url(../imgs/加载环.gif);}
</style>
8.3.2 表格
- 表格边框：
除了表格边框，其他元素边框也可如此书写。
如：
div {
border: 2px aqua solid;
}
<style>table {/* 控制表格边框宽度 *//* border-width: 2px; *//* 控制表格边框颜色 *//* border-color: aqua; *//* 控制表格边框风格 *//* border-style: dashed; *//* 复合写法 */border: 2px aqua solid;}th,td {border: 2px orange solid;}
</style>
- 表格特有属性，即只有table可以使用
<style>table {border: 1px blue solid;/* 自动设置列宽度，默认 *//* table-layout: auto; *//* 平均分割表格 */table-layout: fixed;/* 设置单元格之间的间距，在不合并的前提下生效 */border-spacing: 10px;/* 合并单元格的边框 */border-collapse: collapse;/* 隐藏没有内容的单元框 */empty-cells: hide;/* 设置表格标题的位置 */caption-side: top;}th,td {border: 1px orange solid;}
</style>
8.3.3 背景
| background | 功能 | 属性值 |
|---|---|---|
| background-attachment | 背景图像是否固定或者随着页面的其余部分滚动。 | scroll：默认值。背景图片随着页面的滚动而滚动，相对于元素本身固定，而不是随着它的内容滚动； fixed：此关键属性值表示背景相对于视口固定。即使一个元素拥有滚动机制，背景也不会随着元素的内容滚动； local：背景相对于元素的内容固定。如果一个元素拥有滚动机制，背景将会随着元素的内容滚动，同时背景图图片随着页面的滚动而滚动。 |
| background-color | 设置元素的背景颜色。 | 设置背景颜色，默认背景颜色为transparent。 |
| background-image | 把图像设置为背景。 | 通过url设置背景照片。 |
| background-position | 设置背景图像的起始位置。 | 关键字设置： 水平：left、center、right； 垂直：top、center、bottom； 若只写一个值，则另一方向默认为center 通过长度： 以元素左上角为原点，只写一个值y取center、另一个值为x |
| background-repeat | 设置背景图像是否及如何重复。 | 水平：left、center、right； repeat-x：只在水平方向重复； repeat-y：只在垂直方向重复； no-repeat：不重复。 |
| background | 复合属性。 | 没有顺序要求。 |
8.3.4 鼠标
| 属性名 | 功能 | 常见属性值 |
|---|---|---|
| cursor | 设置鼠标光标的样式。 | pointer：手； move：移动图标； text：文字选择器； crosshair：十字架； wait：等待图标； help：帮助。 |
<style>div {height: 400px;width: 400px;background-color: aqua;cursor: wait;}
</style>// 除了使用官方提供的图标，还可以自己使用图标设置
cursor: url(./arrow.png), pointer;
