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>