理解CSS篇 ｜ 青训营笔记

flying__fish
77 阅读3分钟

这是我参与「第四届青训营 」笔记创作活动的的第2天

一、陌生的css选择器

1.属性选择器---普通

  • 代码
    //HTML
    <label>用户名</label>
    <input value="fish" disabled />
    <label>用户名</label>
    <input value="123456789" type="password" />
    //style
    [disabled] {
        background-color: #ff4700;
        color: aqua;
    }
    /*
    此处[disabled] 为属性选择器，表示具有词属性值时样式生效
    */
  • 效果呈现

image.png

2.属性选择器---属性为特定值时生效

  • 代码
    //HTML
    <input type="password" value=123465789"">
    //style
    input[type="password"] {
        background-color: #ff4700;
        color: aqua;
    }
    /*
        此处样式当input的type属性为password时生效
    /*
  • 效果呈现

image.png

3.属性选择器---属性匹配

  • 代码
    //HTML
    <a href="#top">回到顶部</a>
    <a href="a.jpg">查看图片</a>
    //style
    a[href ^= "#"] {
        color: red;
    }
    a[href &= ".jpg"] {
        color: aqua;
    }
    /*
        ^=：表示配备开头
        &=：表示匹配结尾
    
    */
  • 效果呈现

image.png

二、css求值过程

1.DOM树 + 样式规则

  • 最初浏览器拿到HTML的第一步是将HTML结构解析为DOM树，在解析的工程中涉及到样式搜集出来，在这里称做是样式规则；

2.filtering(过滤、筛选)

  • 对应到页面的规则用以下条件进行筛选：选择器匹配、属性有效、符合当前media等

声明值---过渡

  • 一个元素的某属性可能又0到多个声明值。比如：p{font-size:16px}和p.text{font-size:1.2en}
  • 声明值的来源于对一个原色的某个属性根据样式规则进行筛选，奖奖匹配到的都给筛选出来备用，进入下一阶段

3.cascading(梯流，瀑布的意思）

  • 按照来源，!important、选择器特异性、书写顺序等选出优先级最高的一个属性值

层叠值---过渡

  • 再层叠过程中，赢得优先级比赛的哪个值、比如1.2em

4.defaulting(默认)

  • 当层叠值为空时，使用继承或者初始值

指定值---过渡

  • 经过有限级比赛以及对层叠值进行为空判断之后，该值就确定且不为空，也就是所说的指定值，但是这并不代表就直接用于我们的页面，同样需要进一步的审查

5.resolving（决定）

  • 将一些相对值或关键子转换为绝对值，比如em转换为px，相对路径转换为绝对路径等

计算值---过渡

  • 一般来说是，浏览器会再再不进行实际布局的情况下，所能得到的最具体的值，比如60%，但是并不是代表所有的计算值都是经过计算或者被计算而被直接使用的，还需要进如下一阶段进行进一步转换
  • *浏览器拿到后单纯通过HTML+CSS可以立马算出来的值

6.formatting(格式化)

  • 将计算值进一步转换，比如关键字、百分比等都转换为绝对值

使用值---过渡

  • 进行实际布局使用的值，不会再有相对值或关键字，比如400.2px

7.constrining(强迫)

  • 将小数像素值转为整数，为我们所看到的屏幕实际可以理解为由无数个极小的灯泡共同组成，每个小灯泡就是一个像素，这也就决定了像素必须为整数。

总结

通过这堂课对CSS的知识进行查缺补漏，其中最为陌生便属于css的求值过程，在此之前仅仅停留在判断优先级、以及页面渲染效果上，注重结果更多些，通过本节课的学习对其中间经历的过程有所了解，CSS的学习更进一步。

avatar
文章
阅读
粉丝