一、CSS 概述

定义：全称为 Cascading Style Sheets（层叠样式表），是用于控制 HTML 元素样式与布局的语言。
核心作用：对网页元素进行像素级排版控制，美化页面；实现样式与 HTML 结构分离，便于维护。
类比：类似 “化妆术”，HTML 是页面 “骨架”，CSS 是 “妆容”，让页面更美观。

二、CSS 语法规则

核心结构：选择器 + 一对{}+ 若干属性声明。
选择器：指定要修改样式的 HTML 元素（如p、.box、#title）。
属性声明：以 “属性名：属性值；” 形式存在，多个声明用分号分隔。
示例：

p {
  font-size: 28px; /* 字体大小 */
  color: red; /* 文本颜色 */
}

三、CSS 引入方式（3 种）

1. 内部样式

用法：在 HTML 的<head>标签内嵌入<style>标签，CSS 代码写在<style>中。
代码示例：

<head>
  <style>
    p {
      font-size: 28px;
      color: red;
    }
  </style>
</head>
<body>
  <p>hello world!</p>
</body>

特点：样式与结构部分分离，适合少量 CSS 代码；缺点是代码量较大时，分离不够彻底。

2. 内联样式

用法：直接在 HTML 元素上添加style属性，属性值为 CSS 声明（无需写选择器）。
代码示例：

<body>
  <p style="color: blue; font-size: 24px;">hello world!</p>
</body>

特点：仅对当前元素生效，优先级最高（会覆盖其他引入方式的样式）；适合简单样式，无法写复杂逻辑。

3. 外部样式（开发首选）

用法：
新建独立的.css文件（如style.css），写入 CSS 代码。
在 HTML 的<head>中用<link>标签引入该文件，href属性指定.css文件路径。
代码示例：
style.css文件：

p {
  font-size: 28px;
  color: orange;
}

HTML 文件：

<head>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <p>hello world!</p>
</body>

特点：样式与结构彻底分离，便于复用和维护；受浏览器缓存影响，修改后可通过ctrl + F5强制刷新生效。

四、CSS 选择器（基础 + 复合）

1. 基础选择器（单个选择器构成）

1.1 标签选择器

语法：直接写 HTML 标签名（如p、div、h1）。
作用：选中页面中所有该类型的标签，统一设置样式。
示例：

p {
  font-size: 20px;
  color: green;
}

特点：快速统一样式，无法实现差异化设置。

1.2 类选择器

语法：类名前加.（如.green、.size），类名不能用纯数字、中文或标签名，长类名可用-分隔。
作用：通过 HTML 元素的class属性调用（如<p class="green size">），一个类可被多个元素使用，一个元素可使用多个类（类名用空格分隔）。
示例：

.green {
  color: green;
}
.size {
  font-size: 20px;
}

<p class="green size">段落1</p>
<p class="size">段落2</p>

特点：支持差异化设置和样式复用，灵活性高。

1.3 id 选择器

语法：id 名前加#（如#green、#size），id 是元素唯一标识，不能重复。
作用：通过 HTML 元素的id属性调用（如<p id="green">），一个 id 只能对应一个元素。
示例：

#green {
  color: green;
}
#size {
  font-size: 20px;
}

<p id="green">段落1</p>
<p id="size">段落2</p>

特点：针对性强，用于单独设置某个元素的样式。

1.4 通配符选择器

语法：用*表示，无需调用。
作用：选中页面中所有 HTML 标签，统一设置样式（如清除默认边距）。
示例：

* {
  color: green;
  font-size: 20px;
  margin: 0;
  padding: 0;
}

特点：作用范围广，适合全局初始化样式。

2. 复合选择器（基础选择器组合）

2.1 后代选择器（包含选择器）

语法：父选择器 + 空格 + 子选择器（如ol li、.box p）。
作用：选中父元素下所有后代子元素（包括子、孙子、重孙子元素等）。
示例：

ol li {
  color: orange;
  font-size: 20px;
}

<ol>
  <li>子元素</li>
  <li>子元素
    <ul>
      <li>孙子元素（也会被选中）</li>
    </ul>
  </li>
</ol>

2.2 子选择器

语法：父选择器 + > + 子选择器（如.cat > a、div > p）。
作用：仅选中父元素的直接子元素，不包含后代元素。
示例：

.cat > a {
  color: orange;
  font-size: 20px;
}

<div class="cat">
  <a href="#">直接子元素（选中）</a>
  <ul>
    <li><a href="#">孙子元素（不选中）</a></li>
  </ul>
</div>

2.3 并集选择器

语法：多个选择器用,分隔（如ol, ul、p, .box, #title），建议纵向排列，便于阅读。
作用：同时选中多个选择器对应的元素，统一设置样式。
示例：

ol,
ul {
  color: orange;
  font-size: 20px;
}

<ul>
  <li>列表1</li>
</ul>
<ol>
  <li>列表2</li>
</ol>

2.4 伪类选择器（选中元素特定状态）

核心语法：选择器 + : + 状态（如a:link、p:hover）。
常用状态：
a:link：未访问过的链接。
a:visited：已访问过的链接（可通过ctrl + shift + delete清空浏览器历史记录恢复未访问状态）。
:hover：鼠标悬停时的元素状态。
:active：鼠标按下未弹起时的元素状态。
示例：

a:link {
  color: blue;
  text-decoration: none;
}
a:visited {
  color: purple;
}
a:hover {
  color: red;
  text-decoration: underline;
}
a:active {
  color: green;
}

五、CSS 常用属性（字体、文本、背景、显示模式）

1. 字体属性

1.1 字体家族（`font-family`）

作用：设置文本字体。
取值：可写多个字体（用逗号分隔），从左到右查找系统已安装的字体，无匹配时用默认字体；字体名有空格需用引号包裹，建议用英文（避免兼容性问题）。
示例：

p {
  font-family: "Microsoft YaHei", 宋体, sans-serif;
}

注意：若系统无目标字体，可通过服务器请求字体文件解决。

1.2 字体大小（`font-size`）

作用：设置文本字体大小，单位为px（像素）。
示例：

p {
  font-size: 16px;
}
h1 {
  font-size: 28px;
}

注意：不同浏览器默认字体大小不同，建议明确设置；标题标签需单独指定大小。

1.3 字体粗细（`font-weight`）

作用：设置文本粗细。
取值：
normal：正常（等同于 400）。
bold：加粗（等同于 700）。
数字：1-1000，数值越大越粗。
示例：

p {
  font-weight: 600;
}
h1 {
  font-weight: normal; /* 取消标题默认加粗 */
}

1.4 字体样式（`font-style`）

作用：设置文本是否倾斜。
取值：
normal：正常（取消倾斜）。
italic：倾斜。
示例：

p {
  font-style: italic;
}
em {
  font-style: normal; /* 取消em标签默认倾斜 */
}

2. 文本属性

2.1 文本颜色（`color`）

作用：设置文本颜色。
取值方式（3 种）：
预定义颜色值：如red、green、blue。
十六进制：如#ff0000（红色），可缩写为#f00（分量两位相同时）。
RGB：如rgb(255, 0, 0)（红色），RGB 各分量取值 0-255。
示例：

.p1 {
  color: red;
}
.p2 {
  color: #ff0000;
}
.p3 {
  color: rgb(255, 0, 0);
}

2.2 文本对齐（`text-align`）

作用：控制文本或图片等元素的水平对齐方式。
取值：left（左对齐，默认）、center（居中对齐）、right（右对齐）。
示例：

p {
  text-align: center;
}
img {
  text-align: right;
}

2.3 文本装饰（`text-decoration`）

作用：设置文本装饰效果。
取值：
none：无装饰（常用於取消a标签默认下划线）。
underline：下划线。
overline：上划线。
line-through：删除线。
示例：

a {
  text-decoration: none; /* 取消链接下划线 */
}
.p1 {
  text-decoration: underline;
}
.p2 {
  text-decoration: line-through;
}

2.4 文本缩进（`text-indent`）

作用：控制段落首行缩进，其他行无影响。
取值：
单位px：固定缩进长度（不随字体大小变化）。
单位em：相对缩进长度（1em = 当前字体大小，随字体变化）。
负值：向左缩进（文字可能超出容器）。
示例：

p {
  text-indent: 2em; /* 首行缩进2个字符 */
}
.p2 {
  text-indent: -50px; /* 向左缩进50px */
}

2.5 文本行高（`line-height`）

定义：上下文本行的基线距离，等于 “文本高度 + 行间距”（行间距 = 上外边距 + 下外边距，且上下边距相等）。
作用：控制文本行间距，设置为元素高度时可实现文字垂直居中。
取值：
数值 + px：固定行高（如line-height: 40px）。
normal：浏览器默认行高（由浏览器决定）。
示例：

div {
  height: 40px;
  line-height: 40px; /* 文字垂直居中 */
}
p {
  line-height: 1.5; /* 行高为字体大小的1.5倍 */
}

3. 背景属性

3.1 背景颜色（`background-color`）

作用：设置元素背景颜色。
取值方式（3 种）：与color属性一致（预定义颜色值、十六进制、RGB）。
默认值：transparent（透明）。
示例：

div {
  background-color: #f0f0f0;
}
.p1 {
  background-color: rgb(255, 255, 0);
}

3.2 背景图片（`background-image`）

作用：给元素设置背景图片，比img标签更易控制位置。
语法：background-image: url(图片路径)，路径可是绝对路径或相对路径，引号可加可不加。
示例：

div {
  background-image: url("bg.jpg"); /* 相对路径 */
}
.p2 {
  background-image: url("https://xxx.com/bg.png"); /* 绝对路径 */
}

3.3 背景平铺（`background-repeat`）

作用：控制背景图片的平铺方式。
取值：
repeat：默认，水平 + 垂直平铺。
no-repeat：不平铺（只显示一张）。
repeat-x：仅水平平铺。
repeat-y：仅垂直平铺。
示例：

div {
  background-image: url("bg.jpg");
  background-repeat: no-repeat; /* 不平铺 */
}

3.4 背景位置（`background-position`）

作用：控制背景图片在元素内的位置。
取值（2 个参数，x 轴（水平）+ y 轴（垂直））：
方位名词：top、left、right、bottom（如background-position: top right，参数顺序可互换；只写 1 个时，另一个默认居中）。
精确单位（px / 百分比）：如background-position: 100px 200px（x=100px，y=200px）；只写 1 个时，为 x 轴，y 轴默认居中。
混合单位：如background-position: 100px center（x=100px，y 居中）。
示例：

div {
  background-image: url("bg.jpg");
  background-repeat: no-repeat;
  background-position: center top; /* 水平居中，垂直置顶 */
}

3.5 背景尺寸（`background-size`）

作用：控制背景图片的尺寸。
取值：
数值 + px：固定尺寸（如background-size: 600px 400px，宽 600px，高 400px）。
百分比：相对于元素尺寸的比例（如background-size: 50% 50%，宽高均为元素的 50%）。
cover：图片等比例缩放，填满元素（可能裁剪图片）。
contain：图片等比例缩放，适应元素（可能留空白）。
示例：

div {
  background-image: url("bg.jpg");
  background-repeat: no-repeat;
  background-size: cover; /* 填满元素 */
}

4. 显示模式

4.1 标签默认显示模式（2 类核心）

类型	特点	常见标签
块级元素	独占一行；宽高、内外边距、行高可控制；默认宽度 = 父元素宽度；可容纳块级 / 行内元素（文字类标签除外）	`div`、`h1-h6`、`p`、`ul`、`ol`、`li`
行内元素	不独占一行（一行可显示多个）；宽高、行高不可控制；默认宽度 = 内容宽度；仅容纳文本 / 行内元素；上下外边距不可控	`a`、`span`、`strong`、`em`、`i`

注意：p标签内不能放块级元素，a标签内不能放a标签。

4.2 改变显示模式（`display`）

作用：切换元素的显示模式，突破默认限制。
取值：
block：转为块级元素（如a标签转为块级后可设置宽高）。
inline：转为行内元素（如div标签转为行内后不独占一行）。
inline-block：转为行内块元素（不独占一行，可控制宽高、边距）。
示例：

a {
  display: block;
  width: 100px;
  height: 40px; /* 行内元素默认无法设置宽高，转为块级后生效 */
}
div {
  display: inline-block;
  width: 200px;
  height: 100px; /* 转为行内块后，不独占一行且可设置宽高 */
}

六、CSS 盒子模型

1. 核心组成

每个 HTML 元素都视为 “矩形盒子”，由外到内分为 4 部分：

外边距（margin）：盒子与其他盒子的距离。
边框（border）：盒子的边框（可设置粗细、样式、颜色）。
内边距（padding）：边框与内容的距离。
内容（content）：盒子内的文本、图片等内容。

2. 边框（`border`）

2.1 基础属性

border-width：边框粗细（如10px）。
border-style：边框样式（solid实线、dashed虚线、dotted点线，默认无样式）。
border-color：边框颜色（取值方式同color）。
简写：border: 粗细样式颜色（顺序无要求，如border: 10px solid green）。

2.2 方向设置

可单独设置四个方向的边框：border-top（上）、border-bottom（下）、border-left（左）、border-right（右）。

示例：

div {
  border-top: 2px solid red;
  border-right: 3px dashed blue;
}

2.3 圆角（`border-radius`）

作用：设置边框圆角，数值越大，弧度越明显。
取值：
数值 + px：统一设置四个角（如border-radius: 10px）。
四个数值：顺时针设置左上、右上、右下、左下（如border-radius: 10px 20px 30px 40px）。
特殊用法：
正方形元素：border-radius: 50%（生成圆形）。
矩形元素：border-radius: 元素高度的50%（生成圆角矩形）。
示例：

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%; /* 圆形 */
}
.rect {
  width: 200px;
  height: 100px;
  border-radius: 50px; /* 圆角矩形 */
}

2.4 避免边框撑大盒子

默认情况下，边框会增加盒子的实际宽高（如盒子宽 500px + 左右边框各 10px = 实际宽 520px）。

解决方案：设置box-sizing: border-box，让边框包含在盒子宽高内。
示例：

div {
  width: 500px;
  height: 250px;
  border: 10px solid green;
  box-sizing: border-box; /* 实际宽高仍为500px×250px */
}

3. 内边距（`padding`）

3.1 方向设置

基础写法：padding-top（上）、padding-bottom（下）、padding-left（左）、padding-right（右）。
复合写法（4 种）：
padding: 5px：四个方向均为 5px。
padding: 5px 10px：上下 5px，左右 10px。
padding: 5px 10px 20px：上 5px，左右 10px，下 20px。
padding: 5px 10px 20px 30px：上 5px、右 10px、下 20px、左 30px（顺时针）。
示例：

div {
  padding: 10px 20px; /* 上下10px，左右20px */
}

3.2 注意事项

内边距默认会撑大盒子，可通过box-sizing: border-box解决。

4. 外边距（`margin`）

4.1 方向设置

基础写法：margin-top（上）、margin-bottom（下）、margin-left（左）、margin-right（右）。
复合写法：与padding完全一致。
示例：

div {
  margin: 0 auto; /* 上下0，左右自动（块级元素水平居中） */
}

4.2 特殊用法：块级元素水平居中

实现条件：给块级元素指定宽度（默认与父元素同宽，无需指定）。
实现方式：margin-left: auto + margin-right: auto，或简写为margin: 0 auto。
示例：

div {
  width: 800px;
  margin: 0 auto; /* 水平居中 */
}

七、弹性布局（Flex 布局，开发首选）

1. 核心概念

弹性容器：给父元素添加display: flex，该父元素即为弹性容器。
弹性元素：弹性容器的所有子元素自动转为弹性元素，不再遵循块级 / 行内元素规则（可设置宽高、边距）。
主轴与侧轴：
主轴：默认水平方向（从左到右），可通过flex-direction修改。
侧轴：默认垂直方向（从上到下），与主轴垂直。
注意：弹性容器内的子元素，float、clear、vertical-align属性失效。

2. 核心属性（作用于弹性容器）

2.1 主轴排列（`justify-content`）

作用：控制弹性元素在主轴上的排列方式。
取值（5 种）：
flex-start：默认，靠左（主轴起点）排列。
flex-end：靠右（主轴终点）排列。
center：主轴居中排列。
space-between：两端贴边，中间元素均匀分布（剩余空间平分）。
space-around：元素两侧间距相等（剩余空间包含元素前后）。
示例：

.container {
  display: flex;
  justify-content: space-between; /* 主轴均匀分布（两端贴边） */
}

2.2 侧轴排列（`align-items`）

作用：控制弹性元素在侧轴上的排列方式（针对单行弹性元素）。
取值（6 种）：
stretch：默认，弹性元素未设置高度时，拉伸填满侧轴高度。
center：侧轴居中排列（垂直居中）。
flex-start：靠上（侧轴起点）排列。
flex-end：靠下（侧轴终点）排列。
space-between：侧轴方向均匀分布（多行时）。
space-around：侧轴方向元素两侧间距相等（多行时）。
示例：

.container {
  display: flex;
  height: 300px;
  align-items: center; /* 侧轴居中（垂直居中） */
}

2.3 多行排列（`align-content`）

作用：当弹性元素换行时（需配合flex-wrap: wrap），控制多行元素在侧轴上的排列方式，用法与justify-content一致。

CSS基础教程

一、CSS 概述

二、CSS 语法规则

三、CSS 引入方式（3 种）

1. 内部样式

2. 内联样式

3. 外部样式（开发首选）

四、CSS 选择器（基础 + 复合）

1. 基础选择器（单个选择器构成）

1.1 标签选择器

1.2 类选择器

1.3 id 选择器

1.4 通配符选择器

2. 复合选择器（基础选择器组合）

2.1 后代选择器（包含选择器）

2.2 子选择器

2.3 并集选择器

2.4 伪类选择器（选中元素特定状态）

五、CSS 常用属性（字体、文本、背景、显示模式）

1. 字体属性

1.1 字体家族（font-family）

1.2 字体大小（font-size）

1.3 字体粗细（font-weight）

1.4 字体样式（font-style）

2. 文本属性

2.1 文本颜色（color）

2.2 文本对齐（text-align）

2.3 文本装饰（text-decoration）

2.4 文本缩进（text-indent）

2.5 文本行高（line-height）

3. 背景属性

3.1 背景颜色（background-color）

3.2 背景图片（background-image）

3.3 背景平铺（background-repeat）

3.4 背景位置（background-position）

3.5 背景尺寸（background-size）