内部样式表

概述

在网页开发中，样式表用于控制网页的外观和布局。样式表可以通过三种方式应用到HTML文档中：内联样式、内部样式表和外部样式表。本教程将详细介绍内部样式表的使用方法。

什么是内部样式表？

内部样式表是指将CSS样式直接嵌入到HTML文档的<head>部分中。这种方式适用于单个HTML文件需要特定的样式，而不需要在整个网站中共享这些样式。

内部样式表的语法

内部样式表使用<style>标签，并将其放置在HTML文档的<head>部分。<style>标签内的内容是CSS代码，用于定义HTML元素的样式。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>内部样式表示例</title>
    <style>
        /* 这里是CSS代码 */
        body {
            background-color: #f0f0f0;
            font-family: Arial, sans-serif;
        }
        h1 {
            color: #333;
            text-align: center;
        }
        p {
            color: #666;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <h1>欢迎来到内部样式表示例</h1>
    <p>这是一个使用内部样式表的简单网页。</p>
</body>
</html>

解释

• <style>标签用于定义内部样式表。
• body选择器定义了整个页面的背景颜色和字体。
• h1选择器定义了标题的颜色和居中对齐。
• p选择器定义了段落文本的颜色和字体大小。

实践练习

练习1：创建一个带有内部样式表的简单网页

1. 打开你的文本编辑器，创建一个新的HTML文件。
2. 在<head>部分中添加<style>标签，并定义一些基本的CSS样式。
3. 在<body>部分中添加一些HTML内容，例如标题和段落。
4. 保存文件并在浏览器中打开，查看样式效果。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>练习1：内部样式表</title>
    <style>
        body {
            background-color: #e0e0e0;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        h1 {
            color: #4a90e2;
            text-align: center;
        }
        p {
            color: #333;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <h1>这是一个练习</h1>
    <p>通过这个练习，你将学会如何使用内部样式表来美化你的网页。</p>
</body>
</html>

练习2：为不同的HTML元素添加样式

1. 在练习1的基础上，添加更多的HTML元素，例如<div>、<ul>和<li>。
2. 为这些新添加的元素定义样式。
3. 保存并查看效果。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>练习2：更多样式</title>
    <style>
        body {
            background-color: #e0e0e0;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        h1 {
            color: #4a90e2;
            text-align: center;
        }
        p {
            color: #333;
            font-size: 18px;
        }
        div {
            background-color: #fff;
            padding: 20px;
            border-radius: 10px;
            margin: 20px 0;
        }
        ul {
            list-style-type: square;
            padding-left: 40px;
        }
        li {
            color: #555;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <h1>这是一个练习</h1>
    <p>通过这个练习，你将学会如何使用内部样式表来美化你的网页。</p>
    <div>
        <ul>
            <li>第一项</li>
            <li>第二项</li>
            <li>第三项</li>
        </ul>
    </div>
</body>
</html>

总结

内部样式表是一种简单且有效的样式定义方式，特别适合单个HTML文件的样式需求。通过本教程，你应该已经掌握了如何在HTML文档中使用内部样式表，并能够为不同的HTML元素定义样式。继续练习，你将能够创建出更加美观和功能丰富的网页。