xf_blog　副站　 友链　 归档　 标签

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

CSS 学习文档

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

1. CSS 简介

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

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

2. CSS 语法

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

选择器 {
  属性: 值;
  属性: 值;
}

示例：

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 属性选择器

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

3.4 伪类与伪元素

见后续章节。

4. CSS 使用方式

内联样式：在 HTML 标签中使用 style 属性。
```
<p style="color: blue;">文本</p>
```
内部样式：在 <head> 中使用 <style> 标签。
```
<style> p { color: blue; } </style>
```
外部样式：使用 <link> 引入外部 .css 文件。
```
<link rel="stylesheet" href="style.css">
```

5. CSS 注释

/* 这是单行注释 */
/*
  多行注释
*/

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 背景

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 边框

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：元素外边距，控制元素与其他元素的距离。

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）

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

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

12. CSS 文本

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 字体

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。

<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 链接

链接伪类控制不同状态：

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

顺序应为 LVHA。

16. CSS 列表

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 表格

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）

display: block;        /* 块级元素 */
display: inline;       /* 行内元素 */
display: inline-block; /* 行内块元素 */
display: none;         /* 隐藏且不占位 */

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

19. CSS 定位（position）

static：默认，正常文档流。
relative：相对其正常位置偏移，保留原空间。
absolute：相对于最近的已定位祖先（非 static）定位，脱离文档流。
fixed：相对于浏览器窗口定位，脱离文档流。
sticky：粘性定位，基于滚动位置切换 relative/fixed。

div {
  position: absolute;
  top: 10px;
  left: 20px;
  z-index: 1; /* 层叠顺序 */
}

20. CSS 层叠（z-index）

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

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

21. CSS 溢出（overflow）

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

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

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

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

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

清除浮动：

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

23. CSS 对齐

水平居中：

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

垂直居中：

单行文本：设置 line-height 等于容器高度。

绝对定位 + transform：

position: absolute;
top: 50%;
transform: translateY(-50%);

Flexbox（推荐）：

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

示例：

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

26. CSS 伪元素

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

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

示例：

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

27. CSS 不透明度（opacity）

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

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

28. CSS 导航栏

垂直导航：

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 200px;
}
li a {
  display: block;
  padding: 8px 16px;
  text-decoration: none;
}

水平导航：

li {
  display: inline;
}
/* 或使用 Flexbox */
ul {
  display: flex;
  justify-content: space-around;
}

29. CSS 下拉菜单

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

.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 提示工具

利用伪元素和定位实现：

.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 请求。

.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 媒体类型

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

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

33. CSS 属性选择器

见 3.3 节。

34. CSS 计数器

自动编号，如章节标题：

body {
  counter-reset: section;  /* 创建计数器 */
}
h2::before {
  counter-increment: section;  /* 递增 */
  content: "Section " counter(section) ": ";
}

35. CSS 布局 - Flexbox

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

容器属性：

.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; /* 多行对齐 */
}

项目属性：

.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

二维布局模型。

容器属性：

.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;
}

项目属性：

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

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

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

/* 移动优先：基础样式 */
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）：

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

39. CSS 动画

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

定义关键帧：

@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; }
}

应用动画：

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）

平滑改变属性值。

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）

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

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 变量（自定义属性）

定义可复用的值。

:root {
  --main-color: #3498db;
  --padding: 10px;
}
div {
  color: var(--main-color);
  padding: var(--padding);
}

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

43. CSS 函数

calc()：计算值，支持 + - * /。
```
width: calc(100% - 80px);
```
var()：引用 CSS 变量。
rgb() / rgba() / hsl() / hsla()
url()：引入资源。
attr()：获取 HTML 属性值（用于 content）。

min() / max() / clamp()：比较值。

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
通配符、组合器：无贡献

/* 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

示例：

.my-element {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

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

总结

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

联系我

bilibili

YouTube

VICP-T6JGPJNE

本网站在 GitHub 开源，点击此处查看

xf_blog 副站 友链 归档 标签