CSS 是 Cascading Style Sheets（层叠样式表） 的缩写，是一门用于定义网页样式和布局的标记语言，与 HTML（负责网页结构）、JavaScript（负责网页交互）并称前端开发三大核心技术。
简单来说，HTML 搭建了网页的 “骨架”（如标题、段落、图片、按钮），CSS 则为这个骨架赋予 “外观”（如颜色、字体、大小、间距、位置、背景），让网页从纯文字的单调结构，变成视觉上美观、布局合理的页面。
样式定义：控制网页中所有元素的视觉表现，包括颜色、字体、边距、边框、阴影、透明度等。
页面布局：实现元素的排列方式，如居中、左右分栏、上下布局、网格布局、弹性布局等。
样式复用：可将样式抽离为单独的 CSS 文件，供多个 HTML 页面引用，实现网站样式统一，减少重复代码。
响应式适配：配合媒体查询，让网页在电脑、手机、平板等不同设备上自适应显示（如手机端自动适配单列布局）。
层叠与继承：支持样式的 “层叠”（多个样式规则冲突时按优先级生效）和 “继承”（子元素继承父元素的部分样式），灵活控制样式作用范围。
CSS 由选择器和声明块组成，基本语法结构：
/* 选择器：指定要样式化的HTML元素 */
选择器 {
/* 声明块：多个样式声明，以分号结尾 */
属性1: 值1;
属性2: 值2;
属性3: 值3;
}语法说明：
选择器：定位目标元素（如标签选择器 h1、类选择器 .box、ID 选择器 #header 等）。注意，标签选择器、类选择器和ID选择器是使用最多的。
属性：要修改的样式维度（如color颜色、width宽度、margin外边距）。
值：属性的具体取值（如 color: red;、width: 100px;）。
注释：CSS 注释以 /* */ 包裹，不会被浏览器解析。
例如：
h1 {
color: green;
font-weight: normal;
}
p {
line-height: 1.8;
font-size: 16px;
}更多关于 CSS 的知识可以学习 CSS教程和 CSS3 教程。
直接在 HTML 元素的 style 属性中写 CSS，优先级最高，但仅作用于当前元素，无法复用，适合临时修改单个元素样式。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML教程</title>
</head>
<body>
<h1 style="color: red; font-size: 24px;">这是行内样式的标题</h1>
</body>
</html>运行示例，效果如下图：
在 HTML 页面的 <head> 标签中通过 <style> 标签写 CSS，仅作用于当前 HTML 页面，适合单页面的样式定义。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML教程</title>
<style>
/* 所有h1标签的样式 */
h1 {
color: blue;
text-align: center;
}
/* 类为box的元素样式 */
.box {
width: 200px;
height: 200px;
background: pink;
}
</style>
</head>
<body>
<h1>这是内部样式的标题</h1>
<div class="box"></div>
</body>
</html>运行示例，效果如下图：
将 CSS 代码单独写在 *.css 后缀的文件中，再在 HTML 的 <head> 中通过 <link> 标签引入，最推荐的方式，可被多个 HTML 页面引用，实现全站样式统一，便于维护。
（1）新建 style.css 文件：
@charset "UTF-8";
h1 {
color: green;
font-weight: normal;
}
p {
line-height: 1.8;
font-size: 16px;
}（2）HTML 页面引入：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML教程</title>
<!-- 引入外部CSS文件 -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>这是外部样式的标题</h1>
<p>这是外部样式的段落</p>
</body>
</html>运行效果如下图：
关于更多HTML相关知识请学习后续教程……
川公网安备51010802032098