系列目录
上一篇：白骑士的CSS教学基础概念篇 1.3 CSS的运行环境（浏览器解析）
CSS（层叠样式表）和HTML（超文本标记语言）是构建网页的两种核心技术，它们在网页的创建和设计中各自发挥着不同的作用。理解它们之间的关系，对于掌握前端开发至关重要。
HTML的作用
HTML 是构建网页的基础标记语言，它负责定义网页的结构和内容。主要功能包括：
- 定义网页内容：HTML 用标签定义网页中的各种内容，如文本、图像、视频、链接等。例如，‘<h1>‘ 标签用于标题，‘<p>‘ 标签用于段落，‘<img>‘ 标签用于图片。
- 组织页面结构：HTML 使用嵌套标签来组织页面的结构，形成逻辑清晰的层次。例如，‘<header>‘, ‘<nav>‘, ‘<main>‘, ‘<footer>‘ 标签用于定义网页的头部、导航、主要内容和底部区域。
- 语义化标记：HTML 提供了语义化的标签来描述不同类型的内容，这有助于搜索引擎优化和无障碍访问。例如，‘<article>‘ 标签用于定义独立的内容区域，‘<section>‘ 标签用于定义页面的章节。
CSS的作用
CSS 是用于控制网页外观和布局的样式表语言。它与HTML的主要功能不同，主要负责：
- 控制样式：CSS 定义了网页元素的视觉表现，包括字体、颜色、边距、边框、背景等。例如，‘color‘, ‘font-size‘, ‘margin‘, ‘padding‘ 等属性用于设置文本颜色、字体大小、元素间距等。
- 布局设计：CSS 控制网页的布局方式，包括元素的位置和排列。使用 CSS 可以实现不同的布局模型，如传统的块级布局、灵活的 Flexbox 布局、现代的 Grid 布局等。
- 响应式设计：CSS 支持响应式设计，通过媒体查询来适配不同设备和屏幕尺寸，确保网页在各种设备上的良好显示。
CSS与HTML的协作
CSS 和 HTML 的协作使得网页不仅具有结构性，而且具有美观的外观。它们的关系可以通过以下几个方面来理解：
- 分离内容与样式：HTML 负责定义网页的结构和内容，而 CSS 负责定义样式和布局。通过这种分离，开发者可以在不修改 HTML 结构的情况下，改变网页的样式，这样既便于维护，也提高了开发效率。
- 选择器与应用：CSS 使用选择器来选择 HTML 元素，并为这些元素应用样式。例如，‘.header‘ 类选择器可以用来为所有具有 ‘header‘ 类的 HTML 元素应用统一的样式。
- 内联、内部和外部样式：CSS 可以以内联样式、内部样式表和外部样式表的形式应用：
- 内联样式：直接在 HTML 元素的 ‘style‘ 属性中定义样式。例如，‘<p style="color: blue;">Hello World</p>‘。
- 内部样式表：在 HTML 文档的 ‘<head>‘ 部分使用 ‘<style>‘ 标签定义样式。例如：
<style> p { color: green; } </style> - 外部样式表：通过 ‘<link>‘ 标签引入外部的 CSS 文件。例如：
<link rel="stylesheet" href="styles.css">
结合示例
考虑一个简单的网页示例：
HTML文件 (index.html)：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的网页</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>欢迎来到我的网站</h1>
</header>
<main>
<section>
<h2>关于我</h2>
<p>这是一个关于我的介绍。</p>
</section>
</main>
<footer>
<p>© 2024 我的网页</p>
</footer>
</body>
</html>CSS文件 (styles.css)：
/* 通用样式 */
body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 0;
padding: 0;
}
/* 头部样式 */
header {
background: #333;
color: #fff;
padding: 10px 0;
text-align: center;
}
/* 主内容样式 */
main {
padding: 20px;
}
section {
margin-bottom: 20px;
}
/* 页脚样式 */
footer {
background: #f4f4f4;
text-align: center;
padding: 10px 0;
}在这个例子中，HTML 文件定义了网页的结构和内容，而 CSS 文件定义了这些内容的样式和布局。通过将样式和结构分开，网页的设计变得更加灵活和易于维护。
总结
CSS 与 HTML 是构建网页的两个核心技术，它们各自承担不同的职责。HTML 负责定义网页的结构和内容，而 CSS 负责控制网页的外观和布局。通过分离内容与样式，开发者可以更高效地管理和修改网页，确保网页在视觉和功能上的一致性。理解这两者的关系，对于有效地创建和维护网页至关重要。
下一篇：白骑士的CSS教学基础概念篇 1.5 CSS的版本
