使用 CSS 选择器和属性为网页设置主题样式

moboyou 2025-06-20 19:00 24 浏览

层叠样式表 (CSS) 是一种编程语言，可用于确定电子文档的设计。借助简单说明（以清晰的源代码形式呈现），可以根据需要调整布局、颜色和版式等网站元素。由于级联样式表，文档的语义结构和内容不受影响。 CSS 出现于 20 世纪 90 年代中期，现在被认为是万维网上的标准样式表语言。

什么是 CSS？

CSS 与 HTML 一样，是万维网的核心语言之一。当您使用 HTML 将文本添加到网站并按语义构建其结构时，您可以使用 CSS 定义其内容的设计。虽然 HTML 和 CSS 结合使用，但 CSS 设计指令和 HTML 元素是分开存在的。这意味着即使没有 CSS，机器也可以读取电子文档。在 CSS 的帮助下，浏览器内容可以在视觉上准备好并以吸引人的方式呈现。

CSS 是一种“生活标准”，由万维网联盟继续开发。因此，总是有新的功能和实际应用有待发现。广泛应用的样式表语言出现于 20 世纪 90 年代。使用样式表来显示 Web 内容的想法在当时已不再是全新的。但 CSS 与 HTML 中已存在的其他面向显示的元素在一个重要方面有所不同：用户现在可以选择为跨多个文档和单个样式表的元素组定义设计规则。

定义：CSS（层叠样式表）
用于网站视觉设计的编程语言。例如，使用层叠样式表，您可以确定显示 HTML 元素的字体、大小或颜色。

CSS 的优点和应用领域

一个成功的网站不仅取决于内容，还取决于良好的设计。用户很快就会对不用户友好或结构良好的网站失去兴趣。在这里，CSS 提供了一系列纯 HTML 中不提供的设计选项。

例如，CSS 允许您集中控制某些规范。这意味着可以使用单个命令来识别单个文档中的相似元素（例如所有超链接或图像）并对其进行格式化。设计指令不必采用 HTML 文档本身内部样式表的形式。如果将 CSS 指令保存在外部样式表（即单独的文件）中，则这也可以用于其他文档。

除了与 HTML 元素的颜色、形状和排版相关的基本显示指令外，CSS 中现在还有更复杂的模块。例如，使用这些，您可以根据输出媒体定义动画或不同的表示形式。这样，可以为所有可能的媒体以相同的方式准备相同的 HTML 文档。由于本文档中的内容和设计是分开的，因此网站的代码更加清晰。相关的样式语言 SASS 提供了更多的可能性，但它并没有完全取代 CSS。

CSS 语句的结构

CSS 语句确定电子文档中的元素应具有的值或属性。在其基本结构中，该指令由选择器和大括号组成。声明列在括号内，并用分号分隔。每个声明由名称、冒号和特定值组成。在最终声明之后和右括号之前，可以添加另一个分号，但这不是强制性的。例如，下面示例中的 CSS 指令要求标题 h1 以蓝色显示，字体大小为 12：

h1 {color:blue; font-size:12px}

如何将 CSS 集成到您的网站中？

可以使用内部和外部样式表将 CSS 合并到电子文档中。此外，可以使用内联样式将属性直接放置在元素的 HTML 源代码中。下面，我们概述了将 CSS 集成到 HTML 中的三种方法。

外部样式表

在外部样式表中，CSS 指令通过“.css”结尾在外部文件中定义，并通过“link”标签集成到 HTML 文件中。这是最常见的方法，因为内容和设计完全分开，并且可以轻松进行更改。该链接在 HTML 文档的“head”区域中创建，如下所示：

<!DOCTYPE html>
  <html>
  <head>
  <link rel="stylesheet" href="stylesheet.css">
    </head>
<body>
    <h1>这是一个标题</h1>
  <p>这是一个段落</p>
</body>
</html>

内部样式表

您可以在此处将所有 CSS 指令添加到 HTML 文件中。请注意，这些仅适用于相关文件。对于内部样式表，将“style”元素插入 HTML 文档的“head”区域，如下所示：

<!DOCTYPE html>
  <html>
  <head>
  <style>
  h1 {color:blue; font-size:12px;}</style></head>
  <body>
  <h1>这是一个标题</h1>
<p>这是一个段落</p>
  </body>
</html>

内联样式

与内部样式表一样，CSS 指令包含在 HTML 文件中。然而，有一个重要的区别：相应的属性直接位于元素的开始标记中，并且不适用于任何其他元素。如果您不想进行一般设计说明，则此方法特别有用。

<!DOCTYPE html>
  <html>
  <body>
  <h1 style="color:blue; font-size:12px;">这是一个标题</h1>
<p>这是一个段落</p>
</body>
</html>

CSS 和 HTML 的交互

上面的例子表明 CSS 只能与经典的 HTML 结构结合使用。由于 HTML 通过段落、列表和表格构建内容，而 CSS 负责视觉设计，因此这两种网络语言相辅相成，并以这种方式紧密相连。编写级联样式表通常围绕设计“盒子”进行。 HTML 文档的结构基于嵌套原则，其中各个元素像盒子一样相互叠放。网站上占用空间的每个“盒子”都具有以下属性：

padding：元素内容周围的空间
border：位于 padding 外部的线
margin：边框外的空间

然后通过指定大小、形状和颜色来格式化这些“框”。除了这些简单的属性之外，还有更复杂的 CSS 指令，用于在文本中插入阴影、添加图像过滤功能以及突出显示表单和其他元素。

一旦您了解了样式表语言的基本原理，它们的应用就足够简单了。了解有关 CSS 顶级技巧的更多信息，这些技巧将使您的网站看起来更加专业。

css基础选择器

上一篇：前端开发避坑指南:每天都能用的 CSS3/Less/Sass 实战技巧
下一篇：初学vue3, 全是黑盒子,vue3知识点汇总

使用 CSS 选择器和属性为网页设置主题样式

什么是 CSS？

CSS 的优点和应用领域

CSS 语句的结构

如何将 CSS 集成到您的网站中？

外部样式表

内部样式表

内联样式

CSS 和 HTML 的交互

相关推荐

Linux环境中查看Oracle错误和警告日志信息

絮语----工作四年的碎碎念

SQL 中的 (+)用法

oracle常见问题处理

MYSQL经典面试题汇总

医院信息系统突发应急演练记录

Windows 11:已知问题和已解决问题列表(更新时间:2022年1月)

最全面的IBMS系统集成系统技术规格书，赶紧收藏起来!

苹果停止更新Windows版QuickTime!

Linux下开源BI工具Metabase本地化安装及配置详解