CSS简介

CSS是定义HTML页面在浏览器中的视觉外观的语言。它发展迅速，而且由于有了最新功能，CSS从未如此简单易用

什么是CSS

CSS（的缩写级联样式表）是我们用来设置HTML文件样式的语言，它告诉浏览器它应如何呈现页面上的元素。

它是出于对网页进行样式设置的需要而开发的。在引入CSS之前，人们想要一种样式化网页的方式，这些网页在当时看起来都非常相似且具有“学术性”。就个性化而言，您不能做太多事情。

HTML 3.2引入了将颜色内联定义为HTML元素属性的选项，以及诸如center和font，但很快就升级到了远非理想的境地😱。

CSS使我们能够将所有与表示相关的内容从HTML移到CSS，以便HTML可以恢复为定义文档结构的格式，而不是浏览器中的外观。

CSS不断发展，随着新的惯用CSS技术的出现和浏览器的改变，您5年前使用的CSS可能已经过时了。

CSS简史

在继续之前，我想简要回顾一下CSS的历史。

CSS的产生是出于对网页样式的需要。在引入CSS之前，人们想要一种样式化网页的方式，这些网页在当时看起来都非常相似且具有“学术性”。就个性化而言，您不能做太多事情。

HTML 3.2引入了将颜色内联定义为HTML元素属性的选项，以及诸如center和font，但这种情况很快就升级到了远非理想的境地。

CSS使我们能够将所有与表示相关的内容从HTML移到CSS，以便HTML可以恢复为定义文档结构的格式，而不是浏览器中的外观。

CSS不断发展，随着新的惯用CSS技术的出现和浏览器的改变，您5年前使用的CSS可能已经过时了。

很难想象CSS诞生的时代以及网络的不同之处。

当时，我们有几种竞争的浏览器，主要的是Internet Explorer或Netscape Navigator。

页面使用HTML设置样式，并带有特殊的呈现标记，例如bold和特殊属性，其中大多数现已弃用。

这意味着您的定制机会有限。

大部分样式决定留给浏览器。

另外，您为其中一个站点专门构建了一个站点，因为每个站点都引入了不同的非标准标签，以提供更多的功能和机会。

很快，人们意识到了一种需要在所有浏览器上都可以使用的样式页面的方法。

在1994年提出最初的想法之后，CSS于1996年发布了CSS Level 1（“ CSS 1”）建议书，并首次发布。

CSS Level 2（“ CSS 2”）于1998年发布。

从那时起，就开始了CSS级别3的工作。CSS工作组决定将每个功能分开，并分别在模块中进行处理。

浏览器在实现CSS方面并不是特别快。我们必须等到2002年，才能使第一个浏览器实现完整的CSS规范：适用于Mac的IE，如下面的CSS Tricks文章所述：https://css-tricks.com/look-back-history-css/

Internet Explorer从一开始就错误地实现了框模型，这导致多年来试图在浏览器中一致地应用相同样式的痛苦。我们必须使用各种技巧和黑客手段来使浏览器呈现所需的东西。

今天的情况好多了。大多数情况下，我们无需考虑怪癖就可以使用CSS标准，而CSS从未如此强大。

我们现在没有CSS的正式发布号，但是CSS工作组发布了一些模块的“快照”，这些模块目前被认为是稳定的，可以在浏览器中使用。这是2018年以来的最新快照：https://www.w3.org/TR/css-2018/

CSS Level 2仍然是我们今天编写的CSS的基础，并且我们在其之上构建了更多功能。

CSS看起来如何

CSS规则集有一部分叫做选择器，另一部分称为宣言。声明中包含各种规则，每个由财产和价值。

在这个例子中p是选择器，并应用一个规则来设置值20px到font-size财产：

p {
  font-size: 20px;
}

多个规则一个接一个地堆叠：

p {
  font-size: 20px;
}
a {
color: blue;
}

选择器可以定位一个或多个项目：

p, a {
  font-size: 20px;
}

而且它可以定位到HTML标签（如上述）或包含某些class属性且包含以下内容的HTML元素：.my-class，或具有特定id具有属性#my-id。

使用更高级的选择器，您可以选择属性与特定值匹配的项，也可以选择对伪类进行响应的项（稍后会详细介绍）

分号

每个CSS规则都以分号结尾。分号是不是可选，除非在最后一条规则之后，但我建议始终使用它们以保持一致性，并避免在添加其他属性而忘记在前一行添加分号的情况下出错。

格式和缩进

没有固定的格式化规则。此CSS有效：

      p
      {
  font-size:           20px   ;
                      }
a{color:blue;}

但很痛苦。遵循一些约定，例如您在上面的示例中看到的约定：将选择器和右方括号粘在左边，每个规则缩进2个空格，将选择符的同一行上的左方括号隔开一个空格。

正确和一致地使用间距和缩进有助于理解代码。

如何在网页中加载CSS

可以通过3种方式将CSS加载到页面中：style页面中的标签head，带有一个外部CSS文件，并内联在标记中。 CSS以不同方式附加到HTML页面。

1：使用`link`标签

这link标签是包含CSS文件的方式。这是按预期使用CSS的首选方式：站点的所有页面都包含一个CSS文件，更改该文件的一行会影响站点中所有页面的显示。

要使用此方法，请添加一个link用href指向要包含的CSS文件的属性。您将其添加到head网站的代码（不在body标签）：

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

这rel和type属性也是必需的，因为它们告诉浏览器我们要链接到哪种文件。

2：使用`style`标签

而不是使用link标记指向包含我们CSS的单独样式表，我们可以将CSS直接添加到style标签。这是语法：

<style>
...our CSS...
</style>

使用这种方法，我们可以避免创建单独的CSS文件。我发现这是一种在将CSS“形式化”到单独文件之前进行实验或在文件中添加一行特殊的CSS的好方法。

3：内联样式

内联样式是将CSS添加到页面的第三种方法。我们可以添加一个style属性分配给任何HTML标记，并在其中添加CSS。

<div style="">...</div>

例子：

<div style="background-color: yellow">...</div>

免费下载我的CSS手册