什么是 CSS？级联样式表、响应式 CSS、Sassy CSS、压缩、缩小、取消缩小、解压缩工具

什么是层叠样式表 (CSS)？

Douglas Karr 周四，2月9，2023

1 104 阅读4分钟

阅读下文以了解级联样式表如何工作的完整说明。我们在页面顶部显示我们的应用程序，以便于查找和使用。如果您是通过电子邮件或提要阅读本文，请点击进入压缩你的 CSS.

除非你真的在开发站点，否则你可能无法完全理解级联样式表（的CSS). CSS 是一种样式表语言，用于描述以 CSS 编写的文档的外观和格式 HTML or XML. CSS 可用于指定各种元素的样式，例如字体、颜色、间距和布局。 CSS 允许您将 HTML 文档的呈现与其内容分开，从而更容易维护和更新您网站的视觉风格。

CSS语言结构

最低价的 选择器 是您要设置样式的 HTML 元素，而财产和 折扣值 定义要应用于该元素的样式：

selector {
  property: value;
}

例如，以下 CSS 将使所有 <h1> 页面上的元素为红色，字体大小为 32px：

的CSS

h1 {
  color: red;
  font-size: 32px;
}

输出

标题

您还可以为元素上的唯一 ID 指定 CSS：

的CSS

/* styles for an element with ID "intro" */
#intro {
  font-weight: bold;
  text-align: center;
}

输出

简介

或者跨多个元素应用一个类：

的CSS

/* styles for elements with class "highlight" */
.highlight {
  background-color: yellow;
}

输出

我想突出 span 标签中的一个词。

您可以通过三种方式在 HTML 文档中包含 CSS：

内联 CSS，使用 style HTML 元素的属性

内部 CSS，使用 <style> 中的元素 <head> 你的 HTML 文件
外部 CSS，使用单独的 .css 文件链接到您的 HTML 文档，使用 <link> 中的元素 <head> 你的 HTML 文件

响应式 CSS

CSS 非常灵活，可用于根据屏幕分辨率调整元素的显示，因此您可以拥有相同的 HTML 但构建它响应到设备分辨率：

/* media query for responsive design */
@media (max-width: 768px) {
  p {
    font-size: 14px;
  }
  #intro {
    font-size: 20px;
  }
}

CSS压缩

您可以在上面的示例中看到，有一个评论、一个媒体查询和多个使用空格和换行符来组织 CSS 视图的样式。缩小或压缩站点上的 CSS 以减小文件大小以及随后请求和呈现样式所需的时间是一种很好的做法。这不是一个小数目……您可以在上面的一些示例中看到超过 50% 的节省。

许多服务器配置提供的工具可以自动动态压缩 CSS 并缓存缩小后的文件，这样您就不必手动操作了。

什么是 SCSS？

时髦的 CSS (社会保障局) 是一个 CSS 预处理器，它为 CSS 语言添加了额外的功能和语法。它通过允许使用标准 CSS 中不可用的变量、混合、函数和其他功能来扩展 CSS 的功能。

SCSS 优势

改进的可维护性：通过使用变量，您可以将值存储在一个地方并在整个样式表中重复使用它们，从而更容易维护和更新您的样式。
更好的组织：使用 mixins，您可以分组和重用样式集，使您的样式表更有条理且更易于阅读。
增加的功能：SCSS 包括许多标准 CSS 中不可用的功能，例如函数、控制结构（例如 if/else）和算术运算。这允许更具动态和表现力的样式。
更好的性能：SCSS 文件被编译成 CSS，这可以通过减少浏览器需要解析的代码量来提高性能。

SCSS 缺点

学习曲线：SCSS 具有与标准 CSS 不同的语法，您需要学习这种新语法才能有效地使用它。
额外的复杂性：虽然 SCSS 可以使您的样式表更有条理且更易于维护，但它也会给您的代码库带来额外的复杂性，尤其是在您不熟悉新功能和语法的情况下。
工具：要使用 SCSS，您需要一个编译器来将您的 SCSS 代码转换为 CSS。这需要额外的设置和工具，这可能成为某些开发人员的进入障碍。

在下面的示例中，SCSS 代码使用变量来存储值（$primary-color 和 $font-size) 可以在整个样式表中重复使用。从此 SCSS 代码生成的 CSS 代码是等效的，但它不包含变量。相反，变量的值直接在 CSS 中使用。

$primary-color: blue;
$font-size: 16px;

body {
  font-size: $font-size;
  color: $primary-color;

  h1 {
    font-size: 2em;
    color: $primary-color;
  }
}

此示例中演示的 SCSS 的另一个功能是嵌套样式。在 SCSS 代码中， h1 样式嵌套在 body 样式，这在标准 CSS 中是不可能的。编译 SCSS 代码时，嵌套样式在 CSS 代码中展开为单独的样式。

总体而言，与标准 CSS 相比，SCSS 具有许多优势，但重要的是要权衡利弊，并根据您的需求和限制为您的项目选择合适的工具。