你已处于离线状态，显示的是缓存的页面内容

学css的文档

时间：2026-03-15   标签： web, css,

我忽然意识到我还没怎么学正儿八经css，就让d老师写了一个，凑合看吧

CSS 学习文档

CSS（Cascading Style Sheets，层叠样式表）用于描述 HTML 元素的显示样式。它可以控制网页的布局、颜色、字体、动画等。本教程将系统介绍 CSS 的常用概念和属性。

1. CSS 简介

CSS 是一种样式表语言，用来定义 HTML 文档的外观和格式。
优点：

  • 内容与表现分离，便于维护
  • 样式可复用，减少代码量
  • 提供更丰富的样式控制（如动画、响应式布局）

2. CSS 语法

CSS 规则由选择器和声明块组成：

1
2
3
4
选择器 {
  属性: 值;
  属性: 值;
}

示例：

1
2
3
4
p {
  color: red;
  font-size: 16px;
}

3. CSS 选择器

3.1 基本选择器

选择器 示例 描述
元素选择器 p 选择所有 <p> 元素
类选择器 .classname 选择 class="classname" 的元素
ID 选择器 #idname 选择 id="idname" 的元素
通配符选择器 * 选择所有元素

3.2 组合器选择器

组合器 示例 描述
后代 div p 选择 <div> 内的所有 <p>
子元素 div > p 选择 <div> 的直接子元素 <p>
相邻兄弟 h1 + p 选择紧接在 <h1> 后的 <p>
通用兄弟 h1 ~ p 选择 <h1> 后面的所有 <p>

3.3 属性选择器

1
2
3
4
5
[attr]          /* 包含 attr 属性的元素 */
[attr="value"]  /* 属性值等于 value */
[attr^="val"]   /* 属性值以 val 开头 */
[attr$="val"]   /* 属性值以 val 结尾 */
[attr*="val"]   /* 属性值包含 val */

3.4 伪类与伪元素

见后续章节。

4. CSS 使用方式

  • 内联样式：在 HTML 标签中使用 style 属性。 

    1
    <p style="color: blue;">文本</p>

  • 内部样式：在 <head> 中使用 <style> 标签。 

    1
    <style> p { color: blue; } </style>

  • 外部样式：使用 <link> 引入外部 .css 文件。 

    1
    <link rel="stylesheet" href="style.css">

5. CSS 注释

1
2
3
4
/* 这是单行注释 */
/*
  多行注释
*/

6. CSS 颜色

常用颜色表示法：

  • 颜色名：red, blue 等
  • 十六进制：#ff0000（简写 #f00）
  • RGB/RGBA：rgb(255,0,0)，rgba(255,0,0,0.5)
  • HSL/HSLA：hsl(0,100%,50%)，hsla(0,100%,50%,0.5)

7. CSS 背景

1
2
3
4
5
6
7
8
div {
  background-color: lightblue;
  background-image: url("bg.png");
  background-repeat: repeat-x; /* 水平平铺 */
  background-position: center top;
  background-size: cover;      /* 覆盖整个区域 */
  background-attachment: fixed; /* 背景固定 */
}

简写：background: #fff url("img.png") no-repeat center;

8. CSS 边框

1
2
3
4
5
div {
  border-width: 2px;
  border-style: solid; /* solid, dotted, dashed, double 等 */
  border-color: red;
}

简写：border: 2px solid red;
还可以单独设置各边：border-top, border-right 等。

圆角边框：border-radius: 10px;（可设四个值：左上、右上、右下、左下）

9. CSS 边距（margin）和内边距（padding）

  • margin：元素外边距，控制元素与其他元素的距离。 

    1
    2
    3
    margin: 10px;                /* 四边相同 */
    margin: 10px 20px;           /* 上下 10px，左右 20px */
    margin: 10px 20px 30px 40px; /* 上 右 下 左 */

  • padding：元素内边距，控制内容与边框的距离。
    语法与 margin 相同。

10. CSS 盒模型

所有 HTML 元素可以看作一个盒子，包含：

  • 内容（content）
  • 内边距（padding）
  • 边框（border）
  • 外边距（margin）

标准盒模型：width 和 height 只设置内容的宽度/高度。
怪异盒模型（IE 盒模型）：box-sizing: border-box; 使 width 包含内容、内边距和边框。

11. CSS 轮廓（outline）

轮廓绘制在边框外面，不占空间。

1
2
outline: 2px dashed blue;
outline-offset: 5px; /* 轮廓与边框的距离 */

12. CSS 文本

1
2
3
4
5
6
7
8
9
10
11
12
p {
  color: #333;
  text-align: center;   /* left, right, justify */
  text-decoration: underline; /* overline, line-through, none */
  text-transform: uppercase; /* lowercase, capitalize */
  text-indent: 2em;     /* 首行缩进 */
  letter-spacing: 2px;  /* 字符间距 */
  word-spacing: 5px;    /* 单词间距 */
  line-height: 1.6;     /* 行高 */
  white-space: nowrap;  /* 空白处理 */
  text-shadow: 2px 2px 4px gray; /* 水平偏移 垂直偏移 模糊半径 颜色 */
}

13. CSS 字体

1
2
3
4
5
6
7
body {
  font-family: "Helvetica", "Arial", sans-serif;
  font-size: 16px;
  font-weight: bold; /* normal, bold, 100~900 */
  font-style: italic; /* normal, oblique */
  font-variant: small-caps;
}

简写：font: italic bold 16px/1.5 "Arial", sans-serif;

14. CSS 图标

通常使用字体图标库（如 Font Awesome）或 SVG。

1
2
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<i class="fas fa-home"></i>

15. CSS 链接

链接伪类控制不同状态：

1
2
3
4
a:link    { color: blue; }      /* 未访问 */
a:visited { color: purple; }     /* 已访问 */
a:hover   { color: red; }        /* 鼠标悬停 */
a:active  { color: orange; }     /* 点击瞬间 */

顺序应为 LVHA。

16. CSS 列表

1
2
3
4
5
ul {
  list-style-type: square;   /* disc, circle, decimal, none 等 */
  list-style-position: inside; /* outside */
  list-style-image: url("marker.png");
}

简写：list-style: square inside url("marker.png");

17. CSS 表格

1
2
3
4
5
6
7
8
9
10
table {
  border-collapse: collapse;  /* 合并边框 */
  width: 100%;
}
td, th {
  border: 1px solid black;
  padding: 8px;
  text-align: left;
}
tr:nth-child(even) { background-color: #f2f2f2; } /* 斑马纹 */

18. CSS 显示（display）和可见性（visibility）

1
2
3
4
5
6
7
display: block;        /* 块级元素 */
display: inline;       /* 行内元素 */
display: inline-block; /* 行内块元素 */
display: none;         /* 隐藏且不占位 */

visibility: hidden;    /* 隐藏但占位 */
visibility: visible;

19. CSS 定位（position）

  • static：默认，正常文档流。
  • relative：相对其正常位置偏移，保留原空间。
  • absolute：相对于最近的已定位祖先（非 static）定位，脱离文档流。
  • fixed：相对于浏览器窗口定位，脱离文档流。
  • sticky：粘性定位，基于滚动位置切换 relative/fixed。
1
2
3
4
5
6
div {
  position: absolute;
  top: 10px;
  left: 20px;
  z-index: 1; /* 层叠顺序 */
}

20. CSS 层叠（z-index）

z-index 控制定位元素在 Z 轴上的堆叠顺序，值越大越靠上。

1
z-index: 10; /* 仅对定位元素有效 */

21. CSS 溢出（overflow）

控制内容溢出容器时的行为：

1
2
3
4
overflow: visible;  /* 默认，溢出可见 */
overflow: hidden;   /* 隐藏溢出 */
overflow: scroll;   /* 显示滚动条 */
overflow: auto;     /* 根据需要显示滚动条 */

可单独设置 overflow-x 和 overflow-y。

22. CSS 浮动（float）和清除（clear）

1
2
3
4
img {
  float: left; /* right, none */
  margin-right: 10px;
}

清除浮动：

1
2
3
4
5
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

23. CSS 对齐

水平居中：

  • 块元素：margin: 0 auto;
  • 行内/行内块元素：父元素 text-align: center;

垂直居中：

  • 单行文本：设置 line-height 等于容器高度。
  • 绝对定位 + transform：
    1
    2
    3
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  • Flexbox（推荐）：
    1
    2
    3
    display: flex;
    align-items: center;
    justify-content: center;

24. CSS 组合器

已在选择器部分介绍（后代、子、相邻兄弟、通用兄弟）。

25. CSS 伪类

伪类用于定义元素的特殊状态。常见的有：

  • 结构伪类：:first-child, :last-child, :nth-child(n), :nth-of-type(n)
  • 状态伪类：:hover, :focus, :checked, :disabled
  • 其他：:not(selector), :target, :empty

示例：

1
2
li:nth-child(odd) { background: gray; }
input:focus { border-color: blue; }

26. CSS 伪元素

伪元素用于设置元素指定部分的样式。常用：

  • ::first-line：首行
  • ::first-letter：首字母
  • ::before：在元素内容前插入内容（需 content）
  • ::after：在元素内容后插入内容
  • ::selection：用户选中的部分

示例：

1
2
p::first-line { font-weight: bold; }
a::before { content: "→ "; }

27. CSS 不透明度（opacity）

1
2
3
div {
  opacity: 0.5; /* 0~1，0 完全透明 */
}

也可用 rgba() 或 hsla() 设置半透明背景。

28. CSS 导航栏

垂直导航：

1
2
3
4
5
6
7
8
9
10
11
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 200px;
}
li a {
  display: block;
  padding: 8px 16px;
  text-decoration: none;
}

水平导航：

1
2
3
4
5
6
7
8
li {
  display: inline;
}
/* 或使用 Flexbox */
ul {
  display: flex;
  justify-content: space-around;
}

29. CSS 下拉菜单

利用 hover 控制隐藏元素的显示：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.dropdown {
  position: relative;
  display: inline-block;
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown:hover .dropdown-content {
  display: block;
}

30. CSS 提示工具

利用伪元素和定位实现：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.tooltip {
  position: relative;
  display: inline-block;
}
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;
}
.tooltip:hover .tooltiptext {
  visibility: visible;
}

31. CSS 图像拼合（Sprite）

将多张小图合成一张大图，通过 background-position 显示所需部分，减少 HTTP 请求。

1
2
3
4
5
6
7
8
9
10
11
.icon {
  width: 50px;
  height: 50px;
  background: url("sprite.png") no-repeat;
}
.icon-home {
  background-position: 0 0;
}
.icon-user {
  background-position: -50px 0;
}

32. CSS 媒体类型

用于不同媒体设备，但现代开发多使用媒体查询（见响应式设计）。

1
2
3
@media print {
  body { font-size: 12pt; }
}

33. CSS 属性选择器

见 3.3 节。

34. CSS 计数器

自动编号，如章节标题：

1
2
3
4
5
6
7
body {
  counter-reset: section;  /* 创建计数器 */
}
h2::before {
  counter-increment: section;  /* 递增 */
  content: "Section " counter(section) ": ";
}

35. CSS 布局 - Flexbox

一维布局模型，用于行或列排列。

容器属性：

1
2
3
4
5
6
7
8
.container {
  display: flex;
  flex-direction: row;      /* column, row-reverse, column-reverse */
  flex-wrap: wrap;          /* nowrap, wrap-reverse */
  justify-content: center;  /* flex-start, space-between, space-around */
  align-items: center;      /* stretch, flex-start, baseline */
  align-content: space-between; /* 多行对齐 */
}

项目属性：

1
2
3
4
5
6
7
.item {
  order: 2;                 /* 排序，默认 0 */
  flex-grow: 1;             /* 放大比例 */
  flex-shrink: 1;           /* 缩小比例 */
  flex-basis: auto;         /* 项目初始大小 */
  align-self: center;       /* 覆盖容器的 align-items */
}

简写：flex: 1 1 200px; 等价于 flex-grow:1; flex-shrink:1; flex-basis:200px;

36. CSS 布局 - Grid

二维布局模型。

容器属性：

1
2
3
4
5
6
7
8
9
10
11
12
.container {
  display: grid;
  grid-template-columns: 100px 1fr 2fr; /* 三列，第一列100px，后两列按比例 */
  grid-template-rows: 50px auto 50px;
  gap: 10px;                /* 行列间距 */
  grid-template-areas: 
    "header header header"
    "menu main main"
    "footer footer footer";
  justify-items: stretch;
  align-items: stretch;
}

项目属性：

1
2
3
4
5
6
7
.item {
  grid-column: 1 / 3;       /* 从第1列线到第3列线 */
  grid-row: span 2;         /* 跨2行 */
  grid-area: header;        /* 指定区域名称 */
  justify-self: center;
  align-self: center;
}

37. CSS 响应式设计（媒体查询）

根据设备特性（如视口宽度）应用不同样式。

1
2
3
4
5
6
7
8
9
10
11
12
/* 移动优先：基础样式 */
body { font-size: 16px; }

/* 平板 */
@media (min-width: 768px) {
  body { font-size: 18px; }
}

/* 桌面 */
@media (min-width: 1024px) {
  body { font-size: 20px; }
}

常用断点：576px, 768px, 992px, 1200px。

38. CSS @规则

  • @import：导入其他样式表。
  • @font-face：定义自定义字体。
  • @keyframes：定义动画关键帧。
  • @media：媒体查询。
  • @supports：检测浏览器是否支持某属性。

示例（@font-face）：

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

39. CSS 动画

使用 @keyframes 定义动画序列，然后通过 animation 属性调用。

定义关键帧：

1
2
3
4
5
6
7
8
9
10
@keyframes example {
  from { background-color: red; }
  to   { background-color: yellow; }
}
/* 或使用百分比 */
@keyframes example {
  0%   { left: 0; top: 0; }
  50%  { left: 200px; top: 0; }
  100% { left: 200px; top: 200px; }
}

应用动画：

1
2
3
4
5
6
7
8
9
div {
  animation-name: example;
  animation-duration: 4s;
  animation-timing-function: ease;
  animation-delay: 1s;
  animation-iteration-count: infinite; /* 或数字 */
  animation-direction: alternate;      /* normal, reverse, alternate */
  animation-fill-mode: forwards;       /* 保持最后一帧状态 */
}

简写：animation: example 4s ease 1s infinite alternate;

40. CSS 过渡（transition）

平滑改变属性值。

1
2
3
4
5
6
7
div {
  width: 100px;
  transition: width 2s, height 2s;
}
div:hover {
  width: 200px;
}

属性：transition-property, duration, timing-function, delay。
简写：transition: all 0.3s ease;

41. CSS 变换（transform）

对元素进行旋转、缩放、移动、倾斜。

1
2
3
4
transform: rotate(45deg);          /* 旋转 */
transform: scale(1.5);             /* 缩放 */
transform: translate(50px, 100px); /* 移动 */
transform: skew(10deg, 5deg);      /* 倾斜 */

可组合使用：transform: rotate(45deg) scale(1.2);

3D 变换：rotateX(), rotateY(), translateZ(), scaleZ() 等。

42. CSS 变量（自定义属性）

定义可复用的值。

1
2
3
4
5
6
7
8
:root {
  --main-color: #3498db;
  --padding: 10px;
}
div {
  color: var(--main-color);
  padding: var(--padding);
}

可设置回退值：var(--color, blue)。

43. CSS 函数

  • calc()：计算值，支持 + - * /。 
    1
    width: calc(100% - 80px);
  • var()：引用 CSS 变量。
  • rgb() / rgba() / hsl() / hsla()
  • url()：引入资源。
  • attr()：获取 HTML 属性值（用于 content）。
  • min() / max() / clamp()：比较值。
    1
    2
    width: min(100px, 50%);
    font-size: clamp(1rem, 2.5vw, 2rem);

44. CSS 单位

  • 绝对单位：px（像素）, pt（点）, cm, mm 等。
  • 相对单位：
    • %：相对于父元素。
    • em：相对于当前元素的字体大小。
    • rem：相对于根元素（<html>）字体大小。
    • vw / vh：视口宽度的 1% / 高度的 1%。
    • vmin / vmax：视口较小/较大边的 1%。
    • ch：数字“0”的宽度。
    • ex：当前字体 x-height。

45. CSS 特异性（Specificity）

当多个规则冲突时，选择器的特异性决定哪个规则生效。
特异性值计算（四位数，从左到右重要性递减）：

  • 内联样式：1,0,0,0
  • ID 选择器：0,1,0,0
  • 类、伪类、属性选择器：0,0,1,0
  • 元素、伪元素：0,0,0,1
  • 通配符、组合器：无贡献
1
2
3
4
5
/* 0,0,1,0 */
.class { color: blue; }
/* 0,0,0,1 */
p { color: red; }
/* 类选择器胜出，元素为蓝色 */

46. 浏览器支持前缀

为确保兼容性，有时需要添加厂商前缀：

  • -webkit-：Chrome, Safari, Edge
  • -moz-：Firefox
  • -ms-：Internet Explorer
  • -o-：Opera

示例：

1
2
3
4
5
.my-element {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

现在许多属性已无需前缀，可使用 caniuse 查询。

总结

本教程涵盖了 CSS 中最常用的属性和概念。学习 CSS 需要多实践，结合 HTML 编写样式，并利用浏览器开发者工具调试。掌握 Flexbox 和 Grid 可应对大部分布局需求，媒体查询实现响应式，动画和过渡增强交互体验。继续深入学习可参考 MDN 文档。

社交的

bilibili   email   YouTube

VICP-T6JGPJNE
© 2025 - 2026 lm-xiao-fen
文章内容遵循 CC BY-NC-SA 4.0 协议，源码遵循 APL 2.0 协议
源码 在GitHub开源
RSS 网站地图