CSS从0到1
- CSS 简介与基础语法
- CSS 选择器全解析
- CSS 样式规则与常用属性
- CSS 盒模型详解
- CSS 布局技术
- CSS 高级特性
1. CSS 简介与基础语法
1.1 什么是 CSS？
CSS 全称 Cascading Style Sheets（层叠样式表），它是一种样式表语言，用于描述 HTML 或 XML（包括如 SVG、MathML 等 XML 分支语言）文档的呈现。CSS 描述了元素应该如何在屏幕、纸张、语音或其他媒体上显示。
1.2 CSS 的工作方式
浏览器加载 HTML 文档时，会构建一个 DOM (Document Object Model，文档对象模型) 树。然后，它会加载并解析链接的 CSS 样式表，构建一个 CSSOM (CSS Object Model，CSS 对象模型) 树。最后，浏览器将 DOM 和 CSSOM 结合，创建一个渲染树 (Render Tree)，并根据渲染树来布局 (Layout) 和绘制 (Paint) 页面。
1.3 CSS 的引入方式
在 HTML 中应用 CSS 有三种主要方式，它们的优先级从高到低依次为：
-
内联样式 (Inline Styles)：通过元素的
style属性直接应用于单个元素。<p style="color: blue; font-size: 18px;">这段文字使用了内联样式。</p>缺点：样式与结构混合，可维护性差，无法复用。
-
内部样式表 (Internal Style Sheet)：在 HTML 文档的
<head>标签内使用<style>标签定义。<!DOCTYPE html> <html> <head><style>body { background-color: lightblue; }h1 { color: navy; }</style> </head> <body><h1>这是一个标题</h1> </body> </html>优点：样式与结构分离，作用于当前文档。
-
外部样式表 (External Style Sheet)：将 CSS 代码保存在一个单独的
.css文件中，然后通过<link>标签引入到 HTML 文档中。<!-- 在 HTML 文件中 --> <link rel="stylesheet" type="text/css" href="styles.css">/* 在 styles.css 文件中 */ body {font-family: sans-serif;margin: 0;padding: 20px; }优点：样式与结构彻底分离，可被多个页面复用，易于维护和缓存，是最佳实践。
1.4 CSS 基础语法
CSS 的核心语法规则由选择器和声明块组成。
/* 选择器 { 声明块 } */
p {color: red; /* 属性: 值; */font-size: 16px; /* 每条声明以分号结尾 */
}
- 选择器 (Selector)：指定了 CSS 规则将要应用到哪些 HTML 元素。
- 声明块 (Declaration Block)：用大括号
{}包裹，包含一条或多条声明。 - 声明 (Declaration)：每条声明由一个属性 (Property) 和一个值 (Value) 组成，并用冒号
:分隔。
2. CSS 选择器全解析
选择器是 CSS 的灵魂，它决定了我们能精准地“找到”并设置页面上哪些元素的样式。
2.1 基础选择器
基础选择器是 CSS 中最基本、最常用的选择器类型。
-
类型选择器 (Element Selector)：通过 HTML 元素的标签名来选择元素。
p { color: blue; } /* 所有 <p> 段落文本设为蓝色 */ h1 { font-size: 24px; } /* 所有 <h1> 标题设为 24px */ -
类选择器 (Class Selector)：使用点
.加类名，选择所有带有该class属性的元素。一个元素可以有多个类。.highlight { background-color: yellow; } /* 所有 class="highlight" 的元素 */<p class="highlight">高亮段落</p> <div class="box highlight">高亮的盒子</div> -
ID 选择器 (ID Selector)：使用井号
#加 ID 名，选择带有该id属性的唯一元素。页面中 ID 应唯一。#header { background-color: #f0f0f0; } /* 选择 id="header" 的元素 */<div id="header">页面头部</div> -
通配符选择器 (Universal Selector)：使用星号
*，匹配页面上的所有元素。常用于重置浏览器默认样式。* {margin: 0;padding: 0;box-sizing: border-box; }
2.2 组合选择器
通过组合基础选择器，可以实现更复杂的选择逻辑。
-
后代选择器 (Descendant Selector)：使用空格
div p { color: green; } /* 选择 <div> 内部所有的 <p> 元素 */ -
子元素选择器 (Child Selector)：使用大于号
>分隔，选择某个元素的直接子元素。ul > li { list-style: none; } /* 选择 <ul> 的直接子元素 <li> */ -
相邻兄弟选择器 (Adjacent Sibling Selector)：使用加号
+分隔，选择紧跟在某个元素后面的第一个兄弟元素。h2 + p { margin-top: 0; } /* 选择紧跟在 <h2> 后面的 <p> 元素 */ -
通用兄弟选择器 (General Sibling Selector)：使用波浪号
~分隔，选择在某个元素后面的所有兄弟元素。.active ~ .item { opacity: 0.5; } /* 选择 .active 元素后面的所有 .item 兄弟元素 */
2.3 分组选择器
使用逗号 , 将多个选择器组合在一起，为它们应用相同的样式，避免重复代码。
h1, h2, h3, .title {color: #333;font-family: 'Arial', sans-serif;
}
2.4 伪类与伪元素选择器
伪类 (Pseudo-classes) 和伪元素 (Pseudo-elements) 是 CSS 中非常强大的特性，它们允许你根据元素的状态、位置或内容来应用样式，而无需添加额外的 HTML 类或元素。
-
伪类 (😃：用于定义元素的特殊状态。
- 动态伪类:
:link,:visited,:hover,:active,:focus - 结构伪类:
:first-child,:last-child,:nth-child(n),:nth-of-type(n),:only-child - 否定伪类:
:not(selector)
/* 链接的不同状态 */ a:link { color: blue; } a:visited { color: purple; } a:hover { color: red; } /* 鼠标悬停时 */ a:active { color: green; } /* 点击瞬间 */ input:focus { border: 2px solid blue; } /* 元素获得焦点时 *//* 结构伪类 */ ul li:first-child { font-weight: bold; } /* 第一个 <li> 元素 */ table tr:nth-child(even) { background-color: #f2f2f2; } /* 表格隔行变色 */ p:not(.intro) { line-height: 1.6; } /* 选择所有不带有 .intro 类的 <p> 元素 */ - 动态伪类:
-
伪元素 (:😃：用于创建一些不在 DOM 树中的虚拟元素，并为其应用样式。
::before: 在元素内容的前面插入内容。::after: 在元素内容的后面插入内容。::first-line: 选择文本块的第一行。::first-letter: 选择文本块的第一个字符。
/* 在引用块前添加引号 */ blockquote::before {content: '"';font-size: 2em;color: #ccc; }/* 为段落的第一个字母设置特殊样式 */ p::first-letter {font-size: 2em;float: left;margin-right: 0.2em; }/* 清除浮动的经典用法 */ .clearfix::after {content: "";display: table;clear: both; }注意：
content属性是::before和::after生效的关键。
2.5 属性选择器
根据元素的属性或属性值来选择元素。
/* 选择所有带有 title 属性的元素 */
[title] { cursor: help; }/* 选择所有 type="text" 的 <input> 元素 */
input[type="text"] { width: 200px; }/* 选择 class 属性值中包含 "menu" 的元素 */
[class*="menu"] { background-color: #f0f0f0; }
2.6 选择器优先级 (Specificity)
当多个 CSS 规则应用于同一个元素时，优先级决定了哪个规则会被最终应用。优先级是一个权重值，计算方式如下：
- !important：最高优先级，会覆盖其他所有规则（谨慎使用）。
- 内联样式 (style 属性)：优先级为 1000。
- ID 选择器：优先级为 100。
- 类选择器、伪类选择器、属性选择器：优先级为 10。
- 类型选择器、伪元素选择器：优先级为 1。
- 通配符选择器：优先级为 0。
计算示例:
p-> 1.highlight-> 10p.highlight-> 1 + 10 = 11#header-> 100#header .nav li-> 100 + 10 + 1 = 111
规则：
- 计算结果越大，优先级越高。
- 优先级相同，则后面定义的规则会覆盖前面的规则。
- 继承的样式优先级最低。
3. CSS 样式规则与常用属性
掌握了选择器后，我们来学习如何通过 CSS 属性来定义元素的具体样式。
3.1 文本样式 (Text Styles)
color: 设置文本颜色。font-family: 设置字体族。font-size: 设置字体大小。font-weight: 设置字体粗细 (normal,bold,100-900)。font-style: 设置字体样式 (normal,italic,oblique)。text-align: 设置文本水平对齐方式 (left,right,center,justify)。text-decoration: 设置文本装饰 (none,underline,overline,line-through)。text-transform: 控制文本大小写 (none,uppercase,lowercase,capitalize)。line-height: 设置行高，常用于垂直居中或调整文本间距。letter-spacing: 设置字符间距。word-spacing: 设置单词间距。text-indent: 设置首行文本缩进。
p {color: #333;font-family: "Microsoft YaHei", sans-serif;font-size: 16px;line-height: 1.8;text-align: justify;text-indent: 2em; /* 首行缩进2个字符 */
}
a {text-decoration: none; /* 移除下划线 */
}
h1 {font-weight: bold;letter-spacing: 5px;text-align: center;
}
3.2 背景与边框 (Background & Border)
-
背景 (Background):
background-color: 设置背景颜色。background-image: 设置背景图片 (url("image.jpg"))。background-repeat: 设置背景图片是否及如何重复 (repeat,repeat-x,repeat-y,no-repeat)。background-position: 设置背景图片的起始位置 (center,top left,50% 50%等)。background-size: 设置背景图片的尺寸 (cover,contain,100px 200px等)。background-attachment: 设置背景图片是否随页面滚动 (scroll,fixed)。- 复合属性:
background
.hero {background-color: #f0f0f0;background-image: url("pattern.png");background-repeat: no-repeat;background-position: center center;background-size: cover;/* 复合写法 *//* background: #f0f0f0 url("pattern.png") no-repeat center center / cover; */ } -
边框 (Border):
border-width: 设置边框宽度。border-style: 设置边框样式 (none,solid,dashed,dotted,double等)。border-color: 设置边框颜色。- 复合属性:
border border-radius: 设置边框圆角，是 CSS3 的常用属性。
.box {border-width: 2px;border-style: solid;border-color: #ccc;/* 复合写法 */border: 2px solid #ccc;border-top-left-radius: 10px;border-bottom-right-radius: 10px;/* 简写 */border-radius: 10px 0 10px 0; /* 左上、右上、右下、左下 */border-radius: 50%; /* 圆形或椭圆形 */ }
4. CSS 盒模型详解
在 CSS 中，几乎所有的元素都可以看作是一个“盒子”。理解盒模型是掌握 CSS 布局的关键。
4.1 标准盒模型 (W3C Box Model)
一个元素的宽度和高度由以下几个部分组成：
- 内容区域 (Content)：元素的实际内容，如文本、图片等。由
width和height属性定义。 - 内边距 (Padding)：内容区域与边框之间的空间。
- 边框 (Border)：围绕在内边距和内容区域外的线条。
- 外边距 (Margin)：边框与其他元素之间的空间。
计算公式:
- 元素的总宽度 =
width+padding-left+padding-right+border-left+border-right - 元素的总高度 =
height+padding-top+padding-bottom+border-top+border-bottom
4.2 怪异盒模型 (IE Box Model) / box-sizing 属性
CSS3 引入了 box-sizing 属性，允许我们改变盒模型的计算方式。
box-sizing: content-box;(默认值)：遵循标准盒模型。width和height仅指内容区域的宽度和高度。box-sizing: border-box;：推荐使用。width和height属性包含了内容区域、内边距和边框的总宽度和高度。
.box {width: 200px;height: 100px;padding: 20px;border: 5px solid black;box-sizing: border-box;
}
在上面的例子中，.box 元素的最终宽度和高度将严格是 200px 和 100px，padding 和 border 的值会从 width 和 height 中内部扣除。这使得布局计算变得更加直观和简单，是现代 CSS 布局的基石之一。通常会在样式重置中全局设置：
*, *::before, *::after {box-sizing: border-box;
}
5. CSS 布局技术
布局是 CSS 中最复杂也最有趣的部分。这里介绍几种核心的布局方式。
5.1 传统布局
- 普通流 (Normal Flow)：元素按照其在 HTML 中的出现顺序自上而下、从左到右排列。块级元素独占一行，内联元素共享一行。
- 浮动 (Float)：最初设计用于实现文字环绕图片的效果。通过
float: left;或float: right;可以使元素脱离普通流，浮动到容器的左侧或右侧。- 缺点：容易导致父元素高度塌陷，需要通过清除浮动（如
.clearfix技巧）来修复。现代布局中已较少作为主要布局手段。
- 缺点：容易导致父元素高度塌陷，需要通过清除浮动（如
- 定位 (Position)：允许你精确地控制元素在页面上的位置。
position: static;(默认)：元素遵循普通流。position: relative;：元素相对于其在普通流中的原始位置进行定位。通过top,right,bottom,left来调整位置，但其原始空间仍然保留。position: absolute;：元素完全脱离普通流，相对于其最近的已定位（position值不是static）的祖先元素进行定位。如果没有，则相对于整个文档（body）。position: fixed;：元素完全脱离普通流，相对于浏览器视口（Viewport）进行定位，即使页面滚动，它也会停留在固定位置。position: sticky;：一种混合定位，元素在跨越特定阈值前表现为relative，之后表现为fixed。常用于实现吸顶导航栏。
5.2 现代布局
-
Flexbox (弹性盒模型)：专为一维布局（行或列）设计，提供了强大的对齐、分布和重排能力。
- 将父元素设置为
display: flex;即可使其成为一个 flex 容器，其直接子元素成为 flex 项目。 - 核心概念：主轴 (Main Axis)、交叉轴 (Cross Axis)、弹性方向 (
flex-direction)、对齐方式 (justify-content,align-items)、伸缩性 (flex-grow,flex-shrink,flex-basis)。
.container {display: flex;justify-content: space-between; /* 项目在主轴上均匀分布 */align-items: center; /* 项目在交叉轴上居中对齐 */gap: 20px; /* 项目之间的间距 */ } .item {flex: 1; /* 项目可伸缩，占据剩余空间 */ } - 将父元素设置为
-
CSS Grid (网格布局)：专为二维布局（行和列同时）设计，是最强大和复杂的 CSS 布局系统。
- 将父元素设置为
display: grid;即可使其成为一个 grid 容器。 - 核心概念：网格线 (Grid Lines)、网格轨道 (Grid Tracks)、网格单元格 (Grid Cell)、网格区域 (Grid Area)。
- 通过
grid-template-columns和grid-template-rows定义网格的列和行。 - 通过
grid-column和grid-row或grid-area放置项目。
.grid-container {display: grid;grid-template-columns: repeat(3, 1fr); /* 创建3列，每列宽度相等 */grid-template-rows: 100px auto 100px; /* 创建3行，高度分别为100px, 自动, 100px */gap: 10px; } .header {grid-column: 1 / -1; /* 从第一列跨越到最后一列 */ } - 将父元素设置为
5.3 响应式布局
响应式 Web 设计 (Responsive Web Design) 是一种让网页在不同尺寸的设备上都能良好显示的设计方法。
-
媒体查询 (Media Queries)：是实现响应式布局的核心。它允许你根据设备的特性（如屏幕宽度、高度、方向等）应用不同的 CSS 样式。
/* 默认样式 (移动优先) */ .column {width: 100%; }/* 当屏幕宽度大于等于 768px 时应用 */ @media (min-width: 768px) {.column {width: 50%;float: left;} }/* 当屏幕宽度大于等于 992px 时应用 */ @media (min-width: 992px) {.column {width: 33.333%;} }提示：移动优先 (Mobile-First) 是一种推荐的开发策略，即先编写针对移动设备的样式，然后通过媒体查询为更大的屏幕添加样式。
6. CSS 高级特性
6.1 CSS 渐变 (Gradients)
CSS 渐变允许你创建平滑的颜色过渡效果，无需使用图片。
-
线性渐变 (Linear Gradient)：颜色沿着一条直线过渡。
.box {background: linear-gradient(to right, red, yellow); /* 从左到右，红到黄 */background: linear-gradient(45deg, blue, green); /* 45度角，蓝到绿 */background: linear-gradient(to bottom, rgba(255,0,0,0), rgba(255,0,0,1)); /* 透明度渐变 */ } -
径向渐变 (Radial Gradient)：颜色从一个中心点向外扩散。
.box {background: radial-gradient(circle, white, black); /* 从中心向外，白到黑 */background: radial-gradient(ellipse at top, #e66465, transparent); }
6.2 CSS 动画与过渡 (Animation & Transition)
-
过渡 (Transition)：用于在元素状态改变时（如
:hover）平滑地过渡样式属性值。.button {background-color: blue;transition: background-color 0.3s ease, transform 0.3s ease; } .button:hover {background-color: red;transform: scale(1.1); } -
动画 (Animation)：更强大，可以定义多步动画，无需用户交互即可自动播放。
- 使用
@keyframes定义动画序列。 - 使用
animation属性将动画应用于元素。
@keyframes fadeInOut {0% { opacity: 0; }50% { opacity: 1; }100% { opacity: 0; } }.box {animation: fadeInOut 3s infinite; /* 动画名称 时长 无限循环 */ } - 使用
6.3 CSS 滤镜 (Filter)
CSS 滤镜可以对元素（通常是图片）应用图形效果，如模糊、亮度、对比度等。
img {filter: grayscale(100%); /* 转为灰度图 */
}
img:hover {filter: none; /* 移除滤镜 */
}.blurred-box {filter: blur(5px); /* 模糊效果 */
}