一、基本概念
1. CSS 的定义
CSS (Cascading Style Sheets，层叠样式表），是一种用来为结构化文档（如 HTML 文档）添加样式（字体、间距、颜色、布局等）的计算机语言。
CSS 文件扩展名为 .css，可以把 CSS 当做网页的“衣服”，负责网页的美观和样式。
2. CSS 的作用
- 定义如何显示 HTML 元素
- 样式可统一保存在外部
.css文件中 - 只需修改一个 CSS 文件，即可改变所有页面的布局和外观，实现样式与结构分离
3. 行内样式
写在标签内部，使用 style 属性直接设置样式。
- 语法：style="属性名:值; 属性名:值;"
- 多个样式用分号隔开
- 示例：
<p style="color:purple; font-size:30px;">文字内容</p>
4. 头部样式
写在 HTML 的 <head> 标签内，用 <style> 标签包裹。
<head>
<style>
p {
color: red;
}
</style>
</head>
5. 外部样式
样式写在单独的 .css 文件中，通过 <link> 标签引入到 HTML 文件。
<link rel="stylesheet" href="style.css">
二、CSS 重点知识
1. 选择器（告诉 CSS 要美化谁）
（1）类选择器（最常用）
通过给 HTML 元素设置类名来选中元素。 - CSS 写法：前面必须加 .
.类名 {
样式属性: 值;
}
- HTML 写法：
<div class="类名">内容</div>
（2）后代选择器
选择某个元素内部所有的子/孙元素。
- 语法：父元素 子元素 { 样式 }
（3）伪类选择器
选择元素特定状态下的样式。
- 常用：:hover（鼠标悬停）
- 语法：选择器:hover { 样式 }
- 特点：前面是冒号
（4）标签选择器
直接通过标签名选中所有该标签，批量修改样式。
p {
color: blue;
}
（5）id 选择器
通过标签的 id 属性选中唯一元素。
- CSS 写法：前面加 #
#id名 {
样式属性: 值;
}
2. 常用 CSS 属性
尺寸和位置
width：宽度height：高度
背景和颜色
background：背景color：文字颜色
文字样式
font-size：字体大小text-align：文字对齐
边框和圆角
border：边框border-radius：圆角
3. 盒子模型
所有 HTML 元素都可以看作一个盒子，用于页面布局。
盒子模型包含 4 部分： 1. Content（内容）：元素实际内容（文字/图片） 2. Padding（内边距）：内容与边框之间的距离 3. Border（边框）：包裹内边距与内容 4. Margin（外边距）：元素与元素之间的距离
4. 布局技巧基本知识（补充）
（1）文本元素
用于显示和格式化文字内容。
常用标签：
- <h1>~<h6>：标题
- <p>：段落
- <strong>、<em>：强调
- <span>、<br>、<hr>：文本容器/换行/分割线
（2）块级元素与行内元素
块级元素
- 独自占一整行
- 默认宽度 = 父元素 100%
- 可设置宽高、内外边距
- 可包含其他块级/行内元素
- 代表标签：
<div>、<p>、<h1>~<h6>、<table>、<form>
行内元素
- 不换行，和其他元素同行显示
- 宽高由内容决定，不能设置宽高
- 内外边距只生效左右，上下不影响布局
- 代表标签：
<span>、<a>、<img>、<button>、<input>
（3）浮动
让元素脱离正常文档流，向左或向右排列，直到碰到父元素或其他浮动元素。
（4）显示和隐藏
控制元素在页面上是否可见，类似开关灯效果。