CSS | 青训营

秌离
80 阅读5分钟

本篇是我整理的关于CSS的笔记，主要介绍CSS选择器、CSS继承、CSS求值过程，下一篇会介绍CSS的布局及相关技术。

1、CSS选择器

CSS（层叠样式表）：给网站添加样式，具体给元素添加样式，识别不同的屏幕尺寸以让网站具备响应式的特征，是网站外表和用户体验的一个重要工具。
网页实际上是一个多层结构，通过CSS可以分别为网页的每一层来设置样式，而最终我们能看到的只是网页的最上边一层，而HTML页面中的元素就是通过CSS选择器进行控制的。

选择器分类：

  1. 元素选择器
    作用：根据标签名来选中指定的元素
    语法：标签名{}
    例子：p{}、h1{}
  2. id选择器
    作用：根据元素的id属性值选中一个元素
    语法：#id属性值{}、id不可重复
    例子：#a{}、#red{}
  3. 类选择器
    作用：根据元素的class的属性值选中一个元素
    语法：.class属性值(注：class可以重复,可以同时为一个元素指定多个class属性，用空格隔开)
    例子：.abc{}
  4. 通用选择器
    作用： 选择页面上的所有的 HTML 元素
    语法：*
    例子：*{text-align: center;color: blue;}
  5. 属性选择器
    作用：用于选取带有指定属性的元素

image.png ---图片来源于W3Cschool（本来想自己弄个表格，结果不知道怎么弄掘金文章里面的表格，只能用图片替代了）

  1. 伪类选择器
    作用：伪类用于定义元素的特殊状态，比如：第一个子元素、未访问的链接、鼠标移入的元素……
    语法：“:”开头
    例子：:first-child第一个子元素，:last-child最后一个子元素，:nth-child()选中第n个子元素，:link{}用来表示没访问过的链接
  2. 伪元素选择器
    作用：伪元素用于设置元素指定部分的样式，比如设置元素的首字母、首行的样式、在元素的内容之前或之后插入内容
    语法：“::”开头
    例子：::first-line伪元素用于向文本的首行添加特殊样式，::first-letter伪元素用于向文本的首字母添加特殊样式，::before伪元素可用于在元素内容之前插入一些内容，::after伪元素可用于在元素内容之后插入一些内容，::selection伪元素匹配用户选择的元素部分。
  3. 组合选择器
    作用：组合器是解释选择器之间关系的某种机制，CSS 中有四种不同的组合器
  • 后代选择器 (空格)：匹配属于指定元素后代的所有元素
  • 子选择器 (>)：匹配属于指定元素子元素的所有元素
  • 相邻兄弟选择器 (+)：匹配所有作为指定元素的相邻同级的元素
  • 通用兄弟选择器 (~)：匹配属于指定元素的同级元素的所有元素

选择器优先级

内联样式>id选择器>类/伪类选择器>属性选择器>通用选择器
注意：可以在某个样式后面添加!important，则此时该样式会获取到最高的优先级，甚至超过内联样式。 image.png image.png

2、CSS继承

继承：某些属性会自动继承其父元素的计算值，除非它有显示指定一个值，但是并不是所有属性都可以被继承的。常见的可以继承的属性：

字体属性：
font：字体、 font-family：规定元素的字体、 font-weight：设置字体的粗细、 font-size：设置字体的尺寸、 font-style：定义字体的风格……

文本属性：
text-indent：文本缩进、 text-align：文本水平对齐、 line-height：行高、 word-spacing：增加或减少单词间的空白（即字间隔）、 letter-spacing：增加或减少字符间的空白（字符间距）、 text-transform：控制文本大小写。direction：规定文本的书写方向、color：文本颜色。

布局属性：
caption-side：设置表格标题的位置、 border-collapse：设置是否将表格边框折叠为单一边框、 border-spacing：设置分隔单元格边框的距离、empty-cells：设置是否显示表格中的空单元格、 table-layout：设置显示单元、行和列的算法。

还有很多属性是可继承的，比如visibility：规定元素是否可见和cursor：规定要显示的光标的类型（形状）等等，想要了解更多的可以查看官方文档。

3、CSS求值过程

image.png image.png image.png

CSS求值过程是指浏览器解析并计算CSS样式的过程。它包括以下几个步骤：

  1. 选择器匹配：浏览器根据HTML文档中的元素和对应的CSS规则，确定哪些规则适用于哪些元素。这个过程称为选择器匹配。
  2. 属性计算：一旦选择器与元素匹配，浏览器将计算每个属性的最终值。这些属性可以是直接指定的值，也可以是继承或从其他地方计算得到的值。
  3. 值解析：对于每个属性，浏览器会将其值解析为特定的数据类型，例如长度、颜色、字体等。这些解析过程遵循CSS规范中定义的语法和规则。
  4. 层叠和继承：在计算样式的过程中，浏览器还会处理层叠和继承。层叠是指当多个规则应用于同一个元素时，浏览器根据规则的优先级来确定最终的样式。继承是指某些属性的值可以从父元素继承到子元素。
  5. 最终渲染：求值过程完成后，浏览器会将计算得到的样式应用到对应的元素上，最终呈现给用户。

注：继承父元素，继承到的是父元素的计算值而不是父元素的层叠值。

寄语：简而言之，CSS是让页面变得美观的工具，它包含了很多美化页面的方法，这篇笔记仅仅只是介绍了如何让浏览器选择我们想要的美化方法。还有很多关于CSS的知识等着我们去学习，更重要的是如何维护它们，让它们更具可读性和可维护性，让我们一起学习吧。

avatar
文章
阅读
粉丝