CSS：从零到精通媒体查询

2025-05-24

CSS：从零开始到大师

媒体查询

CSS 定义了网站上的显示效果。HTML 是内容，JavaScript 添加了交互，但最终的外观还是由 CSS 决定。CSS 功能强大，并且内置了大量优秀的功能。这篇文章将从入门语法开始，逐步讲解如何创建布局，以及如何让网站响应式！

句法

CSS 由选择器和声明组成。选择器告诉我们要将样式应用到哪些元素。声明是将应用于该元素的实际样式，即括号内的所有内容。在这些声明中，我们有属性和值。属性是我们要应用的样式类型，值是我们实际应用的内容。

上面的 CSS 代码意思是，将所有 h1 元素的字体颜色设为蓝色。h1是选择器，括号内的所有内容是声明，属性是 color，值是 blue。

CSS 语法的最后一部分是注释——浏览器会忽略这些注释——它们只是用来帮助人们记录代码的。CSS 中的注释如下所示：

/* this is a comment */
Enter fullscreen mode Exit fullscreen mode

选择器

在 CSS 中，我们会使用选择器来指定要设置样式的 HTML 元素。有时，我们会选择页面上的所有元素。有时，我们只想选择某些元素。

有时，我们会想要选择页面上某个元素的每个实例，例如，所有h2。我们可以通过元素名称来选择元素！

h2 {
  color: blue;
  font-family: sans-serif;
}
Enter fullscreen mode Exit fullscreen mode

有时，我们反而想要选择元素组——比如说，我们只想将某些段落加粗，我们可以使用类来区分这些段落。

<h2 class="center">Hello World</h2>
<h2 class="center">Hello World</h2>
<h2>Hello World</h2>
Enter fullscreen mode Exit fullscreen mode

我们通过在 CSS 中的类名前放置一个来区分元素和类选择器.——这样 CSS 就知道我们正在寻找一个名为的类center而不是一个元素！

.center {
  text-align: center;
}
Enter fullscreen mode Exit fullscreen mode

现在，前两个h2带有该类的标签center将居中，而第三个没有该类的标签仍然看起来正常。

还有一些更复杂的选择器，例如：

h1, h2, h3 {
  /* The commas allow you to group selectors! In this case, all h1-h3's will be blue */
  color: blue;
}

h3:hover {
  /* pseudo-classes allow us to select elements in certain states. So, in this case, when an h3 is hovered, it will be pink! */
  color: pink;
}
Enter fullscreen mode Exit fullscreen mode

这里有更多关于伪类的内容，这里有一个很棒的游戏可以练习更复杂的选择器。

您可能已将 ID 用于 JavaScript 代码或其他 Web 开发；但是，我不建议将它们用于 CSS，因为它们仅用于一个元素，并且您希望您的代码可重复使用！

特性

让我们来谈谈 CSS 中的基本属性以及如何使用它们！我们将在本文的后面部分讨论布局，这部分可能比较棘手，但现在我们先来讨论一下颜色和文本样式！

颜色

有几种方法可以使用 CSS 为文档添加颜色，包括文本和背景。此外，还有几种方法可以在 CSS 中表示颜色。

第一种是使用命名颜色。CSS 中有140 种颜色带有名称，您只需输入名称即可使用它们！

.red {
  background-color: tomato;
}
Enter fullscreen mode Exit fullscreen mode

但是——颜色远不止 140 种，所以我们也有一些更复杂的方法来表示更多颜色。这些方法基于构成颜色的红、绿、蓝三色的比例。假设你有三盏灯，每种颜色一盏，还有一个背景。如果三盏灯都熄灭，背景就是黑色。如果三盏灯都亮着，背景就是白色。如果其中一盏灯亮着，而其他灯都亮着，背景就是白色。然后，这些灯可以组合起来，创造出任何颜色。

彩色光视觉

RGB、RGBA 和十六进制颜色均源自上述颜色组合。红、绿、蓝“光”的每种颜色都可以赋值 0 到 255 之间的值，因此每个值都可以存储在一个字节中。RGB 和 RGBA 使用十进制数来表示值，而十六进制值则使用十六进制。RGBA 值还包含“alpha”值，即颜色的不透明度。

您可以使用上述系统为文本、背景、边框等添加颜色！

文本

CSS 的另一个非常重要的功能是设置文本样式。您可以选择字体、文本间距和大小。

大多数电脑都内置了一些字体，这些字体被称为网络安全字体。您也可以通过添加字体文件来添加您喜欢的字体。您可以使用Google Fonts等网站来找到您喜欢的网站字体。

body {
  /* if the user's computer has Arial, use that, if not Helvetica, 
  then fall back to the operating system's default sans-serif font */
    font-family: Arial, Helvetica, sans-serif;
}
Enter fullscreen mode Exit fullscreen mode

您还可以通过几种不同的方式更改文本大小——首先是像素——这通常是最适合初学者的；然后是 em 和 rem，它们允许您以不同的方式缩放字体。您可以在这里阅读更多相关信息。

盒子模型

CSS 使用盒模型。首先，你需要内容。如果要在内容周围的背景或边框内添加间距，可以使用内边距 (padding)。然后，你可以添加边框，边框通常会采用不同的颜色和图案。最后，在背景和边框之外是外边距 (margin)——也就是元素与页面上其他元素之间的间距。

一个快速实用的边距代码片段是margin: 0 auto;,，它允许你将大多数元素水平居中。0 值表示元素顶部和底部没有边距。Auto 会在元素的两侧添加相等的边距，使其在其容器中居中。

展示

其中一个比较重要的 CSS 属性是display。这里有一些您可以使用的值。第一个是none隐藏内容。这有助于在不同尺寸的屏幕上或由于 JavaScript 事件而隐藏某些内容。inline删除元素后的换行符，这也意味着添加高度和宽度不会产生效果。block意味着下一个元素将位于下一行。inline-block类似于内联，但您可以将高度和宽度应用于元素。固定和粘性显示使元素保持在位置这些通常是最常用和最传统的显示属性，然而，最近的两个属性确实改变了布局游戏。

布局

通常，CSS 中最棘手的部分之一是创建网页布局。由于 CSS Grid 和 Flexbox 这两个较新的 CSS 显示属性，让布局正确对齐比现在困难得多。如果您想更深入地学习它们，CSS Tricks 提供了关于Grid和Flexbox 的精彩指南。我也会在这里分享一些技巧！

要使元素水平居中，通常可以使用text-align: center;或margin: 0 auto;。但是，垂直居中曾经更加困难。好消息！弹性盒让这变得容易多了。将下面的代码片段放置在您要居中的元素的父级上，即可使其水平和垂直居中。

parent {
  display: flex;
  align-items: center;
  justify-content: center;
}
Enter fullscreen mode Exit fullscreen mode

奖励：这是该示例的视频版本！

您可以使用 CSS 网格很好地创建元素行。

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}
Enter fullscreen mode Exit fullscreen mode

上述代码在页面上生成了三列大小相同的网格。网格间隙用于在每列之间添加间距。

奖励：这是该示例的视频版本！

此外，它们使“圣杯”三列加页眉和页脚布局变得更加容易 - 查看这篇文章，了解如何使用 CSS Grid 实现它的几种方法！

默认值

有时，您的页面上可能会出现一些看似凭空而来的样式。实际上，浏览器已经为您预先写好了某些样式。例如，正文部分有 8px 的外边距，表格块有 2px 的边框，并且标题部分使用了更大的字体。有时您不需要这些预加载的样式，因此您可以覆盖它们！

级联

CSS 中一个比较臭名昭著且偶尔引起争议的特性是级联。它模仿了面向对象编程中的继承，并定义了样式如何相互覆盖。如果开发者使用 CSS 库（例如 Bootstrap），级联可能会更加难以理解。

CSS 选择器具有各种级别的特异性，它们定义了在应用更多样式时如何覆盖样式。

例如，如果我们有以下 CSS 代码：

body {
  font-family: sans-serif;
}
Enter fullscreen mode Exit fullscreen mode

body 标签内的所有文本都将是无衬线的——即使它们也位于 h1、p 或任何其他标签内。但是，有时我们希望 h1 标签改为衬线，我们可以像这样添加：

h1 {
  font-family: serif;
}
Enter fullscreen mode Exit fullscreen mode

现在我们的 h1 有了衬线字体，正文内的所有其他标签仍然是无衬线字体。

此外，不同的选择器具有不同的特异性级别。ID 是最具体的，但我通常不会在 CSS 中使用它们，因为使用它们不太模块化，其次是类，然后是元素本身，最后是它们的父元素。因此，如果我为某个类添加样式，它将覆盖添加到该元素的样式。使用级联可能比较棘手，但它可以提高 CSS 的可复用性。

媒体查询

有时你会希望某些属性根据屏幕尺寸而变化。你可以使用媒体查询来实现。

以下 CSS 选择器仅适用于屏幕宽度小于 800px 的情况。您可以先将宽度更改为 min-width 以适应移动设备！

@media only screen and (max-width: 800px) {
  body {
     background-color: MediumOrchid;
  }
}
Enter fullscreen mode Exit fullscreen mode

动画

CSS 允许用户使用关键帧创建动画。您可以指定动画中特定点的属性、动画的持续时间以及执行的计时函数。

此外，您还可以添加在添加伪选择器时应用的变换，例如鼠标悬停在元素上时。这些变换的性能非常出色！

阅读更多

这篇文章只是粗略地介绍了 CSS 的所有功能，它功能强大，是 Web 的重要组成部分。以下是一些资源，您可以深入了解 CSS。

文章来源：https://dev.to/aspittel/css-from-zero-to-hero-3o16
Devto 翻译
PREV
极限改造：代码版
NEXT
使用 Vanilla JavaScript 构建 Web 组件