理解CSS

itzyj
95 阅读18分钟

  • 为什么学习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开发领域的大门，为我们的职业发展提供更多机会。

CSS简要发展历史

  1. 通过HTML提出：在早期的Web发展中，网页样式主要依赖于HTML元素属性，如<font>标签和bgcolor属性等，来控制页面的样式。随着Web技术的发展，这种方式逐渐显得不够灵活且难以维护。为了解决这个问题，CSS应运而生。CSS将样式与内容分离，使得网页样式的设计和维护变得更加简单高效。
  2. CSS1：CSS1于1996年12月发布，是CSS的第一个正式版本。CSS1为Web开发者提供了基本的样式控制功能，包括字体、颜色、背景、边框、列表、定位等。这个版本使得开发者可以更方便地为网页添加样式，并且提高了网页的兼容性和可维护性。
  3. CSS2：CSS2于1998年5月发布，是CSS的第二个版本。CSS2在CSS1的基础上新增了一些功能，如定位、浮动、层叠顺序（z-index）、生成内容、媒体查询等。这些新特性为Web开发者提供了更多的样式控制功能，使得网页布局和设计变得更加灵活。
  4. CSS2.1：CSS2.1于2011年6月成为正式标准，是CSS2的一个修订版本。CSS2.1修复了CSS2中的一些错误，同时移除了一些不常用或难以实现的特性，提高了CSS的稳定性和互操作性。
  5. CSS3：CSS3是CSS的最新版本，从2005年开始逐步推出。CSS3将CSS分为多个模块，每个模块负责一个特定的功能，如选择器、盒模型、背景和边框、文本效果、2D/3D转换、动画、过渡、多列布局等。这种模块化的设计使得CSS可以更快地更新和发展，同时也方便浏览器厂商逐步实现支持。CSS3引入了许多新特性和改进，大大丰富了Web开发者的工具箱，提高了网页的表现力和交互性。

image.png

课程范围

image.png

基础知识

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

//HTML文件
<head>
    <style>
        .red{
            color:red;
        }
    </style>
    <link rel="stylesheet" href="./index.css" type="text/css">
</head>
<body>
<h1 class="green blue red">
    A Tittle
</h1>
</body>
复制代码

/*index.css文件*/
.blue{
    color:blue;
    font-size:48px;
}
​
.green{
    color:green;
}
复制代码

由层叠概念引申出的css代码good practice(好习惯)

  1. 选择器尽量少用id(不好进行复用)
  2. 尽量不要用！important(后面想扩展的灵活性会被压缩)
  3. 自己的样式加载在引用库样式的后面(保证我们自己的样式优先生效)

继承

CSS 中的继承是一种机制，通过它，子元素可以从其父元素接收样式属性值。这使得我们可以在一个地方设置通用样式，然后让其他元素自动继承这些样式，从而减少代码的重复和提高可维护性。

并非所有的 CSS 属性都是可继承的。一些常见的可继承属性包括：color、font、text-align等。这些属性在父元素上设置后，子元素会自动继承这些样式，除非子元素上明确设置了不同的值。

image.png

值和单位

image.png

单位

  1. 长度单位

    • 绝对长度：

      • px（像素）：最常见的单位，通常用于屏幕显示。一个像素对应于屏幕上的一个点。
      • cm（厘米）、mm（毫米）、in（英寸）、pt（磅，1/72 英寸）、pc（点，1/6 英寸）：这些单位主要用于打印媒体，它们基于物理尺寸。

    • 相对长度：

      • em：相对于当前元素的字体大小。例如，如果当前字体大小是 16px，那么 2em 等于 32px。
      • rem：相对于根元素（通常是 <html>）的字体大小。与 em 类似，但始终基于根元素的字体大小。
      • vw（视窗宽度）、vh（视窗高度）：相对于视口（浏览器可见区域）的宽度和高度。1vw 等于视口宽度的 1%，1vh 等于视口高度的 1%。
      • vmin、vmax：分别等于视口宽度和高度中的较小值和较大值。

  2. 角度单位

    • deg（度）：角度单位，一圈有 360 度。
    • rad（弧度）：角度单位，一圈有 2π 弧度。
    • grad（梯度）：角度单位，一圈有 400 梯度。
    • turn：角度单位，一圈等于 1 turn。

  3. 时间单位

    • s（秒）：时间单位，用于表示秒。
    • ms（毫秒）：时间单位，用于表示毫秒，1ms 等于 0.001s。

  4. 分辨率单位

    • dpi（每英寸点数）：表示每英寸内有多少个点（像素）。
    • dpcm（每厘米点数）：表示每厘米内有多少个点（像素）。
    • dppx（每像素点数）：表示每像素内有多少个点（像素），1dppx 等于 96dpi。

值

  1. 文本类：

    • 字符串：用于表示文本值，通常用双引号或单引号括起来。例如：content: "Hello, World!";
    • 关键字：用于表示特定属性的预定义值。例如：display: block;

  2. 数值类：

    • 整数：表示一个没有小数部分的数字值。例如：z-index: 3;
    • 小数：表示一个有小数部分的数字值。例如：opacity: 0.5;
    • 百分比：表示一个基于另一个值的百分比。例如：width: 50%;
    • 长度：表示一个具有单位的长度值。例如：width: 100px; 或 padding: 1em;
    • 角度：表示一个具有角度单位的值。例如：rotate(45deg);

  3. 颜色：

    • 预定义颜色：使用 CSS 中预定义的颜色名称。例如：color: red;
    • 十六进制颜色：使用 3 或 6 个十六进制数字表示颜色。例如：color: #ff0000; 或 color: #f00;
    • RGB 颜色：使用三个介于 0 和 255 之间的整数表示颜色。例如：color: rgb(255, 0, 0);
    • RGBA 颜色：与 RGB 类似，但还包括一个表示透明度的值（0 到 1 之间的小数）。例如：color: rgba(255, 0, 0, 0.5);
    • HSL 颜色：使用色相（0 到 360 之间的整数）、饱和度（百分比）和亮度（百分比）表示颜色。例如：color: hsl(0, 100%, 50%);
    • HSLA 颜色：与 HSL 类似，但还包括一个表示透明度的值（0 到 1 之间的小数）。例如：color: hsla(0, 100%, 50%, 0.5);

  4. 函数生成：

    • URL：使用 url() 函数表示一个资源的 URL。例如：background-image: url("image.jpg");
    • calc()：使用 calc() 函数进行数学计算。例如：width: calc(100% - 20px);
    • linear-gradient()：使用 linear-gradient() 函数创建线性渐变。例如：background-image: linear-gradient(to right, red, blue);
    • radial-gradient()：使用 radial-gradient() 函数创建径向渐变。例如：background-image: radial-gradient(circle, red, blue);
    • transform 函数：例如：rotate()、scale()、translate() 和 skew() 等，用于在不同轴上

盒模型

视觉格式化模型：视觉格式化模型 - CSS：层叠样式表 | MDN (mozilla.org)

image.png

image.png

实现三角形

/* 创建一个空的 div 元素，将其作为三角形 */
<div class="triangle"></div>
​
/* 为三角形添加样式 */
<style>
  .triangle {
    /* 将 div 的宽度和高度设置为 0，这样它本身不会占据空间 */
    width: 0;
    height: 0;
​
    /* 使用 border 来制作三角形 */
    /* 三角形的底边宽度，此处设为 100px */
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
​
    /* 三角形的高度，此处设为 100px */
    border-bottom: 100px solid red;
​
    /* 如果想创建其他方向的三角形，可以尝试更改 border 的设置 */
  }
</style>
复制代码

实现固定比例矩形

<div class="rectangle"></div>
<style>
.rectangle {
  /* 设置矩形的宽度 */
  width: 200px;
​
  /* 使用 aspect-ratio 属性设置矩形的宽高比为 4:3 */
  aspect-ratio: 4 / 3;
​
  /* 设置矩形的背景颜色和边框 */
  background-color: lightblue;
  border: 2px solid black;
}
​
</style>
复制代码

实现水平居中

<div class="container">
  <div class="centered">
      I am XiaoYu.
  </div>
</div>
复制代码

/* 设置 body 和 html 的高度为 100%，这样才能让外层容器占据整个屏幕 */
html, body {
  height: 100%;
  margin: 0;
}
​
.container {
  /* 将容器的宽度设置为 100%，以使其占据整个屏幕宽度 */
  width: 100%;
​
  /* 使用 flex 布局将子元素水平居中 */
  display: flex;
  justify-content: center;
}
​
.centered {
  /* 设置要居中的元素的样式，例如背景色、内边距等 */
  background-color: lightblue;
  padding: 20px;
  border: 2px solid black;
}
复制代码

实现渐变边框

和视频中不一样的思路。采用了伪元素

  1. 渐变边框的实现：通过创建一个伪元素并设置其背景为渐变，我们可以实现一个渐变边框的效果。伪元素将覆盖在其父元素（.gradient-border）上，但位于父元素的内容之下。
  2. 边框宽度控制：设置伪元素的 padding，我们可以控制渐变边框的宽度。伪元素的 padding 就是渐变边框的宽度。
  3. 与父元素内容分离：伪元素独立于其父元素的内容，因此我们可以在不影响父元素内容的情况下实现渐变边框效果。这使得父元素的内容可以维持其原始样式（例如，背景颜色、边框和圆角），而伪元素专门负责实现渐变边框效果。

伪元素在这里中主要用于创建一个渐变边框，同时不影响其父元素的内容。这种方法避免了直接修改父元素样式的复杂性，使得实现渐变边框变得更加简单。

<div class="gradient-border">
  <p>这是一个带渐变边框的元素。</p>
</div>
​
<style>
.gradient-border {
  /* 设置内边距，以便为伪元素留出空间 */
  padding: 10px;
  position: relative;
  display: inline-block;
}
​
.gradient-border::before {
  /* 创建伪元素，并设置为相对于其父元素定位 */
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
​
  /* 使用渐变作为边框的背景 */
  background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
​
  /* 设置边框的宽度 */
  padding: 3px;
​
  /* 使伪元素的边框圆角与父元素的边框圆角相匹配 */
  border-radius: 5px;
}
​
p {
  /* 设置段落的背景颜色、边框和圆角 */
  background-color: white;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  margin: 0;
  padding: 10px;
}
​
</style>
复制代码

负外边距

负外边距（negative margin）是 CSS 盒模型中的一个概念，它可以在盒子之间创建重叠或者调整盒子的位置。与正外边距（positive margin）增加空间不同，负外边距会减少空间。以下是负外边距在不同情况下的作用：

  1. 水平方向上的负外边距：

    • 当两个块级元素并排时，它们的负外边距会让它们互相重叠。这可以用于调整元素之间的距离或者实现特定的布局效果。
    • 当一个元素的左边距为负时，它会向左移动；当一个元素的右边距为负时，它会向右移动。这可以用于调整元素相对于其父容器的位置。

  2. 垂直方向上的负外边距：

    • 当两个垂直排列的块级元素具有负外边距时，它们会互相重叠。这可以用于调整元素之间的距离，特别是当需要减少默认的垂直间距时。
    • 当一个元素的上边距为负时，它会向上移动；当一个元素的下边距为负时，它会拉近下一个元素与它之间的距离。

需要注意的是，负外边距可能会导致布局上的问题，例如元素重叠、脱离正常文档流等。因此，在使用负外边距时需要谨慎，确保它不会导致不可预期的布局问题。在某些情况下，使用其他布局技术（如 Flexbox、Grid 或定位）可能会更合适。

image.png

布局和定位

image.png

常规流布局

常规流（Normal Flow）布局，也被称为文档流（Document Flow）布局，是浏览器默认的 CSS 布局方式。在常规流布局中，元素按照它们在 HTML 代码中的顺序自上而下、自左向右地排列。常规流布局主要包括两类元素：块级元素（block-level elements）和行内元素（inline elements）。

  1. 块级元素：

    • 块级元素会独占一行，即它们会从上到下排列。
    • 块级元素默认的宽度为其父容器的宽度，高度取决于其内容。
    • 常见的块级元素有：<div>、<p>、<h1>-<h6>、<ul>、<ol>、<li>等。

  2. 行内元素：

    • 行内元素会在同一行内从左到右排列，直到容器宽度不足时才会换行。
    • 行内元素的宽度和高度取决于其内容，而不是父容器的尺寸。
    • 常见的行内元素有：<span>、<a>、<strong>、<em>、<img>等。

在常规流布局中，元素遵循一定的规则进行排列，这些规则取决于元素的 display 属性。display 属性有几个常用值，例如：block（块级元素）、inline（行内元素）和 inline-block（既具有块级元素的特点，又具有行内元素的特点）。

虽然常规流布局是浏览器的默认布局方式，但现代前端开发中，很多布局需求无法仅依靠常规流实现。因此，CSS 提供了更加强大和灵活的布局技术，如 Flexbox、Grid、定位（Positioning）等，来满足各种布局需求

作者：2002XiaoYu
链接：juejin.cn/post/722563…
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

avatar
文章
阅读
粉丝