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>
