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;
