什么是 CSS？

已发表: 2019-03-08

最后更新于 2020 年 4 月 22 日

Cascading Style Sheets for the web 在万维网 (www) 中，CSS 是 Cascading Style Sheets 的首字母缩写。 CSS 是一种样式表语言，用于描述以标记语言（通常是 HTML）编写的文档的呈现方式。 CSS 规定网页的布局和内容如何在屏幕、纸张或其他媒体中显示。 CSS 节省了大量工作，因为它一次控制多个网页的布局。

文档通常是使用 HTML 等标记语言构建的文本文件。呈现文档意味着通过 Chrome、Firefox、Opera、Microsoft Edge 等网络浏览器将其转换为在计算机屏幕上直观呈现的可用形式。 Web 浏览器将 CSS 规则应用于文档以影响它们的显示方式。

本博客是对层叠样式表 (CSS) 的一般介绍，定义了它们是什么，以及它们在 Web 上的用途。这是一个介绍，它回答了关于它的基本问题，而不是深入到奇妙而有趣的 CSS 世界。

那！公司为世界各地的代理机构提供迷人而有效的网页设计服务。详细了解我们的白标网页设计服务以及我们如何帮助您和您的客户创建或改善他们的网络形象。今天就开始吧！

CSS 始于 1994 年。它由 W3C 创建和维护。 W3C 的 CSS 工作组创建称为规范的文档。在规范经过 W3C 成员讨论和正式批准后，它们成为推荐。

级联样式表 1 级 (CSS1) 于 1996 年 12 月作为 W3C 的推荐标准出现。CSS2 于 1998 年 5 月成为 W3C 的推荐标准。1998 年开始的 CSS 级别 3 仍在开发中。 CSS3 是 CSS2 规范和称为模块的新规范的组合。 CSS 规范由一组属性组成，这些属性的值设置为更新 HTML 内容的显示方式。

CSS 来简化呈现我们的标记语言文档的过程。您可以控制各种属性，例如：

文字的颜色，
字体风格，
段落之间的间距，
列的大小和布局方式，
背景图像或颜色，
布局设计，
根据屏幕尺寸（媒体查询）显示的变化。

我们如何应用 CSS？

Cascading Style Sheets for the web 有四种方法可以将样式应用于我们的 HTML 文档。最常用的方法是嵌入在 HTML 文档中的 <style> 元素中的外部 CSS 文件。如果指定了不同的工作表样式，样式将级联成具有以下优先级的新样式（数字越大不重要）：

优先级 4：浏览器默认

浏览器包含一些为我们预先编写的样式。有时我们不想要这些预加载的样式，所以我们可以覆盖它们。有些浏览器不支持现代 CSS 规范，或者有自己的 CSS 属性使用形式。因此，我们在 HTML 文档中编写 CSS 时应该小心。

That! Company White Label Services

优先级 3：外部样式表文件

 <link rel="stylesheet" type="text/css" href="style.css" />

优先级 2：嵌入在 HTML 文档中

我们可以使用 <style> 元素将 CSS 规则放入 HTML 文档中以包含规则。 <style>…</style> 标签放置在 <head>…</head> 标签内。

 <风格>

 选择器 {

 适当的价值;

 </style>

优先级 1：在我们的 HTML 元素中内联

我们可以使用任何 HTML 元素的 style 属性来定义样式规则。这些规则将仅应用于该元素。

 <p>世界你好！</p>

CSS 规则覆盖

我们已经描述了将样式表规则应用于我们的 HTML 文档的四种方法。这是覆盖任何样式表规则的规则：

任何内联样式表都具有最高优先级。因此，它将覆盖 <style>...</style> 标记中定义的任何规则或任何外部样式表文件中定义的规则。

外部样式表文件中定义的任何规则优先级最低，只有当上述两个规则不适用时，才会应用此文件中定义的规则。

CSS 选择器

CSS 规则由浏览器解释，然后应用于我们 HTML 文档中的相应元素。样式规则由三部分组成：

Selector - 用于根据元素名称、id、类、属性等“查找”（或选择）HTML 元素。
属性 - 是 CSS 的一种样式。它可以是颜色、边框、背景、字体、显示、文本对齐、边距、行距等。
值 - 分配给属性。例如，背景颜色属性的值可以是红色或绿色。

CSS 规则语法

CSS 规则的语法由选择器以及属性和值的声明组成：

 选择器 { 属性：值； }

选择器指向要设置样式的 HTML 元素。

声明块（在花括号中）包含一个或多个用分号分隔的声明。

每个声明都包含一个 CSS 属性名称和一个值，以冒号分隔。

我们可以编写一个 CSS 规则，然后在多个 HTML 元素和文档中重用相同的规则。使用 CSS，我们不需要每次都编写 HTML 内联标签属性，这仅适用于样式化的元素。我们只需编写一个 CSS 规则并将其应用于该标记元素的所有出现。因此，更少的代码意味着更快的页面。

当我们使用外部或嵌入式样式规则时，我们的 HTML 文档的更改和维护很简单。我们只需更改样式规则，HTML 文档中的所有元素都会自动更新。使用 CSS，我们可以通过媒体查询访问多种设备屏幕尺寸。媒体查询允许我们针对不止一种类型的设备优化我们的 HTML 文档。使用相同的 HTML 文档，我们可以呈现不同版本的网页。