CSS 快速入门介绍

Posted on by

与使用 HTML 创建的网站的结构组件一起，CSS 是创建真正独特的交互式 Web 体验不可或缺的一部分。顾名思义，CSS 或级联样式表是更改 HTML 元素的颜色、字体、定位和视觉外观的主要方式。

CSS 通常很复杂，因为许多现代 Web 框架（如React）在其代码中使用稍微修改过的 CSS 版本。同样，其他纯 CSS 引擎也出现了，比如SASS，试图让 CSS 更像一种编程语言。在本介绍中，我们将只关注纯 CSS。

找到 CSS 的地方#

CSS可以在三个主要地方找到：

  • inline styles内联样式：可以在 style 属性中找到附加到单个 HTML 元素的 CSS。
  • 单独的文件：CSS 可以在单独的文件中找到，并包含在 HTML 文档中。
  • inside HTML：可以在 HTML 文件中自己的样式标签中找到 CSS。

以下是一些您可能会在 HTML 中找到 CSS 的示例：

单独的文件，包含在 HTML 文档中：

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

内联样式，在特定的 HTML 元素上：

    <p style="color: red;">A paragraph</p>

在 HTML 内部，在它自己的样式标签中：

    <style type="text/css">
        p {
            color: red;
        }
    </style>

句法#

CSS 有一个非常简单的语法。可以使用选择器选择 HTML 标记。该标记后大括号内的任何内容都将应用于与选择器匹配的任何元素。因此，例如，以下内容会将每个段落更改为红色：

p {
    color: red;
}

如您所见，使用以下语法为特定选择器设置样式：property: value;. 这种单一的属性值组合统称为声明。属性是指 HTML 标记可能具有的特定属性，例如，其周围的填充或其文本的颜色。该值就是该属性的值。上面，该值设置为红色。

CSS 有许多有价值的关键字。对于颜色，红色、绿色、蓝色和其他标准颜色都可以。您还可以使用其他格式，例如十六进制和 rgb，如下所示：

p {
    color: rgb(34, 34, 11);
}
span {
    color: #eeeeee;
}
li {
    color: rgba(24, 24, 11, 0.5);
}
body {
    background: hsl(0, 100%, 50%);
}

其他属性可以使用数值。通常这些可以以像素为单位，但 CSS 有许多它使用的其他 CSS 特定单位。我们不会在这里介绍这些，但是具有数字单位的元素示例如下所示：

p {
    padding: 10px;
}

这将在对象的每一侧添加 10px。使用 padding 和 margin 等属性，每边可能受到不同的影响，您也可以将其拆分为 4。例如，使用 padding，您可以padding: top right bottom left;：. 

p {
    padding: 10px 5px 10px 10px;
}

上面添加了 10px 的内边距，除了右手边，只有 5px。一些属性具有更复杂的值，例如border. 下面给所有段落一个1px的黑色边框：

p {
    border: 1px solid black;
}

您可能会在 CSS 中看到的另一种常见语法是注释，它为开发人员尝试执行的操作提供上下文和注释。注释包含在/*和中*/。

/* We need to give all paragraphs a 1px border */
p {
    border: 1px solid black;
}

接下来，让我们考虑一下选择器。

优先级和特异性#

CSS 的持续主题之一是优先级或特异性。它被称为级联样式表，因为最后的元素具有更高的优先级，即它们将覆盖较早的元素。即下面的示例使div具有红色文本，而不是蓝色。

div {
    color: blue;
}
div {
    color: red;
}

CSS 中的不同元素有不同的优先级。如果两个元素具有相同的优先级，则最后一个元素将覆盖较早的元素。但是，有一些规则。不同的选择器会有不同的score，最高分会覆盖其他样式。

  • Inline Styles内联样式– 直接在 HTML 标签中的 CSS，即style=""得分为 1000。
  • IDs – #selector 会给选择器打 100 分。
  • 类– .selector 将为选择器提供 10 分。
  • 伪元素– :pseudo-element 会给选择器打 10 分。
  • 常规元素– 即li或div的得分为 1。

例子

  • #id label– 1个id，1个项目，总分101
  • #id .name– 1个id，1个班级，总分110
  • div ul li– 3个项目，总分3
  • .name .class #page– 1个id，2个班，总分120

如前所述，较高的分数表示该选择器中的样式将覆盖较早的样式。因此，当想知道为什么某些 CSS 不起作用时，检查样式​​的特殊性很重要。如果您无法更改选择器，您也可以!important在 CSS 中使用关键字。带有的 CSS!important行将覆盖其他 CSS，无论它们的特异性得分如何：

div {
    color: red !important;
}

推荐阅读：