CSS 简介

CSS（Cascading Style Sheets）是层叠样式表的缩写，是一种样式语言，用于描述页面元素的呈现方式。

• 提供了丰富的样式属性，从字体、颜色到布局和动画，让我们能够定制网页的外观和布局
• 广泛用于构建现代网页和 APP，是构建 UI 的核心技术之一
• 与 HTML 和 JavaScript 一起组成了前端开发的三大支柱：
  • HTML 负责定义页面的结构
  • CSS 负责样式的呈现
  • JavaScript 负责处理交互和动态效果
• CSS 由浏览器解释和执行，几乎所有现代浏览器都支持 CSS
• CSS 不依赖其他编程语言，可以直接嵌入 HTML 文档中，也可以作为外部样式表单独存在
• CSS 的上限很高，可以研究出很多复杂的样式

在编写css时一般都会写到另一个叫css的文件里面 比如：

<link rel="stylesheet" href="style.css">
<!-- 这里的rel是明确告诉浏览器，我在链接一个样式表文件 -->

• 直接通过 HTML 标签名（如 p、h1、div）来选择元素。
• 常用于全局基础样式设定或重置默认样式，比如统一所有段落的字体、行高等。
• 写法：标签名 { ... }

p { font-size: 16px; }
h1, h2, h3 { font-family: sans-serif; }

虽然不如类选择器那么精细，但在搭建页面基础风格时仍然很常用。

• 类选择器是最常用的选择器之一，因为它灵活、可复用。
• 一个 HTML 元素可以通过 class 属性同时指定多个类名，类名之间用空格分隔，方便组合不同的样式。
• 写法：.类名 { ... }

.box { border: 1px solid #ccc; }
.highlight { background: yellow; }

<!-- 同时使用多个类 -->
<div class="box highlight">...</div>

• ID 选择器用于选中拥有特定 id 属性的唯一元素（一个页面中同一个 id 只能出现一次）。
• 适合用来定义某个特定模块的固定样式，但不推荐大量用于样式复用。
• 写法：#id名 { ... }

#header { ... }

注意：虽然 ID 选择器的优先级很高，但在实际开发中，更推荐优先使用类选择器来管理样式，以保持低耦合和可复用性。

作用：根据元素是否拥有某个属性，或该属性的具体值来选择元素。非常适合在没有修改 HTML 类名的情况下，对特定类型的元素进行样式区分。 基本语法：

• [attr]
  选择带有 attr 属性的所有元素，无论值是什么。

[disabled] {
  opacity: 0.5;
}
/* 所有带 disabled 属性的元素都会半透明 */

• [attr="value"]
  选择 attr 属性值完全等于 value 的元素。

input[type="text"] {
  border: 1px solid #333;
}
/* 只选中 type 为 text 的输入框 */

• [attr^="value"]
  选择 attr 属性值以 value 开头的元素。

a[href^="https://"] {
  color: green;
}
/* 所有外部安全链接（https开头）变绿色 */

• [attr$="value"]
  选择 attr 属性值以 value 结尾的元素。

a[href$=".pdf"] {
  background: url(icon-pdf.svg) no-repeat right center;
}
/* 所有指向 PDF 的链接后面加一个图标 */

• [attr*="value"]
  选择 attr 属性值包含 value 子串的元素。

div[class*="card"] {
  border-radius: 8px;
}
/* 类名中包含 "card" 的所有 div（如 card、card-header、my-card）都会圆角 */

常见用途：

• 区分不同类型的 <input>（如 [type="checkbox"]、[type="radio"]）。
• 利用自定义数据属性（data-*）进行样式控制，如 [data-status="error"]。
• 美化指向特定文件类型的链接。

作用：表示元素的特定状态或在结构中的特定位置。它不会改变 DOM，而是捕捉用户交互、元素顺序等动态条件。

1. 动态交互伪类

• :hover —— 鼠标悬停时。
• :focus —— 元素获得焦点时（常用于输入框、按钮）。
• :active —— 元素被激活时（如鼠标按下但未松开）。

button:hover {
  background-color: #0056b3;
}
button:active {
  background-color: #003d80;
}

2. 结构伪类

根据元素在父容器中的位置来选择。

• :first-child / :last-child —— 父元素下第一个或最后一个子元素。
• :nth-child(n) —— 选择父元素下第 n 个子元素（n 从 1 开始计数）。
  • :nth-child(odd) / :nth-child(even) 隔行变色常用。
• :first-of-type / :last-of-type / :nth-of-type(n) —— 在兄弟元素中按同类型排序。

li:first-child {
  font-weight: bold;
}
tr:nth-child(even) {
  background-color: #f2f2f2;
}
/* 表格条纹背景 */
p:first-of-type {
  font-size: 1.2em;
}
/* 选择父元素中第一个 <p> 段落，忽略其他类型元素排序 */

3. 其他常用伪类

• :not(selector) —— 排除匹配选择器的元素。
• :empty —— 没有子元素（包括文本节点）的元素。
• :checked —— 被选中的复选框或单选框。

a:not(.external) {
  text-decoration: none;
}
/* 除带有 .external 类的链接外，取消下划线 */

注意：伪类是单冒号 :，而伪元素（如 ::before、::after）是双冒号，两者概念不同，不要混淆。

它们都属于关系选择器（也叫组合器），用来表达元素之间的层级关系。

1. 后代选择器（Descendant Combinator）

• 写法：A B（中间用空格）
• 选中 A 内部所有层级中的 B 元素，无论嵌套多深。

div p {
  color: #666;
}
/* div 里的所有段落（包括子元素中的段落、孙子元素中的段落）都会变成灰色 */

• 适合：需要约束样式的作用域，但又不在乎目标元素的直接父子关系。

2. 子代选择器（Child Combinator）

• 写法：A > B（> 两边可以有空格）
• 只选择 A 的直接子元素 B，不涉及更深的后代。

ul > li {
  margin-bottom: 8px;
}
/* 只对 ul 正下方的 li 生效，不影响 li 里再嵌套的 ul 下的 li */

• 适合：希望样式仅影响紧邻的一层，避免污染深层嵌套结构。 对比示例： 假设有 HTML 结构：

<div class="container">
  <p>段落1（直接子元素）</p>
  <div class="inner">
    <p>段落2（孙元素）</p>
  </div>
</div>

.container p {
  border-left: 2px solid blue;
}
/* 段落1 和 段落2 都会出现蓝色左边框（后代） */
.container > p {
  border-left: 2px solid red;
}
/* 只有段落1 会出现红色左边框（直接子元素） */

实践建议：

• 能使用子代选择器的地方，优先用子代，避免无意间影响深层元素。
• 后代选择器更适合建立”组件内部所有某类元素”的宽松规则。

定义字体

font-family: "微软雅黑", sans-serif;  /* 字体名称，可设多个作为回退 */

自定义字体使用 @font-face：

@font-face {
  font-family: "MyFont";
  src: url("myfont.woff2") format("woff2");
}

字体样式

font-style: italic;  /* 斜体 */
font-style: normal;  /* 正常（取消斜体） */

字体装饰

text-decoration: underline;       /* 下划线 */
text-decoration: line-through;    /* 删除线 */
text-decoration: overline;        /* 上划线 */
text-decoration: none;            /* 去掉所有装饰 */
text-decoration: underline overline;                    /* 下划线 + 上划线 */
text-decoration: underline overline line-through;       /* 三者叠加 */

字体大小

font-size: 30px;  /* 字体大小 */

字体粗细

font-weight: 700;    /* 加粗（数值 100–900） */
font-weight: bold;   /* 加粗（关键字，等价 700） */
font-weight: normal; /* 正常（等价 400） */

颜色名

color: red;
background-color: blue;

RGB / RGBA

color: rgb(255, 255, 255);          /* 白色 */
color: rgba(255, 0, 0, 0.5);        /* 半透明红色 */

Hex（十六进制）

color: #fff;      /* 白色（缩写） */
color: #ffffff;   /* 白色（完整） */
color: #000;      /* 黑色 */

HSL / HSLA

color: hsl(0, 100%, 50%);            /* 红色 */
color: hsla(0, 100%, 50%, 0.5);      /* 半透明红色 */

元素透明度

opacity: 0.5;    /* 整个元素半透明（含子元素），值 0–1 */

注意：opacity 影响整个元素（含子元素），如果只想让背景透明，用 rgba() 或 hsla() 设置 background-color。

盒子边距

| 外边距 | margin | | 内边距 | padding |

使用方法

margin: 0 auto;             /* 水平居中 */
margin-top: 10px;           /* 上边距 */
margin-bottom: 10px;        /* 下边距 */
margin-left: 10px;          /* 左边距 */
margin-right: 10px;         /* 右边距 */
margin: 10px 20px;          /* 上下 左右 */
margin: 10px 20px 30px 40px; /* 上 右 下 左（顺时针） */

padding: 10px;              /* 四边相同 */
padding: 10px 20px;         /* 上下 左右 */
padding: 10px 20px 30px 40px; /* 上 右 下 左 */

盒子边框

border: 1px solid red;        /* 粗细 样式 颜色 */
border-radius: 8px;           /* 圆角 */

盒子宽高

width: 100px;
height: 100px;
max-width: 600px;    /* 最大宽度 */
min-height: 200px;   /* 最小高度 */

元素类型

display: block;         /* 块级元素，独占一行 */
display: inline;        /* 行内元素，和其他元素在一行显示 */
display: inline-block;  /* 行内块元素，可设置宽高 */
display: none;          /* 隐藏元素，不占空间 */

弹性布局

display: flex;
flex-direction: row;          /* 主轴横向（默认） */
flex-direction: column;       /* 主轴纵向 */

主轴对齐（水平方向）

justify-content: flex-start;    /* 左对齐 */
justify-content: center;        /* 居中 */
justify-content: flex-end;      /* 右对齐 */
justify-content: space-between; /* 两端对齐，间距相等 */
justify-content: space-around;  /* 元素两侧有相等间距 */

交叉轴对齐（垂直方向，单行）

align-items: flex-start;  /* 顶部对齐 */
align-items: center;      /* 垂直居中 */
align-items: flex-end;    /* 底部对齐 */

多行对齐

align-content: flex-start;     /* 顶部对齐 */
align-content: space-between;  /* 两端对齐 */
align-content: space-around;   /* 间距相等 */

弹性比例

flex: 1;  /* 占用剩余空间 */

间距

gap: 10px;  /* 子元素间距 */

网格布局

display: grid;
grid-template-columns: repeat(3, 1fr);     /* 3列，等宽 */
grid-template-columns: 100px 200px 300px;  /* 3列，指定宽度 */
grid-template-rows: repeat(3, 1fr);        /* 3行，等高 */
grid-template-rows: 100px 100px 300px;     /* 3行，指定高度 */
grid-auto-rows: 100px;    /* 自动生成行的高度 */
gap: 10px;                /* 行列间距 */

CSS 定位（简洁版）

属性值速查表

| 值 | 偏移基准 | 脱离文档流 | 典型场景 | | static | 无（默认） | ❌ | 常规布局 | | relative | 自身原位置 | ❌（占位保留） | 微调、作为绝对定位的父容器 | | absolute | 最近的非static祖先 | ✅ | 浮窗、图标角标 | | fixed | 浏览器视口 | ✅ | 固定导航栏、返回顶部 | | sticky | 滚动容器（混合模式） | ❌（占位保留） | 表头吸顶、侧边栏 |

常用代码片段

/* 相对定位微调 */
.relative { position: relative; top: 5px; }
/* 绝对定位（父级需 relative）*/
.parent { position: relative; }
.child { position: absolute; top: 0; right: 0; }
/* 固定导航栏 */
.nav { position: fixed; top: 0; width: 100%; }
/* 粘性表头 */
th { position: sticky; top: 0; }
/* 居中弹窗 */
.modal {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}

关键点

• 偏移属性：top / right / bottom / left（仅对非static生效）
• 层级：z-index 控制堆叠顺序（仅非static元素有效）
• absolute无锚点 → 相对 <html>（随页面滚动，不同于fixed）
• sticky需指定阈值（如 top:0）才生效，且不兼容IE

transform 常用函数

函数	作用	示例
translate(x, y)	平移	transform: translate(10px, 20px);
translateX(n)	X轴平移	transform: translateX(50%);
translateY(n)	Y轴平移	transform: translateY(-10px);
scale(n)	缩放	transform: scale(1.5);
rotate(deg)	旋转	transform: rotate(45deg);
skew(deg)	倾斜	transform: skew(10deg);
matrix()	矩阵变形	不常用

常用组合示例

/* 居中（position + transform）*/
.center {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}
/* 悬浮放大 */
.card:hover {
  transform: scale(1.05);
  transition: 0.3s;
}
/* 旋转动画 */
.spin {
  transform: rotate(360deg);
}

关键注意点

要点	说明
transform 不影响文档流	平移/缩放后原占位空间不变（类似 relative）
transform 创建新层	会触发 GPU 加速，动画更流畅
与 position: fixed 冲突	transform 会破坏 fixed 相对于视口的效果（变成相对 transform 容器）
多个变换写在一起	transform: translate(10px, 10px) rotate(45deg); 顺序影响结果
百分比参照	translate(50%) 参照自身宽高；top/left 参照父容器

CSS 动画

CSS 动画分为两类：过渡（transition） 和 关键帧动画（animation）。

一、过渡 transition

| 属性 | 说明 | 示例值 | | transition-property | 要过渡的属性 | all, width, opacity | | transition-duration | 过渡时长 | 0.3s, 300ms | | transition-timing-function | 速度曲线 | ease, linear, ease-in-out | | transition-delay | 延迟时间 | 0s, 0.2s | 简写：transition: <属性> <时长> <曲线> <延迟>;

/* 鼠标悬停时宽度平滑变化 */
.box {
  width: 100px;
  transition: width 0.3s ease;
}
.box:hover {
  width: 200px;
}

二、关键帧动画 animation

| 属性 | 说明 | 示例值 | | animation-name | 关键帧名称 | slide, fade | | animation-duration | 动画时长 | 1s | | animation-timing-function | 速度曲线 | ease, linear | | animation-delay | 延迟 | 0s | | animation-iteration-count | 播放次数 | 1, infinite | | animation-direction | 方向 | normal, reverse, alternate | | animation-fill-mode | 结束后状态 | forwards（停在最后） | | animation-play-state | 运行/暂停 | running, paused | 简写：animation: <名称> <时长> <曲线> <延迟> <次数> <方向> <填充>;

/* 定义关键帧 */
@keyframes slide {
  0% { transform: translateX(0); }
  100% { transform: translateX(100px); }
}
/* 应用动画 */
.box {
  animation: slide 1s ease-in-out 2 forwards;
}

三、常用动画示例

/* 淡入淡出 */
@keyframes fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
.fade { animation: fade 0.5s; }
/* 旋转加载 */
@keyframes spin {
  100% { transform: rotate(360deg); }
}
.loader {
  animation: spin 1s linear infinite;
}
/* 脉冲效果 */
@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}
.btn:hover { animation: pulse 0.3s; }

四、transition vs animation

| 对比项 | transition | animation | | 触发方式 | 需要事件（hover、类变化等） | 自动执行（页面加载即开始） | | 循环 | 单次，可反向 | 可无限循环 | | 中间帧控制 | 只能首尾两帧 | 可定义任意多关键帧 | | 脚本控制 | 有限 | 可暂停、重置等 | | 适用场景 | 简单交互反馈 | 复杂连续动画、加载动画 |

五、与 transform 配合建议

• 尽量对 transform 和 opacity 做动画，性能好（不触发重排）
• 避免动画 width、height、left/top 等属性（会触发重排）

/* 好 */
.slide {
  transition: transform 0.3s;
}
.slide:hover {
  transform: translateX(10px);
}
/* 差 */
.slide {
  transition: left 0.3s;
}
.slide:hover {
  left: 10px;
}

六、关键速记

• 过渡 = 状态 A → 状态 B，需触发
• 关键帧 = 任意时间点控制，自动运行
• 性能：动画 transform + opacity，用 GPU 加速