理解CSS | 青训营笔记

parksen
131 阅读15分钟

理解CSS

为什么学习CSS

  • 网页样式和布局：CSS（层叠样式表）是一种用于描述HTML元素在网页上呈现的样式和布局的语言。通过学习CSS，我们可以使网页看起来更加美观、易于使用，为用户提供更好的体验。

  • 设备和浏览器兼容性：CSS具有跨设备和浏览器的兼容性。学习CSS能帮助我们针对不同的设备（如桌面电脑、平板电脑、手机等）和浏览器（如Chrome、Firefox、Safari等）优化网页样式，确保在各种环境下都能提供一致的用户体验。

  • 网页性能优化：通过有效地使用CSS，我们可以减少网页的加载时间、优化渲染速度，提高网站的性能。这对于用户体验和搜索引擎优化（SEO）都非常重要。

  • 动画和交互：CSS3引入了许多新特性，如动画、过渡、变形等，使得我们可以仅使用CSS来实现一些原本需要JavaScript的动画和交互效果。这样可以减少对JavaScript的依赖，提高网站性能。

  • 响应式设计：CSS的媒体查询功能使得我们可以为不同屏幕尺寸的设备创建自适应的布局，实现响应式设计。这对于提高网站在移动设备上的用户体验和适应性至关重要。

  • 提高开发效率：掌握CSS可以帮助我们更快速地完成网页开发。通过组织良好的样式表，我们可以在多个页面之间重用样式，减少重复劳动，提高开发效率。

  • 前端开发的基本技能：CSS是前端开发的三大基石之一（HTML、CSS和JavaScript），掌握CSS是成为一名合格的前端开发人员的基本要求。学习CSS可以为我们打开Web开发领域的大门，为我们的职业发展提供更多机会。

CSS简要发展历史

  • 通过HTML提出：在早期的Web发展中，网页样式主要依赖于HTML元素属性，如<font>标签和bgcolor属性等，来控制页面的样式。随着Web技术的发展，这种方式逐渐显得不够灵活且难以维护。为了解决这个问题，CSS应运而生。CSS将样式与内容分离，使得网页样式的设计和维护变得更加简单高效。

  • CSS1：CSS1于1996年12月发布，是CSS的第一个正式版本。CSS1为Web开发者提供了基本的样式控制功能，包括字体、颜色、背景、边框、列表、定位等。这个版本使得开发者可以更方便地为网页添加样式，并且提高了网页的兼容性和可维护性。

  • CSS2：CSS2于1998年5月发布，是CSS的第二个版本。CSS2在CSS1的基础上新增了一些功能，如定位、浮动、层叠顺序（z-index）、生成内容、媒体查询等。这些新特性为Web开发者提供了更多的样式控制功能，使得网页布局和设计变得更加灵活。

  • CSS2.1：CSS2.1于2011年6月成为正式标准，是CSS2的一个修订版本。CSS2.1修复了CSS2中的一些错误，同时移除了一些不常用或难以实现的特性，提高了CSS的稳定性和互操作性。

  • CSS3：CSS3是CSS的最新版本，从2005年开始逐步推出。CSS3将CSS分为多个模块，每个模块负责一个特定的功能，如选择器、盒模型、背景和边框、文本效果、2D/3D转换、动画、过渡、多列布局等。这种模块化的设计使得CSS可以更快地更新和发展，同时也方便浏览器厂商逐步实现支持。CSS3引入了许多新特性和改进，大大丰富了Web开发者的工具箱，提高了网页的表现力和交互性。

image.png

基础知识

Casading规则(层叠优先集)

image.png

层叠三大规则

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

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

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

继承

CSS 中的继承是一种机制，通过它，子元素可以从其父元素接收样式属性值。这使得我们可以在一个地方设置通用样式，然后让其他元素自动继承这些样式，从而减少代码的重复和提高可维护性。 并非所有的 CSS 属性都是可继承的。一些常见的可继承属性包括：color、font、text-align等。这些属性在父元素上设置后，子元素会自动继承这些样式，除非子元素上明确设置了不同的值。

image.png

值和单位

单位

  • 长度单位

    • 绝对长度：

      • 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：分别等于视口宽度和高度中的较小值和较大值。

  • 角度单位

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

  • 时间单位

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

  • 分辨率单位

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

值

  • 文本类：

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

  • 数值类：

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

  • 颜色：

    • 预定义颜色：使用 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);

  • 函数生成：

    • 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() 等，用于在不同轴上

盒模型

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）等，来满足各种布局需求

弹性盒子

image.png

image.png

Grid

2017年推出的Gd布局可以定义由行和列组成的二维布局，然后将元素放置到网格中。元素可以只占其中一个单元格，也可以占据多行或多列。

CSS Grid Layout（网格布局）是一个用于创建二维网格的 CSS 布局技术。它允许你以行和列的形式设计复杂的布局，而不需要使用浮动、定位和其他传统布局方法。Grid 布局特别适合用于构建响应式和自适应设计，因为它可以轻松地在不同的屏幕尺寸和设备上调整布局。

CSS Grid 的一些基本概念：

  1. 容器（Container）：要使用 Grid 布局，首先需要将一个元素声明为网格容器。这可以通过将 display 属性设置为 grid 或 inline-grid 来实现。

    .container {
  display: grid;
}
复制代码

  2. 网格项（Grid Items）：容器的直接子元素自动成为网格项。

  3. 网格线（Grid Lines）：网格布局由水平和垂直的网格线组成，这些网格线定义了网格的行和列。网格线可以用数字或名称来引用。

  4. 网格轨道（Grid Tracks）：网格轨道是由两条相邻的网格线之间的区域组成的，可以是行或列。

  5. 网格单元（Grid Cells）：由相邻的两条行网格线和两条列网格线组成的一个单元格称为网格单元。

  6. 网格区域（Grid Areas）：网格区域是由任意数量的网格单元组成的矩形区域。网格区域可以用来放置网格项。

定位

为了我们可以在文档流的基础上，让元素移动，做出更多灵活的改变。当position属性的取值非staticl的时候，可以使用top,right,,bottom,left对其进行定位

  1. static： 默认值，元素遵循正常的文档流。在这种情况下，top、right、bottom 和 left 属性不会生效。

  2. relative： 元素相对于其在正常文档流中的位置进行定位。即使对元素进行了移动，它在文档流中的空间仍然被保留。可以使用 top、right、bottom 和 left 属性来调整元素的位置。

    例如，如果一个元素的 position 被设置为 relative，并且 top 设置为 20px，那么这个元素将向下移动 20 像素，但它原本在文档流中的位置仍然会被保留。

  3. absolute： 元素相对于最近的非 static 祖先元素进行定位。如果没有非 static 祖先元素，它将相对于文档的初始包含块进行定位。绝对定位的元素从文档流中移除，不占据空间。可以使用 top、right、bottom 和 left 属性来调整元素的位置。

  4. fixed： 元素相对于浏览器窗口进行定位，不随页面滚动而移动。固定定位的元素从文档流中移除，不占据空间。可以使用 top、right、bottom 和 left 属性来调整元素的位置。

  5. sticky： 元素在滚动过程中在某种程度上表现为相对定位，又在某种程度上表现为固定定位。当元素在视口内时，它的行为类似于 relative 定位，而当元素在视口外时，它的行为类似于 fixed 定位。可以使用 top、right、bottom 和 left 属性来调整元素的位置。

层叠上下文

层叠上下文是对TML元素的三维构想，将元素沿着垂直屏幕的虚构的Z轴排开

层叠上下文（Stacking Context）它用于决定元素在页面上的层叠顺序。层叠上下文由具有特定属性的元素生成，这些属性会影响该元素及其子元素在 z 轴上的渲染顺序。z 轴是垂直于屏幕的轴线，用于表示页面中元素的前后顺序

变形、过渡、动画

transform 变形 3D

CSS transform 属性允许我们对元素进行 2D 或 3D 变换。这里我们主要讨论一下 3D 变换相关的属性。

  1. transform：这是一个复合属性，可以包含一个或多个 3D 变换函数。以下是一些常用的 3D 变换函数：

    • rotateX(angle)：绕 X 轴旋转指定的角度。
    • rotateY(angle)：绕 Y 轴旋转指定的角度。
    • rotateZ(angle)：绕 Z 轴旋转指定的角度。
    • scale3d(sx, sy, sz)：分别沿 X、Y 和 Z 轴缩放元素。
    • translate3d(tx, ty, tz)：分别沿 X、Y 和 Z 轴移动元素。
    • perspective(p)：设置透视距离。较小的值会增强 3D 效果。

  2. transform-origin：定义变换的基点，即元素进行变换时以哪个点为中心。默认值为 "50% 50% 0"，即元素的中心点。

  3. transform-style：设置元素的子元素是否位于 3D 空间中。取值为 flat（默认）或 preserve-3d。当设置为 preserve-3d 时，子元素将保留其 3D 位置。

  4. perspective：定义观察者距离元素的距离，对于创建 3D 效果非常有用。较小的值会增强 3D 效果。此属性通常应用于父元素上。

  5. perspective-origin：定义透视投影点的位置。默认值为 "50% 50%"，即元素的中心点。

响应式设计

响应式设计推荐遵循的原则

image.png

媒体查询

媒体查询（Media Queries）是 CSS3 引入的一种技术，允许某些样式只在页面满足特定条件时才生效。我们可以将媒体类型(如screen、pit)以及媒体特性（如视口宽度、屏幕比例、设备方向：横向或纵向）做为约束条件。

说白了就是允许你根据设备特征（如屏幕尺寸、分辨率等）对样式进行条件性地应用。这让网页能够根据不同的设备和视口尺寸自适应地调整布局和样式，从而提高用户体验

CSS生态相关

  • 语言增强：预处理器、后处理器
  • 工程架构：CSS模块化、CSS-ln-Js、Atomic CSS

课程总结

image.png

avatar
文章
阅读
粉丝