CSS 之美

纯 CSS 凝视

封面图片是 Jordi Rué 使用 HTML 和 CSS 创作的《特洛伊天际线》的截图。您可以在本文嵌入的 Codepen 中找到代码。

介绍

CSS 是与 HTML 和 JavaScript 并列的 Web表示层的语言。

CSS 入门简单，但实际运用却并非易事，因为它的一些特性乍一看可能让人望而却步。然而，正是这些特性让 CSS 成为一门优美易用的语言。

如果你已经使用 CSS 一段时间了，你应该已经明白我在说什么了。例如 CSS级联和CSS特异性。实际上， CSS级联和CSS特异性只是“流行”的几个方面，还有其他一些 CSS 特性，以及它们可以实现哪些功能。

让我们开始吧。

以下是不分先后顺序的不完整列表，列出了使 CSS 如此优美的原因，您可能会认为您已经熟悉它们，因为您之前已经阅读过它们并且知道如何使用它们。

我鼓励你继续阅读，因为我们将要讨论的是，是什么让她们如此美丽，所以你一定会有所收获。她们是：

• 瀑布
• 基于字体大小的属性计算
• 相对单位
• CSS 变量
• 函数attr()​
• 艺术

瀑布

级联是 CSS 中的“C”，它是一种定义如何组合来自不同来源（source ）的属性值的算法。级联可以用来处理某些浏览器不支持的属性。

当浏览器遇到它不支持的属性时，它会优雅地失败。我在说什么？让我们来一探究竟。

以下面的代码片段为例，如果浏览器不支持某个linear-gradient属性，浏览器就会使用该background-color属性。为什么？这是因为浏览器会忽略它们不理解的属性。

.selector {
    background-color: #1560bd;
    background-image: linear-gradient(to right, red, yellow); 
}

因此，您可以放心，即使浏览器无法渲染渐变，背景颜色也一定会生效。这真是太棒了。您可以将其视为在这种情况下出现问题时的备用方案。

基于字体大小的属性计算

当您使用 CSS 设置 HTML 元素的样式并使用font-size具有相对单位值的属性时，之后声明的其他具有相对单位的属性将由浏览器根据此字体大小的值进行计算。

有了这些知识，您将预先知道该选择器中其他属性的结果值，因为您拥有其计算的来源，即font-size属性。

在下面的代码中，font-sizeofmain设置为3em，margin-left属性设置为1em。你可能认为计算margin-left属性值应该是 ，16px但事实并非如此。计算值确实是48px。为什么？

当 的值font-size设置为时3em，浏览器会计算一个 的值48px（16px * 3假设浏览器默认字体大小不变）。之后，您将margin-left属性声明为1em，浏览器会读取此语句：使用此元素的默认字体大小，在本例中为48px。当我们将此值增加到 时，2em浏览器将计算96px属性margin-left。

main {
    font-size: 3em;    /* 48px computed by the browser */
    margin-left: 1em;  /* This will also result in 48px */
}

根据上面的代码片段，如果您决定添加一个padding-bottom值，那么计算的0.5em值是多少？

无需在浏览器中检查，以下代码片段中font-size和的计算值是多少？padding-bottom

main {
    font-size: 32px;
    margin-left: 1em;
    padding-bottom: 0.5em;
}

相对单位

相对单位，顾名思义，是指与其他单位或自身相关的单位。它们在创建可随浏览器视口缩放的响应式排版时非常有用。

您可以阅读题为“精确控制响应式排版”的文章。

CSS 变量

大多数编程语言都有变量。CSS 也具有变量，可以简化开发人员的工作流程并节省代码库中的重复工作。

声明变量后，您可以在代码库中的适当位置使用它的值。如果此变量值发生更改，则更改将反映在代码库中使用它的任何位置。

看一下下面的例子：

:root {
    --font-color: #1560bd;
    --general-margin: 20px;
}

main {
    color: var(--font-color);
    margin: var(--general-margin);
}

无论您是第一次学习 CSS变量还是已经在使用它们，您都应该阅读@adactio的以下帖子，其中讨论了 CSS 变量和 CSS 级联的行为。

CSS 自定义属性和级联

杰里米·基思（Jeremy Keith）・20年6月13日

#css #自定义 #属性 #级联

如果您正在使用 SCSS 之类的预处理器，请查看 Ana Tudor 在css-tricks上发表的文章“当 Sass 和新 CSS 功能发生冲突时”。

这篇文章讨论了 CSS 变量和Sass之间的冲突。她在其中详述的内容在本文发布时仍然有效。

函数attr​

该attr函数是 CSS 中可用函数的一部分，其他函数包括、、calc等。该函数用于从 HTML 元素中提取属性，然后使用 CSS 进行操作。它的用例有很多，但我首先想到的是：为损坏的图像添加样式。urlmaxminattr

有时候图片加载失败，您可以自定义用户在图片位置看到的显示内容。主要功能是attr提取图片alt属性（如果存在）的函数。

.image-container {
    postion: relative; /* Necessary to position the alt text */
}

.image-selector {
    display: block;
    position: relative;

    /* Include image width, this is important */
}

/* For Chrome browsers*/
.image-selector::before {
    content: " ";
    background-color: #eee;
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    border: 1px dashed #aaa;
    border-radius: 4px;
}

.image-selector::after {
    content: attr(alt);
    position: absolute;
    width: 100%;
    height: 100%;
    top: 1px;
    left: 0px;
    text-align: center;
    font-weight: bold;
}

/**
 * The method for styling broken images using
 *  pseudo-elements works in both Firefox and Chrome
 *  browser, but the only defect in this approach is
 *  that, in Firefox the alt text of the image still
 *  shows alongside the alt text generated using CSS content
 *  property, but directly targeting the alt attribute
 *  works.
 */
.image-selector[alt] {
    text-align: center;
    font-weight: bold;
    color: #999;
}

如果图像损坏，您将得到类似于下图的内容。

艺术

你可能认为 CSS 只是用来设计网页样式的，但它其实可以用来创作精美绝伦的艺术作品。可能性无穷无尽，只有你的想象力才能限制你。

下面这支笔的标题是：“特洛伊天际线”。它是由Jordi Rué仅使用 HTML 和 CSS 创建的。

这是另一幅由Ben Evans仅使用 HTML 和 CSS 创建的风景图像。

最后，戴安娜·A·史密斯(Diana A. Smith)用 HTML 和 CSS 制作了一幅名为PureCSS Gaze的文艺复兴时期画作。

您可以查看她的 GitHub repo 来获取源代码：

结论

CSS 所能实现的一切，只受限于你的想象力。祝你玩得开心！

2020 年 8 月 8 日更新：更新了损坏图像样式的代码。