如何在HTML页面中使用内部样式表？

引言

在现代互联网时代，网页设计已经成为了一个非常重要的职业。为了让网页更加吸引人，网页开发人员需要掌握各种技能，其中包括HTML、CSS和JavaScript等技术。本文将着重介绍如何在HTML页面中使用内部样式表。

什么是内部样式表？

内部样式表是一种CSS编写方式，它允许开发人员在HTML页面中定义样式。与外部样式表相比，内部样式表更加方便，因为样式信息直接嵌入到HTML文件中，而不需要额外的引用文件。

内部样式表通常用于定义特定页面的样式。例如，如果您有一个包含表格的HTML页面，您可以使用内部样式表来定义表格的边框大小和颜色，而不会影响其他页面。

如何使用内部样式表？

使用内部样式表非常简单。您只需要在HTML页面的头部添加一个标签，并在其中编写CSS样式规则。

<!DOCTYPE html>
<html>
<head>
    <title>使用内部样式表</title>
    <style>
        table {
            border-collapse: collapse;
            width: 100%;
        }
        th, td {
            text-align: left;
            padding: 8px;
        }
        th {
            background-color: #4CAF50;
            color: white;
        }
        tr:nth-child(even) {
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>
    <h1>我的表格</h1>
    <table>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>城市</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>25</td>
            <td>北京</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>30</td>
            <td>上海</td>
        </tr>
    </table>
</body>
</html>

在上面的示例中，我们使用了内部样式表来定义表格的样式。我们首先定义了表格的边框大小和颜色，然后定义了表头单元格的背景颜色和字体颜色。最后，我们为偶数行添加了一个背景颜色。