HTML5与CSS3学习笔记【第八章操作样式表】

最新推荐文章于 2024-09-27 06:30:00 发布

Luminous烁

最新推荐文章于 2024-09-27 06:30:00 发布

阅读量862

点赞数

分类专栏： html5 文章标签： css3 html5 学习

本文链接：https://blog.csdn.net/kzpx_1106/article/details/125699999

版权

html5 专栏收录该内容

27 篇文章 1 订阅

订阅专栏

本章介绍了如何创建和使用CSS样式表，包括外部样式表、嵌入样式表和内联样式的创建及应用。外部样式表是最佳实践，可应用于多个页面，方便维护。嵌入样式表适用于单个页面，而内联样式虽然方便快捷，但不推荐频繁使用。此外，还讲述了样式的层叠、顺序以及媒体相关的样式表的使用，强调了保持内容与表现分离的重要性。

摘要由CSDN通过智能技术生成

前言

在开始定义样式表之前，要知道如何创建和使用包含这些样式表的文件。在本章中，你将学习如何创建样式表文件，如何将 CSS应用到多个网页（包括整个网站）、单个页面或单独的 HTML 元素。我们会通过三种方法实现这些应用：外部样式表（首选方法）、嵌入样式表和内联样式（最不可取的方法）。
在这里插入图片描述

8.1.创建外部样式表

外部样式表非常适合给网站上的大多数页面或者所有页面设置一致的外观。可以在一个外部样式表中定义全部样式，然后让网站上的每个页面加载这个外部样式表，从而确保每个页面都有相同的设置。尽管后面你将学到嵌入样式表和内联样式表，但从外部样式表为页面添加样式才是最佳实践，推荐使用这种方法（允许偶尔的例外）。
创建外部样式表的步骤
(1) 在你选择的文本编辑器（参见第一条提示）中创建一个新文档。大多数人使用同一个编辑器创建 HTML 和 CSS 文档。
(2) 为网页定义样式规则，同时，根据需要在 CSS 中添加注释。
(3) 将文档以纯文本格式保存在希望放置的目录中。尽管任何名称都是允许的，但应该为该文件添加 .css 的扩展名，表明这是一个层叠样式表。

8.2.链接到外部样式表

创建了样式表之后，需要将它加载到 HTML 页面中去，从而为内容应用这些样式规则。要做到这一点，最好的方式是链接到样式表。

img {
border: 4px solid red;
}
这是本章前面创建的外部样式表 style.css，简洁起见，省略了 CSS 注释。
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8" />
 <title>El Palau de la Música</title>
<link rel="stylesheet" 
➝ href="style.css" />
</head>
<body>
<article>
 <h1>El Palau de la Música</h1>
 <img src="img/palau.jpg" width="250" 
➝ height="163" alt="El Palau de la Música" /> 
 <img src="img/tickets.jpg" width="87" 
➝ height="163" alt="The Ticket Window" />
 <p>I love the <span lang="es">Palau de la 
➝ Música</span>. It is ornate and gaudy 
➝ and everything that was wonderful 
➝ about modernism. It's also the home 
➝ of the <span lang="es">Orfeó Català 
➝ </span>, where I learned the benefits 
➝ of Moscatell.</p>
</article>
</body>
</html>

link 元素位于 HTML 文档的 head 部分。页面可以包含一个以上的 link
元素，但使用它的次数最好尽可能地少，让页面得以更快地加载。

链接到外部样式表的步骤
(1) 在每个希望使用样式表的 HTML 页面的 head 部分，输入 <link rel=“stylesheet”。
(2) 输入一个空格，然后输入 href=“url.css”，其中url.css 是CSS样式表的位置和名称。
(3) 输入一个空格和 />。（也可以不输入空格，直接输入 >。这两种形式都是 HTML5所允许的，它们的效果也完全一样。）
对外部样式表进行修改时，所有引用它的页面也会自动更新。这是外部样式表的神奇力量！
外部样式表的另一个好处是，一旦浏览器在某个页面加载了它，在随后浏览引用
它的页面时，通常无需再向 Web 服务器请求该文件。浏览器会将它保存到缓存里，也就是保存到用户的计算机里，并使用这个版本的文件。这样做可以加快对页面的加载。不过，不必担心。如果随后对样式表作了修改，再将它传到 Web 服务器，浏览器就会下载更新后的文件，而不是使用缓存的文件（从技术上讲也有例外，但通常不会遇到这种情况）。

8.3.创建嵌入样式表

嵌入样式表是在页面中应用 CSS 的第二种方式。我们在 HTML 页面的 head 部分创建一个 style 元素，其中包含了我们的样式表。由于这些样式只在一个网页里存在，因此不会像外部样式表中的规则那样应用到其他的页面，同时，缓存的好处也不存在了。如上文所述，对于大多数情况，我们推荐使用外部样式表，但理解其他的选择以备不时之需也是很重要的。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8" />
 <title>El Palau de la Música</title>
<style>
img {
border: 4px solid red;
}
</style>
</head>
<body>
<article>
 <h1>El Palau de la Música</h1>
 <img src="img/palau.jpg" width="250" 
➝ height="163" alt="El Palau de la 
➝ Música" />
 <img src="img/tickets.jpg" width="87" 
➝ height="163" alt="The Ticket Window" />
 <p>I love the <span lang="es">Palau de 
➝ la Música</span>. It is ornate and 
➝ gaudy and everything that was 
➝ wonderful about modernism. It's also 
➝ the home of the <span lang="es">Orfeó 
➝ Català </span>, where I learned the 
➝ benefits of Moscatell.</p>
</article>
</body>
</html>

使用嵌入样式表时，style 元素及其包围的样式规则通常位于文档的 head 部分。浏览器对页面的呈现方式与使用外部样式表时是一样的。

创建嵌入样式表的步骤
(1) 在 HTML 文档的 head 部分输入<style>。
(2) 根据需要，定义任意数量的样式规则，有必要的话添加适量 CSS 注释。
(3) 输入 </style> 结束嵌入样式表。

8.4.应用内联样式

内联样式是在 HTML 中应用 CSS 的第三种方式。不过，应当最后考虑这种方式，因为它将内容（HTML）和表现（CSS）混在了一起，严重地违背了最佳实践。内联样式只影响一个元素，因此使用它将失去外部样式表的关键好处：一次编写，到处可见。设想要对大量 HTML做简单的文字颜色的改变，就需要对这些页面逐一进行检查和修改，这也是大家不会经常使用内联样式的原因。不过，如果你想快速地测试某种样式，以便随后将它从 HTML 中搬到更易于长期维护的外部样式表中（假定你对结果满意），内联样式就能派上用场了。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8" />
 <title>El Palau de la Música</title>
</head>
<body>
...
 <img src="img/palau.jpg" width="250" 
➝ height="163" alt="El Palau de la Música" 
➝ style="border: 4px solid red" />
 <img src="img/tickets.jpg" width="87" 
➝ height="163" alt="The Ticket Window" />
...
</body>
</html>

内联样式规则只影响单个元素（在本例中为第一个 img 元素）

应用内联样式的步骤
(1) 在希望进行格式化的 HTML 元素的开始标签中，输入 style="（或者直接在 img 等虚元素的标签内输入，虚元素不需要结束标签）。
(2) 创建一个样式规则，但不要包含花括号和选择器。不需要选择器是因为直接将样式放入目标元素中了。如果你的样式规则包含多条声明，使用分号将不同的声明隔开。
(3) 输入后引号 "。

8.5.样式的层叠和顺序

将多个样式规则应用于同一元素的情况并不少见，大型网站更是如此，他们需要更多精力维护 CSS。有时候这些规则针对的是同一条属性。正如之前提到的，在规则的特殊性相同的情况下，样式的顺序就成为关键。基本规则是：在其他条件相同的情况下，越晚出现的样式优先级越高。以下几条解释了顺序如何决定样式规则的优先级。

嵌入样式表（位于 style 元素内）与任何链接的外部样式表之间的关系取决于它们在 HTML 中的相对位置。在两者发生冲突时，如果 link 元素在 HTML 代码中出现得早，style 元素就会覆盖链接的样式表；如果 link 元素出现得晚，其中的样式及其包含的任何导入样式表就会覆盖 style 元素的规则。
内联样式（实际上直接应用于元素）在外部样式表和嵌入样式表之后。由于顺序最靠后，其优先级是最高的。一旦应用到任何地方，都会覆盖与之冲突的其他样式。
关于相互冲突的样式的顺序对优先级的影响，有一种例外情况，就是标记!important 的样式总是具有最高的优先级，无论它出现在最前、最后，还是中间。例如，p { margin-top: 1em !important; }。不过，要尽量避免这种用法，极端情况除外。几乎在全部情况下，使用选择器都能达到同样的效果。外，!important 让声明变得太强，如果要覆盖这样的样式，就不得不借助于更长的规则。

8.6.使用与媒体相关的样式表

可以指定一个只用于特定输出的样式表，如只用于打印，或只用于在浏览器中查看屏幕。例如，可以创建一个具有打印和屏幕版本共有特征的通用样式表，再创建单独的打印样式表和屏幕样式表，分别包含只用于打印的属性和只用于屏幕显示的属性。
指定与媒体相关的样式表的步骤
(1) 在 link 或 style 元素的开始标签中添加 media=“output”，其中 output 可以是print、screen 或 all（尽管还有其他一些选项，但这些是最常见的），多个值之间用逗号分隔。
(2) 也可以在样式表中使用 @media 规则。这种方法不需要在 link 元素中指定媒体类型。

8.7.借鉴他人的灵感

我们在第 2 章中学习了如何查看网页的源代码。查看他人的 CSS 也不难。查看其他设计人员的 CSS 代码
(1) 首先查看页面的 HTML 代码。关于查看 HTML 源代码的更多信息。如果 CSS 代码是嵌入样式表，就已经能看到了。
(2) 如果 CSS 是外部样式表，就在 HTML中找到对它的引用，再点击文件名。样式表就显示在浏览器窗口中了。如果愿意，可以复制这些代码，再粘贴到文本编辑器中。