理解CSS | 青训营笔记

茶叶不加蛋
90 阅读8分钟

为什么学习CSS

  1. 网页样式和布局：CSS（层叠样式表）是一种用于描述HTML元素在网页上呈现的样式和布局的语言。通过学习CSS，我们可以使网页看起来更加美观、易于使用，为用户提供更好的体验。
  2. 设备和浏览器兼容性：CSS具有跨设备和浏览器的兼容性。学习CSS能帮助我们针对不同的设备（如桌面电脑、平板电脑、手机等）和浏览器（如Chrome、Firefox、Safari等）优化网页样式，确保在各种环境下都能提供一致的用户体验。
  3. 网页性能优化：通过有效地使用CSS，我们可以减少网页的加载时间、优化渲染速度，提高网站的性能。这对于用户体验和搜索引擎优化（SEO）都非常重要。
  4. 动画和交互：CSS3引入了许多新特性，如动画、过渡、变形等，使得我们可以仅使用CSS来实现一些原本需要JavaScript的动画和交互效果。这样可以减少对JavaScript的依赖，提高网站性能。
  5. 响应式设计：CSS的媒体查询功能使得我们可以为不同屏幕尺寸的设备创建自适应的布局，实现响应式设计。这对于提高网站在移动设备上的用户体验和适应性至关重要。
  6. 提高开发效率：掌握CSS可以帮助我们更快速地完成网页开发。通过组织良好的样式表，我们可以在多个页面之间重用样式，减少重复劳动，提高开发效率。
  7. 前端开发的基本技能：CSS是前端开发的三大基石之一（HTML、CSS和JavaScript），掌握CSS是成为一名合格的前端开发人员的基本要求。学习CSS可以为我们打开Web开发领域的大门，为我们的职业发展提供更多机会。

基础知识

Casading规则(层叠优先集)

image.png

层叠三大规则

样式表来源

在CSS中，样式表可以按照来源被划分为三种类型：用户代理样式、用户样式表和作者样式表。

  1. 用户代理样式（User Agent Styles）：用户代理（User Agent，通常指浏览器）为HTML元素提供了一组默认的样式。这些样式在没有任何外部样式表的情况下应用于网页，以确保即使在没有CSS的情况下，网页内容依然具有基本的可读性和可访问性。用户代理样式因浏览器而异，通常包括基本的字体、颜色、边距等设置。
  2. 用户样式表（User Stylesheets）：用户样式表是由用户自定义的样式表，可以用于覆盖用户代理样式和作者样式表中的某些样式。用户可以根据自己的偏好设置用户样式表，例如调整字体大小、颜色等。用户样式表主要用于改善网页的可访问性和可用性，满足个别用户的特殊需求。在现代浏览器中，用户可以通过安装扩展或修改浏览器设置来应用自定义的用户样式表。
  3. 作者样式表（Author Stylesheets）：作者样式表是由网页开发者创建的样式表，用于定义网页的布局、外观和交互。作者样式表通常是网页设计的主要组成部分，它可以覆盖用户代理样式和用户样式表中的样式。作者样式表可以包含内联样式、嵌入式样式和外部样式表，以及通过@import引入的其他样式表。

CSS的层叠规则（Cascading）决定了这三种类型的样式表如何相互作用和叠加。在确定一个元素的最终样式时，CSS会根据特指性（Specificity）、来源和声明的顺序来解析和应用这些样式表中的规则。这种机制允许用户代理、用户和作者之间实现样式的协同和定制

image.png

选择器优先级

image.png

  1. 元素选择器：根据HTML元素类型选择元素。例如，p选择所有的<p>元素。

  2. 类选择器：根据元素的类属性选择元素。例如，.my-class选择具有类my-class的所有元素。

  3. ID选择器：根据元素的ID属性选择特定元素。例如，#my-element选择ID为my-element的元素。

  4. 属性选择器：根据元素的属性和属性值选择元素。例如，[data-attribute]选择具有data-attribute属性的所有元素，[data-attribute="value"]选择具有data-attribute属性且其值为value的所有元素。

  5. 伪类选择器：根据元素的状态或文档结构选择元素。例如，:hover选择鼠标悬停在其上的元素，:first-child选择作为其父元素的第一个子元素的元素。

  6. 伪元素选择器：选择元素的某个部分，例如内容的前后。例如，::before选择元素内容之前的一个虚拟元素，::after选择元素内容之后的一个虚拟元素。

  7. 组合选择器：通过组合多个选择器来选择符合所有条件的元素。

    • 后代选择器（空格）：例如，div p选择所有作为<div>元素后代的<p>元素。
    • 子元素选择器（>）：例如，div > p选择所有作为<div>元素直接子元素的<p>元素。
    • 相邻兄弟选择器（+）：例如，div + p选择紧跟在<div>元素后面的<p>元素。
    • 一般兄弟选择器（~）：例如，div ~ p选择在<div>元素后面的所有<p>兄弟元素。

  8. 多个选择器：使用逗号分隔的多个选择器可以同时选择符合任一选择器条件的元素。例如，div, p选择所有的<div>和<p>元素。

image.png

在CSS中，选择器的优先级（也称为特指性，Specificity）决定了当多个规则应用于同一元素时，哪个规则将最终生效。特指性是根据选择器的组成部分计算出来的，主要涉及以下几个层次：

  1. 内联样式（Inline styles）：内联样式具有最高的优先级，它们直接应用于HTML元素的style属性上。例如，<div style="color: red;">。
  2. ID选择器：ID选择器具有较高的优先级，它们通过元素的ID属性进行选择。例如，#my-element。
  3. 类选择器、属性选择器和伪类：这一层次的优先级低于ID选择器，包括类选择器（如.my-class）、属性选择器（如[data-attribute]）和伪类（如:hover）。
  4. 元素选择器和伪元素：这一层次的优先级最低，包括元素选择器（如div）和伪元素（如::before）。

特指性是通过给每个层次的选择器分配权重并计算总和来确定的。例如：

  • 内联样式的权重为 1000
  • ID选择器的权重为 100
  • 类选择器、属性选择器和伪类的权重为 10
  • 元素选择器和伪元素的权重为 1

当多个选择器应用于同一元素时，具有较高特指性的选择器将覆盖较低特指性的选择器。如果两个选择器具有相同的特指性，那么它们将按照在CSS代码中出现的顺序进行解析，最后出现的选择器将覆盖之前的选择器。

需要注意的是，!important声明可以改变规则的优先级。在同一特指性级别下，带有!important声明的规则将优先于没有!important声明的规则。然而，如果有多个!important声明冲突，那么仍然需要参考特指性和源代码顺序来确定哪个规则生效。

image.png

  • 字节提供这一张最标准的计算表，分为a，b，c。其实就分别相当于权重值100，10，1。正常情况下，10倍的权重值差距基本上是不会被追赶上的。
  • 我们通过这张表可以形象的看出谁的优先度更高，你可以把他的逗号去掉，直接当作整数看，比如(0,1,2)相当于12，(1,0,1)相当于101。谁的数字大谁的权重值就高，数字就相当于权重值了

源码位置

以下生效的样式效果是哪个？

  • 在这段代码中，CSS 优先级从高到低如下：

    1. .red 选择器（在内联样式表中定义）
    2. .blue 选择器（在外部样式表 index.css 中定义）
    3. .green 选择器（在外部样式表 index.css 中定义）

    尽管这些选择器都具有相同的优先级权重，但是它们在样式表中的顺序决定了哪一个生效。根据 CSS 的规则，当有多个相同优先级的选择器存在时，最后出现的选择器将具有更高的优先级(最后声明的生效)。

    在这个例子中，<h1> 标签同时具有green、blue 和 red 类。首先，green 类的样式被应用，然后被 blue 类的样式覆盖(red类是在link类上面去声明的，所以red类反而是最先被覆盖的)。因此，这段代码的最终效果是< h1 >标签的文字颜色为绿色，字体大小为 48 像素（由.green 类控制）。

    color: green;
font-size: 48px;
复制代码

image.png

avatar
文章
阅读
粉丝