html和css的关系

作者：潮起潮落发布日期:2026-06-24 浏览:63

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML 和 CSS 的关系</title>
    <style>
        /* CSS 用于定义 HTML 元素的样式 */
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 0;
        }

        h1 {
            color: #333;
            text-align: center;
        }

        p {
            font-size: 16px;
            line-height: 1.5;
            margin: 20px;
        }

        .container {
            width: 80%;
            margin: auto;
            overflow: hidden;
        }

        .box {
            background: #fff;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>HTML 和 CSS 的关系</h1>
        <p>HTML (HyperText Markup Language) 是用来构建网页结构的语言，而 CSS (Cascading Style Sheets) 则是用来美化这些结构的样式表。HTML 定义了网页的内容和结构，而 CSS 则控制这些内容的外观。</p>
        <div class="box">
            <p>例如，上面的段落使用了 CSS 来设置字体、颜色、间距等样式，使得页面更加美观和易读。</p>
        </div>
    </div>
</body>
</html>

解释说明：

HTML 结构：HTML 负责定义网页的内容和结构。例如，<h1> 标签表示标题，<p> 标签表示段落，<div> 标签用于分组内容。
CSS 样式：CSS 用于定义 HTML 元素的外观。通过在 <style> 标签中编写 CSS 规则，可以控制字体、颜色、布局等样式。例如，body 样式设置了背景颜色和字体，h1 样式设置了标题的颜色和对齐方式，.box 类样式定义了一个带有阴影和圆角的白色盒子。
结合使用：HTML 和 CSS 相互配合，HTML 提供结构，CSS 提供样式，两者共同作用以创建美观且功能齐全的网页。

上一篇：html标签表示网页正文开始的是

下一篇：html文字垂直居中