如何在html中做外部样式表

在制作网页时，我们经常需要用到CSS来美化页面，CSS，全称Cascading Style Sheets，即层叠样式表，是一种用于描述HTML或XML文档的表现形式的语言，通过使用CSS，我们可以控制网页的布局、颜色、字体等样式，让网页看起来更加美观。

使用外部样式表是CSS的一种应用方式，它允许我们将样式规则保存在一个单独的文件中，而不是直接在HTML文件中编写，这样做的好处是，我们可以在多个页面中使用同一套样式规则，而不需要在每个HTML文件中重复编写相同的CSS代码，这样不仅提高了代码的可维护性，也使得样式的更新变得更加方便。

如何在HTML中实现外部样式表呢？我将详细介绍步骤和一些实用的技巧。

创建CSS文件

我们需要创建一个CSS文件，这个文件将包含所有的样式规则，你可以使用任何文本编辑器来创建这个文件，比如Notepad、Sublime Text或者Visual Studio Code等，文件的扩展名应该是.css。

你可以创建一个名为styles.css的文件，并在其中编写如下CSS代码：

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    color: #333;
}
header {
    background-color: #333;
    color: white;
    padding: 10px 0;
}
nav ul {
    list-style-type: none;
    padding: 0;
}
nav ul li {
    display: inline;
    margin-right: 10px;
}

链接CSS文件

我们需要在HTML文件中链接这个CSS文件，这可以通过在HTML的<head>部分使用<link>标签来实现。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的网页</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>欢迎来到我的网页</h1>
    </header>
    <nav>
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">关于我们</a></li>
            <li><a href="#">服务</a></li>
            <li><a href="#">联系我们</a></li>
        </ul>
    </nav>
    <!-- 其他内容 -->
</body>
</html>

在这个例子中，<link>标签的rel属性设置为stylesheet，表示这是一个样式表。href属性则指定了CSS文件的路径，如果CSS文件和HTML文件位于同一目录下，你可以直接使用文件名；如果它们位于不同的目录下，你需要提供相对路径或绝对路径。

媒体查询

CSS还允许我们使用媒体查询来为不同的设备和屏幕尺寸定义不同的样式，这在响应式设计中非常有用，我们可以为手机和平板电脑设置不同的样式。

@media screen and (max-width: 768px) {
    body {
        background-color: #ddd;
    }
    nav ul li {
        display: block;
        margin-bottom: 10px;
    }
}

这段代码会在屏幕宽度小于或等于768像素时应用新的样式规则。