MoonlitLog月光日志

CSS3 基础语法 ​

CSS（Cascading Style Sheets，层叠样式表）用于控制网页的外观和布局。

HTML 负责网页结构，CSS 负责网页样式。

可以简单理解为：

text
HTML → 搭建网页结构
CSS  → 美化网页样式
JavaScript → 实现网页交互

1. CSS 基本语法 ​

CSS 的基本格式：

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

例如：

css
p {
  color: red;
}

含义：

text
p        → 选择器
color    → 属性
red      → 属性值

这段 CSS 表示：

所有 <p> 标签中的文字颜色都设置为红色。

2. CSS 的三种使用方式 ​

CSS 一般有三种写法：

  • 行内样式
  • 内部样式
  • 外部样式

3. 行内样式 ​

直接通过元素的 style 属性设置样式。

html
<p style="color: red;">Hello CSS</p>

也可以设置多个属性：

html
<p style="color: red; font-size: 20px;">
  Hello CSS
</p>

这种方式适合少量临时样式。

实际开发中一般不推荐大量使用。

4. 内部样式 ​

在 HTML 的 <head> 中使用 <style> 标签。

html
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />

    <style>
      p {
        color: red;
      }
    </style>
  </head>

  <body>
    <p>Hello CSS</p>
  </body>
</html>

适合单个页面使用。

5. 外部样式 ​

将 CSS 单独写在 .css 文件中。

例如：

text
index.html
style.css

style.css：

css
p {
  color: red;
}

然后在 HTML 中引入：

html
<link rel="stylesheet" href="./style.css" />

完整示例：

html
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="./style.css" />
  </head>

  <body>
    <p>Hello CSS</p>
  </body>
</html>

实际开发中最常使用外部 CSS 文件。

CSS 选择器 ​

6. 标签选择器 ​

直接通过 HTML 标签名选择元素。

css
p {
  color: red;
}

对应：

html
<p>第一段</p>
<p>第二段</p>

所有 <p> 都会应用这个样式。

7. class 选择器 ​

HTML：

html
<p class="text">Hello CSS</p>

CSS：

css
.text {
  color: blue;
}

class 选择器需要在名称前加：

text
.

例如：

css
.title {
  font-size: 30px;
}

多个元素可以使用相同的 class：

html
<p class="text">HTML</p>
<p class="text">CSS</p>
<p class="text">JavaScript</p>

8. id 选择器 ​

HTML：

html
<h1 id="title">CSS 基础语法</h1>

CSS：

css
#title {
  color: black;
}

id 选择器使用：

text
#

作为开头。

通常：

text
class → 可以重复使用
id    → 页面中通常唯一

9. 通配选择器 ​

使用：

css
*

可以选择所有元素。

例如：

css
* {
  margin: 0;
  padding: 0;
}

表示所有元素：

text
外边距设为 0
内边距设为 0

10. 分组选择器 ​

如果多个元素使用相同样式，可以使用逗号：

css
h1,
h2,
h3 {
  color: black;
}

相当于：

css
h1 {
  color: black;
}

h2 {
  color: black;
}

h3 {
  color: black;
}

11. 后代选择器 ​

选择某个元素内部的元素。

HTML：

html
<div>
  <p>Hello</p>
</div>

CSS：

css
div p {
  color: red;
}

表示：

选择 div 内部所有的 p 元素。

12. 子元素选择器 ​

使用：

text
>

例如：

css
div > p {
  color: red;
}

只选择 div 的直接子元素。

例如：

html
<div>
  <p>会被选中</p>

  <section>
    <p>不会被直接选中</p>
  </section>
</div>

13. 属性选择器 ​

可以根据 HTML 属性选择元素。

例如：

css
input[type="text"] {
  border: 1px solid black;
}

对应：

html
<input type="text" />

常见 CSS 属性 ​

14. 文字颜色 ​

css
p {
  color: red;
}

也可以使用十六进制：

css
p {
  color: #ff0000;
}

或者 RGB：

css
p {
  color: rgb(255, 0, 0);
}

15. 背景颜色 ​

css
body {
  background-color: black;
}

例如：

css
div {
  background-color: #f5f5f5;
}

16. 字体大小 ​

使用：

css
font-size

例如：

css
p {
  font-size: 18px;
}

17. 字体粗细 ​

css
font-weight: bold;

例如：

css
h1 {
  font-weight: bold;
}

也可以使用数字：

css
font-weight: 400;

常见：

text
400 → 普通
500 → 中等
600 → 半粗
700 → 粗体

18. 字体 ​

使用：

css
font-family

例如：

css
body {
  font-family: Arial, sans-serif;
}

多个字体表示备用顺序。

如果第一个字体不可用，就尝试后面的字体。

19. 文本对齐 ​

css
text-align: center;

常见值：

text
left
center
right

例如：

css
h1 {
  text-align: center;
}

20. 文本装饰 ​

使用：

css
text-decoration

例如去掉链接下划线：

css
a {
  text-decoration: none;
}

添加下划线：

css
p {
  text-decoration: underline;
}

21. 行高 ​

css
line-height: 1.6;

例如：

css
p {
  line-height: 1.8;
}

行高经常用于提高正文的可读性。

22. 字符间距 ​

css
letter-spacing: 2px;

例如：

css
h1 {
  letter-spacing: 3px;
}

CSS 盒模型 ​

23. 什么是盒模型 ​

HTML 中的每一个元素都可以看作一个矩形盒子。

盒模型由四部分组成：

text
margin
border
padding
content

从外到内：

text
margin
  ↓
border
  ↓
padding
  ↓
content

可以理解为：

text
┌──────────── margin ────────────┐
│                                │
│   ┌──────── border ────────┐   │
│   │                        │   │
│   │   ┌──── padding ────┐ │   │
│   │   │                 │ │   │
│   │   │    content      │ │   │
│   │   │                 │ │   │
│   │   └─────────────────┘ │   │
│   │                        │   │
│   └────────────────────────┘   │
│                                │
└────────────────────────────────┘

24. width 和 height ​

设置元素宽度：

css
div {
  width: 300px;
}

设置元素高度：

css
div {
  height: 200px;
}

同时设置：

css
div {
  width: 300px;
  height: 200px;
}

25. padding ​

padding 表示内边距。

例如：

css
div {
  padding: 20px;
}

表示内容与边框之间留出 20px 距离。

分别设置：

css
div {
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 10px;
  padding-left: 20px;
}

简写：

css
padding: 10px 20px;

表示：

text
上下 → 10px
左右 → 20px

26. margin ​

margin 表示外边距。

例如：

css
div {
  margin: 20px;
}

分别设置：

css
margin-top: 10px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;

常见居中写法：

css
div {
  width: 800px;
  margin: 0 auto;
}

含义：

text
上下外边距 → 0
左右外边距 → 自动

27. border ​

设置边框：

css
div {
  border: 1px solid black;
}

可以拆开写：

css
div {
  border-width: 1px;
  border-style: solid;
  border-color: black;
}

常见边框样式：

text
solid  → 实线
dashed → 虚线
dotted → 点线

28. border-radius ​

用于设置圆角。

css
div {
  border-radius: 10px;
}

圆形：

css
.avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

29. box-sizing ​

默认情况下，元素实际宽度可能受到 padding 和 border 的影响。

实际开发中经常使用：

css
* {
  box-sizing: border-box;
}

这样设置后：

text
width

会包含：

text
content
padding
border

布局会更加容易控制。

元素显示方式 ​

30. display ​

display 用于控制元素的显示方式。

常见值：

text
block
inline
inline-block
none
flex
grid

31. block ​

块级元素通常：

text
独占一行
可以设置宽高

例如：

css
div {
  display: block;
}

常见块级元素：

text
div
p
h1
section

32. inline ​

行内元素通常：

text
不会独占一行
宽高通常由内容决定

例如：

css
span {
  display: inline;
}

常见：

text
span
a
strong

33. inline-block ​

兼具行内和块级特点：

css
span {
  display: inline-block;
}

特点：

text
不会自动独占一行
可以设置 width 和 height

34. display: none ​

隐藏元素：

css
div {
  display: none;
}

元素不会显示，并且不会占据页面空间。

Flex 布局 ​

35. 开启 Flex ​

使用：

css
.container {
  display: flex;
}

HTML：

html
<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

默认情况下，子元素会横向排列。

36. flex-direction ​

控制主轴方向。

css
.container {
  display: flex;
  flex-direction: row;
}

常见：

text
row            → 横向
column         → 纵向
row-reverse    → 横向反转
column-reverse → 纵向反转

37. justify-content ​

控制主轴方向上的排列。

例如：

css
.container {
  display: flex;
  justify-content: center;
}

常见值：

text
flex-start
center
flex-end
space-between
space-around
space-evenly

38. align-items ​

控制交叉轴方向上的排列。

css
.container {
  display: flex;
  align-items: center;
}

常见值：

text
flex-start
center
flex-end
stretch

39. Flex 水平垂直居中 ​

非常常见的写法：

css
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

这样可以让子元素：

text
水平居中
垂直居中

40. gap ​

控制 Flex 或 Grid 子元素之间的间距。

css
.container {
  display: flex;
  gap: 20px;
}

相比给每个元素单独设置 margin，通常更方便。

定位 ​

41. position ​

CSS 常见定位方式：

text
static
relative
absolute
fixed
sticky

42. relative ​

相对定位：

css
.box {
  position: relative;
}

可以配合：

css
top
right
bottom
left

例如：

css
.box {
  position: relative;
  top: 10px;
  left: 20px;
}

43. absolute ​

绝对定位：

css
.box {
  position: absolute;
}

通常会相对于最近的已定位祖先元素进行定位。

例如：

html
<div class="parent">
  <div class="child"></div>
</div>
css
.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 10px;
  right: 10px;
}

这是非常常见的组合：

text
父元素 → relative
子元素 → absolute

44. fixed ​

固定定位：

css
.button {
  position: fixed;
  right: 20px;
  bottom: 20px;
}

元素会固定在浏览器窗口指定位置。

页面滚动时通常不会跟着移动。

45. sticky ​

粘性定位：

css
nav {
  position: sticky;
  top: 0;
}

经常用于吸顶导航栏。

伪类 ​

46. :hover ​

鼠标移动到元素上时应用样式。

css
button:hover {
  background-color: black;
  color: white;
}

47. :active ​

元素被点击时：

css
button:active {
  transform: scale(0.95);
}

48. :focus ​

输入框获得焦点时：

css
input:focus {
  border-color: blue;
}

49. :first-child ​

选择第一个子元素：

css
li:first-child {
  color: red;
}

50. :last-child ​

选择最后一个子元素：

css
li:last-child {
  color: blue;
}

51. :nth-child() ​

选择指定位置的元素。

例如：

css
li:nth-child(2) {
  color: red;
}

表示选择第二个子元素。

伪元素 ​

52. ::before ​

在元素内容前插入内容：

css
.title::before {
  content: "★ ";
}

53. ::after ​

在元素内容后插入内容：

css
.title::after {
  content: " ★";
}

CSS 优先级 ​

54. 层叠 ​

CSS 全称中：

text
Cascading

就是“层叠”的意思。

如果多个 CSS 规则同时作用于一个元素，就需要判断哪一个规则优先。

例如：

css
p {
  color: red;
}

p {
  color: blue;
}

如果优先级相同，后面的规则通常覆盖前面的规则。

最终：

text
蓝色

55. 基础优先级 ​

可以简单记住：

text
行内样式
   ↓
id
   ↓
class
   ↓
标签

例如：

css
p {
  color: red;
}

.text {
  color: blue;
}

#content {
  color: green;
}

HTML：

html
<p id="content" class="text">
  Hello
</p>

通常最终会使用：

text
green

因为 id 的优先级更高。

56. !important ​

可以强制提高规则优先级：

css
p {
  color: red !important;
}

但是不建议大量使用。

因为 !important 太多会让后续样式维护变得困难。

CSS 单位 ​

57. px ​

像素单位：

css
font-size: 16px;

最直观，也是初学时最常见的单位。

58. % ​

百分比：

css
.container {
  width: 80%;
}

表示相对于父元素宽度的百分比。

59. rem ​

相对于根元素字体大小。

例如：

css
html {
  font-size: 16px;
}

h1 {
  font-size: 2rem;
}

那么：

text
2rem = 32px

60. em ​

通常相对于当前元素或父元素的字体大小。

例如：

css
div {
  font-size: 20px;
}

p {
  font-size: 1.5em;
}

此时大约：

text
1.5 × 20px = 30px

61. vw 和 vh ​

相对于浏览器窗口大小。

text
vw → viewport width
vh → viewport height

例如：

css
.hero {
  height: 100vh;
}

表示高度等于整个浏览器可视区域的高度。

阴影 ​

62. box-shadow ​

设置盒子阴影：

css
.card {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

基本格式：

text
水平偏移
垂直偏移
模糊程度
颜色

63. text-shadow ​

设置文字阴影：

css
h1 {
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

过渡和动画 ​

64. transition ​

用于让样式变化更加平滑。

例如：

css
button {
  background-color: black;
  transition: 0.3s;
}

button:hover {
  background-color: gray;
}

鼠标移动到按钮上时，颜色不会瞬间变化，而是逐渐变化。

更明确的写法：

css
button {
  transition: background-color 0.3s;
}

65. transform ​

可以改变元素的：

text
位置
大小
旋转
倾斜

移动 ​

css
transform: translateX(10px);

缩放 ​

css
transform: scale(1.1);

旋转 ​

css
transform: rotate(10deg);

常见 hover：

css
.card {
  transition: transform 0.3s;
}

.card:hover {
  transform: translateY(-5px);
}

66. animation ​

CSS 也可以创建动画。

例如：

css
@keyframes move {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(100px);
  }
}

使用动画：

css
.box {
  animation: move 1s;
}

响应式设计 ​

67. 媒体查询 ​

CSS 可以根据屏幕大小应用不同样式。

例如：

css
.container {
  width: 1000px;
}

手机屏幕下：

css
@media (max-width: 768px) {
  .container {
    width: 100%;
  }
}

这样可以让网页适配手机。

68. max-width ​

实际布局中经常使用：

css
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

含义：

text
正常情况下尽量占满
最大宽度不超过 1200px
左右自动居中

这种方式比直接写：

css
width: 1200px;

更加适合响应式网页。

CSS 变量 ​

69. 自定义变量 ​

CSS 可以定义变量：

css
:root {
  --primary-color: #000;
  --background-color: #fff;
}

使用：

css
body {
  color: var(--primary-color);
  background-color: var(--background-color);
}

这样修改主题时会更加方便。

例如深色模式：

css
:root {
  --background: #ffffff;
  --text: #000000;
}

.dark {
  --background: #000000;
  --text: #ffffff;
}

body {
  background: var(--background);
  color: var(--text);
}

一个完整的小例子 ​

HTML：

html
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0"
    />

    <title>CSS 示例</title>

    <link rel="stylesheet" href="./style.css" />
  </head>

  <body>
    <div class="card">
      <h1>MoonlitLog</h1>

      <p>
        记录我的编程学习过程。
      </p>

      <a href="#">进入网站</a>
    </div>
  </body>
</html>

CSS：

css
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;

  display: flex;
  justify-content: center;
  align-items: center;

  font-family: sans-serif;

  background-color: #f5f5f5;
}

.card {
  width: 320px;
  padding: 30px;

  background-color: white;

  border: 1px solid #ddd;
  border-radius: 12px;

  text-align: center;

  transition: transform 0.3s;
}

.card:hover {
  transform: translateY(-5px);
}

.card h1 {
  margin-top: 0;
}

.card p {
  color: #666;
  line-height: 1.6;
}

.card a {
  display: inline-block;

  margin-top: 10px;
  padding: 10px 20px;

  background-color: black;
  color: white;

  text-decoration: none;

  border-radius: 6px;
}

.card a:hover {
  background-color: #333;
}

这个例子包含了：

text
选择器
颜色
字体
盒模型
Flex
圆角
hover
transition
transform

已经覆盖了很多常见 CSS 基础知识。

CSS 基础语法速查 ​

功能CSS
文字颜色color
背景颜色background-color
字体大小font-size
字体粗细font-weight
字体font-family
文本对齐text-align
宽度width
高度height
内边距padding
外边距margin
边框border
圆角border-radius
阴影box-shadow
显示方式display
定位position
Flex 布局display: flex
元素间距gap
过渡transition
变换transform
动画animation
响应式@media

总结 ​

CSS 最基础的核心可以概括为：

text
选择元素
   ↓
设置属性
   ↓
控制布局和样式

例如：

css
.card {
  width: 300px;
  padding: 20px;

  color: black;
  background-color: white;

  border: 1px solid #ddd;
  border-radius: 10px;
}

其中：

text
.card             → 选择器
width             → 宽度
padding           → 内边距
color             → 文字颜色
background-color  → 背景颜色
border            → 边框
border-radius     → 圆角

学习 CSS 初期建议优先掌握：

text
选择器

color
background

width
height
margin
padding
border

display

Flex

position

:hover

transition

@media

其中最重要的部分之一是：

text
盒模型 + Flex 布局

理解这两部分以后，大多数基础网页布局都会容易很多。