CSS 基础知识--常用属性

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>