CSS 教程

什么是 CSS？

CSS（Cascading Style Sheets）用于控制网页的外观和布局。

基本语法

选择器 {
    属性: 值;
}

选择器

选择器	示例	说明
元素选择器	p {}	选择所有 <p>
类选择器	.class {}	选择 class="class"
ID 选择器	#id {}	选择 id="id"
后代选择器	div p {}	选择 div 内的 p
伪类	a:hover {}	鼠标悬停状态

盒模型

每个元素由以下部分组成：

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

Flexbox 布局

.container {
    display: flex;
    justify-content: center;  /* 水平居中 */
    align-items: center;      /* 垂直居中 */
    flex-wrap: wrap;
}

练习

动手实践

使用 Flexbox 实现一个水平居中的导航栏，包含 4 个菜单项。