HTML 文档样式

HTMLHTMLBeginner
立即练习

💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版

介绍

HTML <style> 标签用于向你的网页添加样式。这些样式可以通过多种方式改变你网站的外观和感觉。在本实验中,你将学习如何使用 <style> 标签创建一个自定义样式表,该样式表可以在整个网页中使用。

注意:你可以在 index.html 中练习编码,并学习 如何在 Visual Studio Code 中编写 HTML。请点击右下角的 'Go Live' 以在端口 8080 上运行 Web 服务。然后,你可以刷新 Web 8080 标签以预览网页。


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("`HTML`")) -.-> html/BasicStructureGroup(["`Basic Structure`"]) html(("`HTML`")) -.-> html/TextContentandFormattingGroup(["`Text Content and Formatting`"]) html(("`HTML`")) -.-> html/LayoutandSectioningGroup(["`Layout and Sectioning`"]) html(("`HTML`")) -.-> html/AdvancedElementsGroup(["`Advanced Elements`"]) html/BasicStructureGroup -.-> html/basic_elems("`Basic Elements`") html/BasicStructureGroup -.-> html/head_elems("`Head Elements`") html/BasicStructureGroup -.-> html/viewport("`Viewport Declaration`") html/TextContentandFormattingGroup -.-> html/text_head("`Text and Headings`") html/LayoutandSectioningGroup -.-> html/layout("`Layout Elements`") html/LayoutandSectioningGroup -.-> html/doc_flow("`Document Flow Understanding`") html/AdvancedElementsGroup -.-> html/inter_elems("`Interactive and Dynamic Elements`") html/AdvancedElementsGroup -.-> html/templating("`HTML Templating`") subgraph Lab Skills html/basic_elems -.-> lab-70845{{"`HTML 文档样式`"}} html/head_elems -.-> lab-70845{{"`HTML 文档样式`"}} html/viewport -.-> lab-70845{{"`HTML 文档样式`"}} html/text_head -.-> lab-70845{{"`HTML 文档样式`"}} html/layout -.-> lab-70845{{"`HTML 文档样式`"}} html/doc_flow -.-> lab-70845{{"`HTML 文档样式`"}} html/inter_elems -.-> lab-70845{{"`HTML 文档样式`"}} html/templating -.-> lab-70845{{"`HTML 文档样式`"}} end

设置 HTML 结构

首先,让我们设置基本的 HTML 结构。在你的 index.html 文件中,创建以下 HTML 代码:

<!doctype html>
<html>
  <head>
    <title>My Webpage</title>
  </head>

  <body>
    <h1>Welcome to my Webpage</h1>
    <p>This is my first paragraph.</p>
  </body>
</html>

这段代码设置了一个包含标题和段落的基本网页结构。

添加内联样式

为网页添加样式的第一种方法是直接将样式添加到 HTML 元素的 style 属性中。在这一步中,我们将为 h1 标题添加内联样式。将以下属性添加到 h1 元素中:

<h1 style="color: blue; font-size: 36px;">Welcome to my Webpage</h1>

该样式将增大字体大小并将标题颜色更改为蓝色。

添加嵌入式样式

<style> 标签用于向网页添加嵌入式样式。你可以在此标签内添加多个样式。在这一步中,我们将使用嵌入式样式为 p 元素添加样式。在 <head> 标签内添加以下代码:

<style>
  p {
    color: green;
    font-size: 18px;
  }
</style>

该样式将段落的颜色设置为绿色,并将字体大小调整为 18px。

使用 CSS 类

CSS 类用于一次性将样式应用于多个元素。在这一步中,我们将为通用的警告消息创建一个类,该类可以在整个网页中重复使用。将以下代码添加到 <style> 标签中:

<style>
  .warning {
    color: red;
    background-color: yellow;
    border: 1px solid black;
    padding: 10px;
  }
</style>

这段代码为警告消息创建了一个样式,包括黄色背景颜色、黑色边框和红色文本颜色。

接下来,我们将把这个类应用到 h1 标题中。修改你的 h1 元素以包含该类:

<h1 class="warning">Welcome to my Webpage</h1>

这一步为标题添加了警告样式。

添加外部样式表

外部样式表用于将样式表与 HTML 内容分离。在这一步中,你将创建一个可以在多个网页中重复使用的外部样式表。

创建一个名为 style.css 的新文件。在 style.css 中,添加以下代码:

h1 {
  font-size: 48px;
}

p {
  font-size: 24px;
}

.warning {
  background-color: green;
}

这段代码为 h1p 元素设置了样式,并将 warning 类的背景颜色更改为绿色。

要将此外部样式表链接到你的 index.html 页面,请在 <head> 标签中添加以下代码:

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

这行代码将 style.css 文件链接到 index.html 页面。

添加媒体查询

媒体查询用于为不同的设备尺寸应用不同的样式。在这一步中,我们将使用媒体查询来调整元素的字体大小。将以下代码添加到 style.css 文件中:

@media (max-width: 600px) {
  h1 {
    font-size: 36px;
  }

  p {
    font-size: 18px;
  }
}

这段代码将 h1 的字体大小调整为 36px,并将 p 的字体大小调整为 18px,适用于屏幕宽度小于或等于 600px 的情况。

添加选择器和嵌套

在这一步中,我们将介绍选择器和嵌套,这是两个高级的 CSS 概念。

创建一个名为 advanced.css 的新文件。在 advanced.css 中,添加以下代码:

header h1 {
  color: blue;
  font-style: italic;
}

main p {
  color: red;
}

这段代码选择了 header 元素内的 h1 元素,并应用了蓝色和斜体字体样式。它还选择了 main 元素内的 p 元素,并应用了红色。

要将此外部样式表链接到你的 index.html 页面,请在 <head> 标签中添加以下代码:

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

这行代码将 advanced.css 文件链接到 index.html 页面。

总结

在本实验中,你学习了如何使用多种方法为网页添加样式。你从使用内联样式和嵌入式样式开始,然后学习了 CSS 类和外部样式表。你还了解了媒体查询、选择器和嵌套。通过这些方法,你可以创建一个自定义样式表,用于整个网页,并构建一个现代化且响应式的网站。

您可能感兴趣的其他 HTML 教程