级联样式表 (CSS) 简介

首字母缩略词 CSS 代表“级联样式表”。 CSS 用于设计所有设备上使用的网站和应用程序。样式表通常与 HTML 和前端编程语言(如 JavaScript)一起使用。

CSS 可以通过以下三种方式之一实现——内联、内部或外部。尽管外部 CSS 是推荐的方法,但在某些情况下,剩余的两种实现方法可能更实用。

在本教程文章中,您将学习 CSS 的所有基础知识,以便立即开始构建应用程序。

何时使用不同的 CSS 实现方法

当目的是在网页上仅包含一两个样式首选项以及其他一些小众案例时,内联 CSS 是理想的实现方法。内联 CSS 方法利用style关键字和 CSS 属性来实现特定结果。

如果您打算将单个标题的颜色更改为红色,那么内联 CSS 可能是一个不错的选择。如上所述,一个利基案例是创建主要由表格组成的 HTML 布局(一种过时的做法)。

使用内联 CSS 示例

<h1 style="color: red;">Main Heading</h1>

上面的代码行将显示涂有红色的文本“Main Heading”。这很可能是使用内联 CSS 的唯一实际原因之一,因为在给定的网页上通常只有一个h1元素。

如果您打算将网页上的所有h2元素涂上黄色。您必须在每个元素上使用 CSS样式关键字以及颜色属性及其值(黄色)。但是,完成此任务的更有效方法是使用内部 CSS。

使用内部 CSS 示例

<style>
h2{
color: yellow;
}
</style>

将上面的代码放在 HTML 文件的<head>标记中将确保该文件中的所有h2元素都涂上黄色。内部 CSS 与 HTML 代码分离,这使得该方法更加高效,因为它有助于定位各种元素组。

那么为什么外部 CSS 实现方式仍然是最推荐的方式呢?关注点分离。使用外部 CSS,您的 CSS 代码与 HTML 代码完全分离,这确保了大型项目的可扩展性并使测试过程更加高效。

使用外部 CSS 示例


<link rel="stylesheet" href="css_file_name">

在 HTML 文件的<head>标签中插入上面的代码行将有助于使用外部 CSS 方法对网页进行样式设置。上面代码唯一会改变的方面是分配给href属性的值,它应该始终是 CSS 文件的名称(包括 .css 扩展名)。

相关:什么是层叠样式表以及 CSS 用于什么?将 CSS 文件链接到 HTML 文档后,您现在可以开始在 CSS 文件中编写 CSS 代码。此时,上面的内部 CSS 示例和外部 CSS 之间的唯一区别是样式标记。因此,在 CSS 文件中插入以下代码将产生与上面的内部 CSS 示例相同的结果。

 h2{
color: yellow;
}

探索 CSS 基本结构

基本的 CSS 声明包含七个基本元素,如下例所示。它们都协同工作以实现一组特定的样式首选项。

选择器

在 CSS 声明中,选择器可以是idclass 、元素,或者在某些特殊情况下,可以是伪选择器。在上面的 CSS 结构中, a元素用作选择器,这意味着网页上的所有链接都将被涂上红色。本质上,选择器的目的是确定应该设置样式的元素。

声明开始和结束

声明开始和结束很重要,因为它们包含了适用于特定选择器的所有样式首选项。这两个元素都由一对开大括号和闭大括号表示。记住使用声明开始或声明结束的一个好方法是记住,如果您有一个开大括号,则应该有一个相应的闭大括号,反之亦然。

物业

声明结构中的 CSS 属性可以是一百多种不同属性类型中的任何一种。上面 CSS 结构中使用的属性类型是颜色,该属性针对网页上的文本。如果您想了解更多信息,请查看我们的 CSS 属性及其用途的综合列表。

属性/值分隔符

尽管它看起来很小而且无关紧要,但属性/值分隔符与 CSS 结构中的所有其他元素一样重要。如果有一个实例忘记了这个元素,整个 CSS 声明将不会执行。

价值

CSS 属性值表示您要应用于给定属性的确切样式。可供使用的值取决于属性类型。例如,上面结构中使用的属性是color ,这意味着只有一种类型的值可以应用于此属性,即颜色名称。颜色值可以以四种形式之一呈现:字值(如上例所示)、十六进制值、HSL(色相、饱和度、亮度)值或 RGB(红、绿、蓝)值。

声明分隔符

声明分隔符表示您处于特定样式声明的末尾。在上面的结构中,只有一个声明分隔符,但可以有更多。这完全取决于您打算在特定classid或元素上使用的 CSS 属性的数量。

什么是 ID 和类?

idsclasses在 CSS 样式过程中扮演着重要的角色。与 HTML 元素一样,CSS id在 CSS 声明中用作选择器。但是,id优先于 HTML 元素。

CSS 中的一般规则是,您添加到文件的最后一个样式声明将覆盖之前的样式声明。因此,如果 CSS 文件中有两个带有h2选择器的声明,最后添加的声明会覆盖之前存在的声明。

但是,如果这个h2元素有一个id用作 CSS 声明中的选择器,无论它的位置(之前或之后)以h2元素作为其选择器的 CSS 声明, id声明中的样式首选项将始终优先于元素。简而言之, id将覆盖其他样式选择器。

重要的是要记住,在 CSS 声明中, id以数字符号开头,而类以句号开头。 idclass之间最显着的区别是id是唯一的,而class可以重复。例如,一组相似的<div>标签可以被赋予相同的名;但是,每个<div>标签的id必须是唯一的。

探索不同类型的选择器

选择器分为三种基本类型——单个、多个和嵌套。到目前为止,本文已经广泛地介绍了单个选择器。

使用 CSS 时,有时会希望网页上不同位置的不同元素具有相似的样式,这与应用于整个网页的一般样式不同。在这些情况下,了解如何使用多个选择器会很有帮助。

基本 HTML 模板示例


<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="contianer">
<div class="siteInfor" id="Welcome">
<h2>Welcome</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Impedit odit voluptates
dignissimos voluptatibus tenetur. <span> Repudiandae, animi corporis! </span> Architecto
tempora voluptates nulla officia placeat quisquam facere at! Quod dolore doloribus eos!
</p>
</div>

<div class="siteInfor" id="About">
<h2>About</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Impedit odit voluptates
dignissimos voluptatibus tenetur. <span> Repudiandae, animi corporis! </span> Architecto
tempora voluptates nulla officia placeat quisquam facere at! Quod dolore doloribus eos!
</p>
</div>

<div class="content" id="article-1">
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore aspernatur vel dicta quod quibusdam!
Ea delectus sit, laboriosam eos aperiam asperiores? At ad laborum illo inventore quos est dolores
impedit fugit asperiores repellendus harum maxime voluptate sit nulla eaque officiis fuga animi,
perferendis in earum iure dolorum laboriosam enim reiciendis! Eum cum delectus est tenetur corrupti
mollitia, minima, magni at iusto id necessitatibus harum ratione, ipsum doloremque deleniti ex eligendi
impedit hic maxime? Eius modi optio ad, nisi tempora sapiente?
</p>
</div>

<div class="content" id="article-2">
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore aspernatur vel dicta quod quibusdam!
Ea delectus sit, laboriosam eos aperiam asperiores? At ad laborum illo inventore quos est dolores
impedit fugit asperiores repellendus harum maxime voluptate sit nulla eaque officiis fuga animi,
perferendis in earum iure dolorum laboriosam enim reiciendis! Eum cum delectus est tenetur corrupti
mollitia, minima, magni at iusto id necessitatibus harum ratione, ipsum doloremque deleniti ex eligendi
impedit hic maxime? Eius modi optio ad, nisi tempora sapiente?
</p>
</div>

</div>

</body>
</html>

如果您仔细查看上面的 HTML 文件,您将看到idsclasses之间存在的动态关系。参考上面的文件,如果您只想将相同的样式应用于关于部分和网页上的文章,以下 CSS 代码将完成此操作。

使用多个选择器示例


#About, .content{
color: white;
background-color: darkcyan;
}

使用多个选择器时,应始终使用逗号分隔每个选择器。上面的例子有两个选择器,一个id和一个class 。如果about id后面的逗号缺失,CSS 声明将不会执行。

回到上面的基本 HTML 模板示例,有两个<span>标签——一个在欢迎部分,另一个在关于部分。如果您的目标是仅针对这些<span>标签之一,则嵌套选择器应该是您的首选方法。

使用嵌套选择器示例

#Welcome p span{
color: red;
}

上面的嵌套选择器包含一个id和两个 HTML 元素。从上面的示例中可以看出,嵌套选择器为您提供了定位组中特定元素的能力。

因此,只有带有welcome iddiv<p>标签中的span部分会被涂上红色。

如何在 CSS 中写注释

无论您使用的是 CSS 之类的样式语言还是编程语言,您都绝对应该知道如何编写注释。在多个开发人员一起工作的企业级项目中,注释是必不可少的,并且在进行小规模开发时也很有用。

CSS 注释包含两个正斜杠、两个星号和一个注释部分。

CSS 单行注释示例

/* This is how you write a single line comment in CSS */

CSS 多行注释示例


/*
This is how you write
a multi-line comment
in CSS
*/

下一步是什么?

本文为您提供了 CSS 的基础组件。您现在可以使用标识:

  • 三种CSS实现方法中的任何一种
  • CSS 声明中的所有元素
  • 选择器的三种基本类型
  • CSS 注释

然而,这只是开始。 CSS 有几个框架可以帮助您更好地理解该语言。唯一的挑战是决定哪一个最适合您。