介绍
HTML <style>
标签用于向你的网页添加样式。这些样式可以通过多种方式改变你网站的外观和感觉。在本实验中,你将学习如何使用 <style>
标签创建一个自定义样式表,该样式表可以在整个网页中使用。
注意:你可以在
index.html
中练习编码,并学习 如何在 Visual Studio Code 中编写 HTML。请点击右下角的 'Go Live' 以在端口 8080 上运行 Web 服务。然后,你可以刷新 Web 8080 标签以预览网页。
HTML <style>
标签用于向你的网页添加样式。这些样式可以通过多种方式改变你网站的外观和感觉。在本实验中,你将学习如何使用 <style>
标签创建一个自定义样式表,该样式表可以在整个网页中使用。
注意:你可以在
index.html
中练习编码,并学习 如何在 Visual Studio Code 中编写 HTML。请点击右下角的 'Go Live' 以在端口 8080 上运行 Web 服务。然后,你可以刷新 Web 8080 标签以预览网页。
首先,让我们设置基本的 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 类用于一次性将样式应用于多个元素。在这一步中,我们将为通用的警告消息创建一个类,该类可以在整个网页中重复使用。将以下代码添加到 <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;
}
这段代码为 h1
和 p
元素设置了样式,并将 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 类和外部样式表。你还了解了媒体查询、选择器和嵌套。通过这些方法,你可以创建一个自定义样式表,用于整个网页,并构建一个现代化且响应式的网站。