一、CSS 是什么
CSS 全称是层叠样式表（Cascading Style Sheets），它就像网页的 "化妆师"，能改变 HTML 元素的外观和布局。简单说，HTML 负责网页的 "骨架"，CSS 负责 "打扮" 这个骨架，让它更美观。
比如想把网页背景改成淡绿色，用 CSS 可以这样写：
<body style="background-color: #***ff***;">
这是带淡绿色背景的文字
</body>
二、CSS 的作用
- 美化外观：修改文字颜色、大小，设置背景等
- 布局排版：控制元素在页面中的位置和排列方式
- 响应式设计：让网页在手机、电脑等不同设备上都能正常显示
- 动画效果：实现元素的移动、旋转等动态效果
- 样式分离：把美化代码和 HTML 结构代码分开，让网页更易维护
三、CSS 的三种引入方式
1. 内联式（行内样式）
直接在 HTML 标签里用style属性写 CSS，只对当前标签有效。
<p style="color: blue; font-size: 20px;">这段文字是蓝色的，20像素大小</p>
缺点：样式和标签混在一起，改起来麻烦，不推荐大量使用。
2. 嵌入式（内页样式）
在 HTML 的<head>里用<style>标签写 CSS，作用于整个页面
适合单个网页使用，修改起来比内联式方便。
3. 外联式（外部样式）
把 CSS 代码单独放在.css文件里，再让 HTML 页面 "引用" 这个文件，是最推荐的方式。
步骤：创建一个style.css文件，写 CSS 代码：
- 在 HTML 中引用这个 CSS 文件：
优点：多个网页可以共用一个 CSS 文件，改一次就能影响所有引用的页面，非常适合做网站。
四、CSS 基本语法
CSS 的语法就像 给谁打扮 + 怎么打扮，基本结构是：
选择器：指定要修饰的 HTML 元素（比如 p 标签、某个类）
声明：由 "属性：值" 组成，每个声明用分号结尾
例如：让所有段落文字居中且为红色
p {
text-align: center;
color: red;
}
五、颜色表示方法
CSS 中设置颜色有多种方式，常用的有：
-
颜色名称：直接写英文，比如
red（红色）、blue（蓝色） -
十六进制：以
#开头，比如#ff0000（红色）、#00ff00（绿色） -
RGB：用红、绿、蓝三原色数值表示，比如
rgb(255, 0, 0)（红色） -
RGBA：在 RGB 基础上增加透明度（0-1 之间），比如
rgba(255, 0, 0, 0.5)（半透明红色）
六、CSS 选择器
1. 全局选择器（*）
2. 标签选择器
3. 类选择器（.
4. ID 选择器（#）
七、HTML 元素的两种类型
理解元素类型对布局很重要，主要分为：. 块级元素
特点：独占一行，宽度默认占满整个父元素
常见元素：p（段落）、div（块容器）、h1-h6（标题）、ul（无序列表）、ol（有序列表）
示例：两个 div 会自动分行显示
. 内联元素（行内元素）
特点：不独占一行，只占自身内容大小的宽度常见元素：a（链接）、span（行内容器）、strong（加粗）、img（图片）示例：多个 span 会在同一行显示
常用 CSS 属性
字体属性
控制文字的样式，常用的有：font-size：文字大小，比如16pxfont-family：字体，比如"微软雅黑"font-weight：粗细，比如bold（加粗）font-style：式，比如italic（斜体
文本属性
调整文本的排版，常用的有：
textalign：对齐方式（left/center/right）
color：文字颜色
text-decoration：装饰线，比如underline（下划线）
line-height：行高
浮动（float）
让元素 "飘" 起来，脱离正常的文档流，常用于并排显示多个块元素。float: left：向左浮动float: right：向右浮动float: none：不浮动（默认
通过习 CSS，我们可以把单调的 HTML 页面变得生动美观。重点在于多练习 —— 尝试修改各种属性，看看页面会发生什么变化，慢慢就能掌握其中的规律啦！
总结
代码实现
自己的网页
