如果把 HTML 比作一个房子的骨架（结构），那么 CSS 就是房子的装修与软装。CSS（层叠样式表）负责控制网页的样式与布局，让原本枯燥的文字变得美观、生动。
1. CSS 的三种使用方式
学习CSS，首先要知道如何把它应用到HTML上：
-
行内样式：直接在HTML标签的
style属性中添加样式。这种方式虽然直观，但不推荐用于正式项目，因为它导致结构和样式混杂。html
<p style="color: red;">红色的文字</p> -
内部样式表：在HTML文档的
<head>部分，使用<style>标签包裹CSS代码。适合单个页面的简单演示。html
<style> p { color: blue; } </style> -
外部样式表（推荐） ：将CSS代码单独保存在一个
.css文件中，然后在HTML中通过<link>标签引入。这种方式实现了结构（HTML）与表现（CSS）的分离，便于维护和复用。html
<link rel="stylesheet" href="style.css">
2. 核心语法：选择器与声明
CSS 由 选择器 和 声明块 组成。
- 选择器：决定你要给哪个元素“化妆”。
- 声明：用花括号
{}包裹，包含属性和值。
css
/* 选择器：选中所有的h1标签 */
h1 {
/* 属性: 值; */
color: #333; /* 文字颜色 */
font-size: 24px; /* 字体大小 */
}
3. 常用选择器入门
为了让样式更精准，你需要掌握几种基础选择器：
-
元素选择器：直接写标签名，如
div {}，选中页面上所有该标签。 -
类选择器（最常用） ：给标签添加
class属性，在CSS中用.类名选中。类可以重复使用。html
<!-- HTML --> <p class="highlight">重点内容</p>css
/* CSS */ .highlight { background-color: yellow; } -
ID选择器：给标签添加唯一的
id属性，在CSS中用#id名选中。注意：同一个ID在页面中只能出现一次。
4. 布局核心：盒模型
在CSS中，万物皆可为“盒子”。每个元素都由以下部分组成：
- 内容：文字或图片。
- 内边距（padding） ：内容与边框之间的内部距离。
- 边框（border） ：包裹内边距的线。
- 外边距（margin） ：盒子与外部其他盒子之间的距离。
理解盒模型是控制页面布局的关键。
5. 初识布局
想让元素横向排列或居中，可以学习两个常用属性：
- 浮动：
float: left;让元素并排（现代开发中正逐渐被Flex替代）。 - Flexbox（弹性盒子） ：只需给父元素设置
display: flex;，即可轻松实现元素的居中、等分排列，是当下最主流的布局工具。
总结
学习CSS就像学习绘画，入门很容易：掌握选择器、熟悉几个常用属性（颜色、字体、边距）即可开始动手。建议你在练习中多使用 F12 开发者工具，右键点击网页元素查看样式，随时修改测试，这是前端开发者最有效的学习方式。
现在，打开你的代码编辑器，试着将一段文字变成红色并加上边框吧！
