CSS 简介
CSS 即层叠样式表（Cascading Style Sheets），用于控制网页的样式和布局。
什么是 CSS
CSS 即层叠样式表（Cascading Style Sheets）是一种用来表现 HTML 或 XML 等文件样式的计算机语言。CSS 不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 的作用
CSS 可以对网页中的元素位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。
CSS 实例
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
h1 {
color: #333;
font-size: 24px;
}CSS 基础语法
学习 CSS 的基本语法规则。
CSS 语法
CSS 规则由两个主要的部分构成：选择器（selector）和声明块（declaration block）。声明块由一对大括号包围，里面包含一个或多个声明。每个声明由属性和值组成，用冒号分隔。
selector {
property: value;
property: value;
}选择器
选择器用于指定要应用样式的 HTML 元素。常见的选择器包括：元素选择器、类选择器、ID 选择器、属性选择器、派生选择器等。
/* 元素选择器 */
p { color: red; }
/* 类选择器 */
.highlight { background-color: yellow; }
/* ID 选择器 */
#header { height: 60px; }CSS 颜色
了解如何在 CSS 中定义颜色。
颜色值
CSS 颜色可以用以下方式表示：十六进制（如 #FF0000）、RGB（如 rgb(255, 0, 0)）、RGBA（如 rgba(255, 0, 0, 0.5)）、颜色名称（如 red）。
p { color: #FF0000; }
h1 { color: rgb(0, 255, 0); }
div { color: blue; }CSS 背景
使用 CSS 设置元素的背景效果。
背景颜色
使用 background-color 属性设置元素的背景颜色。
body { background-color: #f0f0f0; }背景图像
使用 background-image 属性设置背景图像。
body {
background-image: url("bg.jpg");
background-repeat: no-repeat;
background-position: center;
}CSS 文本
格式化网页文本样式。
文本颜色
使用 color 属性设置文本颜色。
p { color: #333; }文本对齐
使用 text-align 属性设置文本对齐方式。
h1 { text-align: center; }
p { text-align: justify; }文本装饰
使用 text-decoration 属性添加文本装饰效果。
a { text-decoration: none; }
h2 { text-decoration: underline; }CSS 字体
设置字体相关样式。
字体系列
使用 font-family 属性定义字体系列。
body { font-family: Arial, "Helvetica Neue", sans-serif; }字体大小
使用 font-size 属性设置字体大小。
h1 { font-size: 32px; }
p { font-size: 16px; }字体样式
使用 font-style 属性设置字体样式（normal、italic、oblique）。
p { font-style: italic; }CSS 链接
设置链接的样式。
链接样式
可以分别为链接的四种状态设置样式：a:link（未访问）、a:visited（已访问）、a:hover（鼠标悬停）、a:active（点击时）。
a:link { color: #0000FF; }
a:visited { color: #551A8B; }
a:hover { color: #FF0000; }
a:active { color: #00FF00; }CSS 列表
设置列表样式。
列表类型
使用 list-style-type 属性设置列表标记类型。
ul { list-style-type: square; }
ol { list-style-type: upper-roman; }列表图像
使用 list-style-image 属性使用图像作为列表标记。
ul { list-style-image: url("marker.gif"); }CSS 表格
美化表格样式。
表格边框
使用 border 属性为表格添加边框。
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
}表格宽高
使用 width 和 height 属性设置表格尺寸。
CSS 盒子模型
理解 CSS 盒子模型的概念。
盒子模型概述
CSS 盒子模型本质上是一个盒子，封装周围的 HTML 元素，包括：margin（外边距）、border（边框）、padding（内边距）、content（内容）。
div {
margin: 10px;
padding: 20px;
border: 1px solid #ccc;
width: 200px;
}外边距
外边距（margin）位于边框之外，用于分隔元素。
p { margin: 20px; }
h1 { margin-top: 10px; }内边距
内边距（padding）位于边框和内容之间。
div { padding: 20px; }CSS 边框
设置元素边框样式。
边框样式
使用 border-style 属性设置边框样式（solid、dashed、dotted 等）。
p { border-style: solid; }
div { border-style: dotted; }边框颜色和宽度
使用 border-color 和 border-width 设置边框颜色和宽度。
h1 {
border-style: solid;
border-color: #FF0000;
border-width: 3px;
}CSS 定位
使用定位属性控制元素位置。
position 属性
position 属性指定元素的定位类型：static（默认）、relative（相对定位）、absolute（绝对定位）、fixed（固定定位）。
.relative { position: relative; top: 20px; }
.absolute { position: absolute; left: 100px; }
.fixed { position: fixed; top: 0; }z-index
z-index 属性设置元素的堆叠顺序。
.box1 { z-index: 1; }
.box2 { z-index: 2; }CSS 浮动
使用浮动实现页面布局。
float 属性
float 属性使元素向左或向右浮动，其后面的元素会环绕它。
.left { float: left; }
.right { float: right; }清除浮动
使用 clear 属性清除浮动的影响。
.clear { clear: both; }CSS Flex 布局
使用弹性盒子布局。
flex 容器
将 display 属性设置为 flex 或 inline-flex 来创建 flex 容器。
.container {
display: flex;
justify-content: space-between;
align-items: center;
}flex 项目属性
flex 项目可以使用 flex-grow、flex-shrink、flex-basis 等属性。
.item {
flex: 1;
/* flex-grow: 1; flex-shrink: 1; flex-basis: 0%; */
}CSS Grid 布局
使用网格布局系统。
grid 容器
将 display 属性设置为 grid 来创建 grid 容器。
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 20px;
}网格项目
使用 grid-column 和 grid-row 属性指定项目位置。
.item {
grid-column: span 2;
grid-row: 1 / 3;
}