HTML - 风格表：初学者指南

欢迎，未来的网页开发者们！今天，我们将深入探索HTML风格表的多彩世界，也被称为CSS（层叠样式表）。将HTML视为你网页的骨架，CSS则是让网页看起来惊艳的时尚服饰。让我们一起开始这段激动人心的旅程！

HTML - Style Sheet

什么是风格表？

在我们跃入深水区之前，先来了解一下风格表是什么。风格表是一组样式规则，告诉网页浏览器如何展示用HTML编写的文档。它就像是一本时尚设计师为你的网页准备的指南！

CSS在HTML文档中的示例

让我们从一个简单的示例开始，看看CSS是如何工作的：

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
h1 {
color:海军蓝;
text-align: center;
}
</style>
</head>
<body>
<h1>欢迎来到我的时尚页面！</h1>
<p>这是一个带有默认样式的段落。</p>
</body>
</html>

在这个示例中，我们在HTML文档的<head>部分添加了一个<style>标签。在这个标签内，我们定义了一些CSS规则：

我们将body的背景色设置为浅灰色（#f0f0f0），并更改了字体为Arial。
我们为h1标签设置了海军蓝色，并将其居中显示在页面上。

CSS的类型

现在我们已经看到了CSS的实际应用，让我们探索三种CSS类型。将这些视为为你的HTML衣橱添加风格的不同方式：

1. 内联CSS

内联CSS就像直接给你的装扮添加一顶时尚帽子。它是通过style属性直接应用到HTML元素上。

<h1 style="color: red; font-size: 24px;">这是一个红色标题</h1>

在这个示例中，我们将标题设置为红色，并将其大小增加到24像素。

2. 内部CSS

内部CSS就像为单个网页配备一个私人造型师。它是在HTML文件的<head>部分内的<style>标签中定义的，就像我们在第一个示例中看到的那样。

3. 外部CSS

外部CSS就像为所有网页准备的通用时尚指南。它存储在一个单独的.css文件中，并链接到你的HTML文档。

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>欢迎来到我的时尚页面！</h1>
<p>这个页面使用了外部CSS文件进行样式设置。</p>
</body>
</html>

在这个示例中，我们将一个名为styles.css的外部CSS文件链接到我们的HTML文档。

使用风格表的示例

让我们探索更多示例，看看CSS的力量：

设置文本样式

p {
font-family: 'Georgia', serif;
font-size: 16px;
line-height: 1.6;
color: #333;
}

这个CSS规则为所有段落设置了Georgia字体、16像素大小、1.6行高和深灰色。

创建按钮

.button {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}

这个CSS创建了一个时尚的绿色按钮。你可以通过给任何元素添加类"button"来应用这个样式。

响应式设计

@media screen and (max-width: 600px) {
body {
font-size: 14px;
}
h1 {
font-size: 24px;
}
}

这个CSS使用了一个媒体查询，当屏幕宽度为600像素或更小时，调整字体大小，使你的网站响应式。

CSS方法表格

下面是一个总结我们讨论过的CSS方法的便捷表格：

方法	描述	优点	缺点
内联CSS	直接应用到HTML元素	快速进行小改动	不易重用，使HTML混乱
内部CSS	在HTML文件的`<style>`标签中定义	应用于单个页面	跨页面不易重用
外部CSS	存储在单独的.css文件中	可重用，保持HTML整洁	需要额外的HTTP请求

记住，年轻的修行者，掌握CSS就像学习绘画一样 - 它需要练习、耐心和一点创造性的灵感。不要害怕尝试不同的风格，看看什么最适合你的网页。

在我们结束这堂课时，我想起了一个学生曾经告诉我，“CSS把我的无聊网页变成了数字杰作！”这就是CSS的美妙之处 - 它赋予你将网络变成你画布的力量。

所以，勇敢地去装饰吧，愿你的网页永远时尚！

Credits: Image by storyset