CSS学习记录6-优快云博客

本文链接：https://blog.youkuaiyun.com/zhaoshengmeyan/article/details/139731696

选择器优先级

（排查问题的思考方向）

简：

行内>ID选择器>类选择器>元素选择器>通配选择器

详：

对于复杂选择器，可以通过计算权重的方式来比较优先级。

计算方式：

每个选择器都可以计算出格式为（a，b，c）的一组权重

a : ID 选择器的个数。
b : 类、伪类、属性选择器的个数。
c : 元素、伪元素选择器的个数。

例：

div>p (0,0,2)

div.01 (0,1,1)

#test01.01(1,1,0)

比较方式：

从左到右，依次比较。当前位>后位时，比较出结果。

例：

(0,0,2)>(0,0,1)

(0,1,0)>(0,0,6)

(1,0,0)>(0,9,9)

特殊规则：

行内样式权重>所以选择器权重
!important权重最大
并集选择器的每一个部分是分开算的

        div{
            color: chartreuse !important;
        }
        /*!important使用案例*/

CSS三大特性

层叠性

如果发生了样式冲突，那就会根据一定的规则（选择器优先级），进行样式的层叠（覆盖）。

继承性

元素会继承其父元素、或其祖先元素上所设置的某些样式。

优先级

如上，略。

CSS颜色

表示方法1：颜色名

语法：

color: 颜色名;

表示方式2：rgb/rgba

使用 0~255 之间的数字表示一种颜色

r 表示红色

g 表示绿色

b 表示蓝色

a 表示透明度

    <style>
        p{
            color: rgb(138,43,226);/*（红，绿，蓝）*/
        }
        .test2{
            color: rgba(255,255,0,0.5);/*（红，绿，蓝，透明度）*/
        }
        .test3{
            color: rgba(100%,100%,100%,100%);/*用百分比表示*/
        }
    </style>

表示方法3：HEX/HEXA

HEX 同与 rgb，依然是通过红、绿、蓝色进行组合。

使用16进制。

格式：#ff00000,每两位控制一个颜色

如果每种颜色的两位都是相同的，就可以简写

    <style>
        .test1{
            color: #ff0000;/*（红，绿，蓝）*/
        }
        .test2{
            color:#cb52acff;/*（红，绿，蓝，透明度）*/
        }
        .test3{
            color:#cb1f;/*是ccbb11ff的缩写*/
        }
    </style>

表达方式4：HSL /HSLA

通过色相、饱和度、亮度来表达一个颜色

格式：hsl（色相、饱和度、亮度）

色相：0~360deg（度）

饱和度、亮度：0~100%

    <style>
        .test1{
            color:hsl(0deg,100%,50%);/*（色相,饱和度,亮度）*/
        }
        .test2{
            color:hsla(180deg,100%,60%,100%);/*（色相,饱和度,亮度，透明度）*/
        }
    </style>

CSS字体

字体大小：

属性名：font-size

    <style>
        .test1{
            font-size: 100px;
        }
    </style>

Chrome 浏览器支持的最小文字为 12px ，默认的文字大小为 16px ，并且 0px 会自动消失。

字体族：

属性名：font-famil

    <style>
        .test1{
            font-family: "楷体";
        }
    </style>

可以设置多个字体，按照从左到右的顺序逐个查找。

        .test2{
            font-size: 100px;
            font-family: "隶体"," 楷体",sans-serif ;
        }

如果用户有第一个字体，则使用第一个，如果没有则用下一个，以此类推。

通常在最后写上 serif （衬线字体）或 sans-serif （非衬线字体）。

以在所以设置字体用户都没有的情况下，浏览器和系统自行选择字体。

字体风格：

属性名：font-style

作用：控制是否斜体

1. normal ：正常（默认值）

2. italic ：斜体（使用字体自带的斜体效果）

3. oblique ：斜体（强制倾斜产生的斜体效果）

    <style>
        .test1{
            font-size: 100px;
            font-style: normal;
        }
        .test2{
            font-size: 100px;
            font-style: italic;
        }
        .test3{
            font-size: 100px;
            font-style: oblique;
        }
    </style>

字体粗细：

属性名：font-weight

作用：控制字体的粗细

1. lighter ：细

2. normal ：正常

3. bold ：粗

4. bolder ：很粗（多数字体不支持）

或者是敲数值：

100~10000无单位，是否一样粗细看字体精细程度

例：

微软雅黑：分为细，正常，粗

100~300 等同于 lighter ， 400~500 等同于 normal ， 600 及以上等同于 bold 。

    <style>
        .test1{
            font-size: 100px;
            font-weight: lighter;
        }
        .test2{
            font-size: 100px;
            font-weight: normal;
        }
        .test3{
            font-size: 100px;
            font-weight: bold;
        }
        .test4{
            font-size: 100px;
            font-weight: 500;
        }
    </style>

字体复合写法：

属性名：font

作用：将上述所有字体相关的属性复合在一起编写。

规则：

必须写字体大小和字体族
字体族必须是倒数第二位，字体大小必须是倒数第一位
各个属性用空格隔开

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字体复合写法</title>
    <style>
        div{
            font: 200px "楷体";/*必须要写的两个*/
        }
        p{
            font: 500 italic 150px "快去写代码-CJK";
        }
    </style>
</head>
<body>
    <div>山东农业大学</div>
    <p>山东泰安</p>
</body>
</html>