当前位置：首页 > news >正文

CSS3 核心知识点与实战案例专栏

news 2025/9/26 10:33:37

引言

CSS3 作为前端界面设计的核心技术，为开发者提供了丰富的样式控制能力和视觉效果实现方案。本专栏专栏将系统梳理 CSS3 的核心知识点，并通过丰富的实战案例帮助你掌握各种CSS3 的精髓，从基础选择器到高级动画效果，全方位面覆盖 CSS3 开发的关键技术点。

一、CSS 样式基础

1.1 CSS 样式类型

CSS 样式主要有三种形式，分别适用于不同的场景：

内联式样式：直接写在元素的 style 属性中，仅作用于当前元素
嵌入式嵌入式样式：写在 <style> 标签中，作用于当前文档
外部外部样式：写在独立的 CSS 文件中，通过 <link> 标签引入，可被多个文档共享

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS样式类型示例</title>
<!-- 嵌入式样式 -->
<style type="text/css">
p {font-size: 30px;color: blue;
}
</style>
<!-- 外部样式 -->
<link rel="stylesheet" href="css/my.css" />
</head>
<body>
<!-- 内联式样式 -->
<div style="width: 100px;height: 100px;background-color: red;"></div>
<p>Hello world</p>
<span>测试文字</span>
</body>
</html>

1.2 CSS 选择器

选择器是 CSS 的核心，用于精准定位需要设置样式的元素：

通用选择器：* 匹配所有元素
ID 选择器：#id 匹配指定 ID 的元素
类选择器：.class 匹配指定类的元素
标签选择器：tag 匹配指定标签的元素
子选择器：parent > child 匹配父元素的直接子元素
后代选择器：ancestor descendant 匹配祖先元素的所有后代元素
群组选择器：selector1, selector2 同时匹配多个选择器

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS选择器示例</title>
<style type="text/css">
#ctx { color: red; }
span { color: orange; }
/* 通用选择器 */
*{}
/* 子选择器 */
ul>a { color: red; }
/* 群组选择器 */
div,input { background-color: yellow; }
#ctx,span { font-size: 50px; }
</style>
</head>
<body>
<ul><a href="#">扩展</a><li>语文</li><li>数学<a href="#">浏览</a></li><li>英语<div><h1><a href="#">PPP</a></h1></div></li>
</ul>
<div id="ctx">aaa</div>
<span class="bg">hehe</span>
<span class="bg">bbb</span>
<span class="bg">cccc</span>
<input type="text" class="bg" />
<span>lop</span>
</body>
</html>

1.3 伪类与伪元素选择器

伪类：用于定义元素的特殊状态，如 :hover、:active、:focus 等
伪元素：用于设置元素的特定部分的样式，如 ::first-letter、::before、::after 等

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>伪类选择器示例</title>
<style type="text/css">
#inp:active { border: 5px red solid; }
#inp:focus { font-size: 50px; }
div:hover { color: orange; }
a:link { color: deeppink; text-decoration: line-through; }
a:visited { color: green; }
li:first-child { color: red; }
</style>
</head>
<body>
<ul><li>HTML</li><li>CSS</li><li>JS</li>
</ul>
<input id="inp" type="text" />
<div>Hello world</div>
<a href="#">浏览</a>
</body>
</html>

伪元素示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>伪元素选择器示例</title>
<style type="text/css">
p::first-letter { font-size: 50px; }
#myDiv::first-line { color: red; }
#link {position: relative;display: inline-block;text-decoration: none;padding: 5px 10px;
}
#link:hover::before {content: '\5B';position: absolute;left: -20px;
}
#link:hover::after {content: '\5D';position: absolute;right: -20px;
}
</style>
</head>
<body>
<a id="link" href="#">示例链接</a>
<p>举头望明月，低头思故乡</p>
<div id="myDiv">第一行文字<br>第二行文字<br>第三行文字
</div>
</body>
</html>

二、CSS 核心概念

2.1 CSS 权重

CSS 权重决定了当多个样式规则应用于同一元素时，哪个规则会被优先应用：

内联样式：1000
ID 选择器：100
类选择器、伪类、属性选择器：10
标签选择器、伪元素：1

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS权重示例</title>
<style type="text/css">
* { color: red; } /* 0,0,0,0 */
div { color: yellow; } /* 0,0,0,1 */
div span { color: green; } /* 0,0,0,2 */
span[id] { color: orange; } /* 0,0,1,1 */
#sp1 { color: pink; } /* 0,1,0,0 */
</style>
</head>
<body>
<!-- 内联样式权重最高 1,0,0,0 -->
<div style="color: orange;">Hello world</div>
<div>Hello<span>A</span><span id="sp1">G</span><span>K</span>
</div>
</body>
</html>

2.2 样式继承

某些 CSS 属性会从父元素继承到子元素，如文本相关属性（color、font-size 等），而布局相关属性通常不会继承（如 border、margin 等）。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS样式继承示例</title>
<style type="text/css">
*{ color: yellow; }
.list .item {color: red;font-size: 50px;border: 5px solid green;
}
</style>
</head>
<body>
<ul class="list"><li class="item">AAA<span>注意文字的颜色（继承自父元素）</span></li><li>BBB</li>
</ul>
</body>
</html>

2.3 盒子模型

CSS 盒子模型是布局的基础，每个元素都被视为一个盒子，包含以下部分：

content：内容区域
padding：内边距，内容与边框之间的空间
border：边框
margin：外边距，盒子与其他元素之间的空间

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>盒子模型示例</title>
<style type="text/css">
#a { background-color: red; height: 100px; }
#c { background-color: blue; height: 100px; }
#b {background-color: yellow;width: 100px;height: 100px;margin: -50px 0px; /* 负外边距可以使元素重叠 */border: 5px red solid;padding: 20px;
}
</style>
</head>
<body>
<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
</body>
</html>

CSS3 新增的 box-sizing 属性可以改变盒子模型的计算方式：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>box-sizing属性示例</title>
<style type="text/css">
.box {width: 300px;height: 300px;background-color: yellow;
}
.first {width: 150px;height: 100px;float: left;background-color: pink;border: 5px red solid;box-sizing: border-box; /* padding和border包含在width内 */
}
.second {width: 150px;height: 100px;background-color: blue;float: left;
}
</style>
</head>
<body>
<div class="box"><div class="first"></div><div class="second"></div>
</div>
</body>
</html>

2.4 长度单位

CSS 支持多种长度单位，常用的有：

px：像素，固定单位
em：相对单位，相对于父元素的字体大小
rem：相对单位，相对于根元素（html）的字体大小

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>em单位示例</title>
<style type="text/css">
body { font-size: 100px; }
div {font-size: 0.3em; /* 100px * 0.3 = 30px */width: 6em; /* 30px * 6 = 180px */height: 6em;background-color: red;
}
</style>
</head>
<body>
<div>Hello world</div>
</body>
</html>

rem 使用示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>rem单位示例</title>
<style type="text/css">
html { font-size: 20px; } /* 根元素字体大小 */
.cls {width: 5rem; /* 20px * 5 = 100px */height: 4rem; /* 20px * 4 = 80px */background-color: pink;
}
</style>
</head>
<body>
<div class="cls"></div>
</body>
</html>

三、CSS 布局技术

3.1 浮动模型

浮动（float）可以使元素脱离正常的文档流，向左或向右移动，直到碰到父元素或另一个浮动元素。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>浮动模型示例</title>
<style type="text/css">
div {width: 100px;height: 100px;float: right;
}
</style>
</head>
<body>
<div style="background-color: red;">A</div>
<div style="background-color: green;">B</div>
</body>
</html>

浮动会导致父元素高度坍塌，需要清除浮动：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>清除浮动示例</title>
<style type="text/css">
/* 方法三：给父元素添加伪元素 */
#dv::after {display: block;clear: both;content: '';visibility: hidden;height: 0;
}
</style>
</head>
<body>
<!-- 方法二：父元素添加overflow: hidden; -->
<div id="dv" style="background-color: blue;"><div style="float: left;">A</div><div style="float: left;">B</div><div style="float: left;">C</div><!-- 方法一：添加空元素清除浮动 --><!-- <div style="clear: both;"></div> -->
</div>
</body>
</html>

3.2 层模型（定位）

CSS 提供了三种定位机制：普通流、浮动和绝对定位。position 属性常用值：

static：默认值，正常文档流
relative：相对定位，相对于自身正常位置偏移
absolute：绝对定位，相对于最近的已定位祖先元素
fixed：固定定位，相对于视口定位

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>层模型示例</title>
<style type="text/css">
#d1 {width: 200px;height: 200px;border: 5px solid red;position: relative; /* 相对定位 */top: 50px;left: 100px;
}
#d3 {width: 200px;height: 200px;border: 5px solid green;position: fixed; /* 固定定位 */top: 100px;right: 10px;
}
</style>
</head>
<body>
<div id="d1"></div>
<div id="d2" style="border:5px solid blue; height:200px;"></div>
<div id="d3">广告位</div>
</body>
</html>

定位布局综合示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>定位布局示例</title>
<style type="text/css">
#box1 {width: 400px;height: 400px;background-color: pink;position: relative; /* 作为子元素的定位参考 */left: 100px;top: 50px;
}
#box2 {width: 100px;height: 100px;background-color: red;position: absolute; /* 相对于父元素定位 */left: 50px;top: 100px;
}
</style>
</head>
<body>
<div id="box1"><div id="box2">AAA</div>
</div>
</body>
</html>

3.3 弹性盒子（Flexbox）

弹性盒子是 CSS3 引入的一种强大的布局模式，用于在不同屏幕尺寸上提供一致的布局结构。

核心概念：

弹性容器（flex container）：设置了 display: flex 的元素
弹性项目（flex items）：容器的直接子元素
主轴（main axis）：弹性项目排列的轴线
交叉轴（cross axis）：与主轴垂直的轴线

/* 弹性容器属性 */
.container {display: flex;          /* 定义弹性容器 */flex-direction: row;    /* 主轴方向：row/column/row-reverse/column-reverse */justify-content: center;/* 主轴对齐方式 */align-items: center;    /* 交叉轴对齐方式 */flex-wrap: wrap;        /* 是否换行 */align-content: stretch; /* 多行行对齐 */
}/* 弹性项目属性 */
.item {flex: 1;                /* 简写属性，控制项目的扩展和收缩 */flex-grow: 1;           /* 扩展因子 */flex-shrink: 1;         /* 收缩因子 */flex-basis: auto;       /* 基准大小 */align-self: center;     /* 单个项目的对齐方式 */
}

3.4 栅格系统（Grid）

CSS Grid 布局是一个二维布局系统，非常适合整体页面布局。与 Flexbox 的一维布局不同，Grid 可以同时处理行和列。

.container {display: grid;              /* 定义网格容器 */grid-template-columns: 1fr 1fr 1fr; /* 定义列 */grid-template-rows: 100px auto 100px; /* 定义行 */grid-gap: 10px;             /* 网格间距 */grid-template-areas:        /* 定义网格区域 */"header header header""main main sidebar""footer footer footer";
}.header { grid-area: header; }
.main { grid-area: main; }
.sidebar { grid-area: sidebar; }
.footer { grid-area: footer; }

四、CSS3 新特性

4.1 边框与背景增强

CSS3 提供了更丰富的边框和背景效果：

border-radius：圆角边框
box-shadow：盒子阴影
border-image：图片边框
多背景图片
background-size、background-origin、background-clip 等

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3边框与背景示例</title>
<style type="text/css">
#a {border: 2px solid red;width: 200px;height: 200px;border-radius: 50%; /* 圆形 */box-shadow: 10px 10px 5px #808080; /* 阴影 */
}#b {border: 15px solid transparent;width: 100px;height: 100px;border-image: url(img/Bat.png) 30 30 stretch; /* 图片边框 */
}#c {width: 400px;height: 400px;/* 多背景图片 */background-image: url(img/shot.png), url(img/bg1.jpg);background-position: left bottom, left top;background-repeat: no-repeat, no-repeat;
}
</style>
</head>
<body>
<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
</body>
</html>

4.2 渐变效果

CSS3 支持线性渐变和径向渐变，无需使用图片即可创建平滑的色彩过渡。

线性渐变示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>线性渐变示例</title>
<style type="text/css">
#a {height: 200px;/* 从左上角到右下角的渐变 */background-image: linear-gradient(to top left, red, blue);
}
#b {height: 200px;/* 多色渐变 */background-image: linear-gradient(red, orange, yellow, green, blue);
}
</style>
</head>
<body>
<div id="a"></div>
<div id="b"></div>
</body>
</html>

4.3 转换（Transform）

CSS3 转换允许对元素进行旋转、缩放、倾斜或平移等操作。

常用转换函数：

rotate(deg)：旋转
scale(x, y)：缩放
translate(x, y)：平移
skew(x, y)：倾斜
matrix()：矩阵变换

.transform-example {transform: rotate(30deg) scale(1.2) translate(50px, 20px);transform-origin: center center; /* 变换原点 */transition: transform 0.3s ease; /* 过渡效果 */
}.transform-example:hover {transform: rotate(0deg) scale(1) translate(0, 0);
}

4.4 过渡（Transition）

过渡效果可以使元素的样式变化更加平滑，不需要使用 JavaScript。

.transition-example {width: 100px;height: 100px;background-color: red;/* 过渡属性：property duration timing-function delay */transition: all 0.5s ease-in-out;
}.transition-example:hover {width: 200px;height: 200px;background-color: blue;border-radius: 50%;
}

时间函数（timing-function）：

linear：匀速
ease：慢-快-慢（默认）
ease-in：慢开始
ease-out：慢结束
ease-in-out：慢开始和慢结束

4.5 动画（Animation）

CSS3 动画可以创建更复杂的动画效果，通过 @keyframes 定义动画序列。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3动画示例</title>
<style type="text/css">
.box {width: 100px;height: 100px;background-color: red;/* 动画属性：name duration timing-function delay iteration-count direction */animation: move 2s ease-in-out 0s infinite alternate;
}/* 定义动画序列 */
@keyframes move {0% {transform: translateX(0);background-color: red;}50% {background-color: yellow;}100% {transform: translateX(300px);background-color: blue;}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>

4.6 媒体查询（Media Queries）

媒体查询是响应式设计的核心，允许根据设备特性（如屏幕宽度）应用不同的样式。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>媒体查询示例</title>
<style>
ul { list-style-type: none; }
ul li a {color: green;text-decoration: none;padding: 3px;display: block;
}/* 屏幕宽度在520px-699px或大于1151px时 */
@media screen and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) {ul li a {padding-left: 30px;background: url(img/icon.png) left center no-repeat;}
}/* 屏幕宽度在700px-1000px时 */
@media screen and (max-width: 1000px) and (min-width: 700px) {ul li a:before {content: "地址: ";font-style: italic;color: #666;}
}
</style>
</head>
<body>
<ul><li><a href="#">链接1</a></li><li><a href="#">链接2</a></li><li><a href="#">链接3</a></li>
</ul>
</body>
</html>

五、实战案例

5.1 CSS 绘制三角形

利用 CSS 的边框特性可以绘制各种三角形：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS绘制三角形</title>
<style>
/* 等边三角形 */
.triangle-up {width: 0;height: 0;border-left: 50px solid transparent;border-right: 50px solid transparent;border-bottom: 100px solid red;
}/* 直角三角形 */
.triangle-right {width: 0;height: 0;border-top: 50px solid transparent;border-bottom: 50px solid transparent;border-left: 100px solid blue;
}
</style>
</head>
<body>
<div class="triangle-up"></div>
<div class="triangle-right"></div>
</body>
</html>

5.2 居中显示元素

多种方法实现元素居中：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>元素居中示例</title>
<style>
/* 方法1：绝对定位 + margin: auto */
.center1 {width: 100px;height: 100px;background-color: red;position: absolute;top: 0;left: 0;bottom: 0;right: 0;margin: auto;
}/* 方法2：绝对定位 + 负margin */
.parent {position: relative;height: 300px;border: 1px solid #ccc;
}
.center2 {width: 100px;height: 100px;background-color: blue;position: absolute;top: 50%;left: 50%;margin-top: -50px; /* 自身高度的一半 */margin-left: -50px; /* 自身宽度的一半 */
}/* 方法3：Flexbox */
.flex-container {display: flex;justify-content: center;align-items: center;height: 300px;border: 1px solid #ccc;
}
.center3 {width: 100px;height: 100px;background-color: green;
}
</style>
</head>
<body>
<div class="center1"></div><div class="parent"><div class="center2"></div>
</div><div class="flex-container"><div class="center3"></div>
</div>
</body>
</html>

5.3 加载动画

使用 CSS3 动画创建加载指示器：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3加载动画</title>
<style type="text/css">
* {margin: 0;padding: 0;box-sizing: border-box;
}
body {background: #0b0b14;height: 100vh;display: flex;justify-content: center;align-items: center;
}/* 旋转动画 */
@keyframes rotate {100% { transform: rotate(360deg); }
}/* 缩放动画 */
@keyframes pulse {0%, 100% { width: 0; height: 0; }75% { width: 40px; height: 40px; }
}/* 文本动画 */
@keyframes loadingText {0% { content: "LOADING."; }50% { content: "LOADING.."; }100% { content: "LOADING..."; }
}.arc {position: relative;width: 100px;height: 100px;border-radius: 50%;border-top: 2px solid #ffea29;border-left: 1px solid transparent;border-right: 1px solid transparent;animation: rotate 2s infinite linear;
}.arc::before {content: "";position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin: auto;width: 70px;height: 70px;border-radius: 50%;border-top: 2px solid #8d29ff;border-left: 1px solid transparent;border-right: 1px solid transparent;animation: rotate 4s infinite linear reverse;
}.arc::after {content: "";position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin: auto;width: 0;height: 0;border-radius: 50%;background: snow;animation: pulse 1s infinite;
}.loading-text::after {content: "";animation: loadingText 2s infinite;color: white;font-family: monospace;font-size: 14px;
}
</style>
</head>
<body>
<div class="arc"></div>
<div class="loading-text"></div>
</body>
</html>

5.4 跳动的心形

结合 CSS 变形和动画创建跳动的心形效果：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>跳动的心形</title>
<style type="text/css">
body {width: 100%;text-align: center;background-color: #f0f0f0;padding-top: 100px;
}.heart {position: relative;width: 150px;height: 150px;margin: 0 auto;transform: rotate(45deg);animation: beat 1s infinite;
}.heart::before,
.heart::after {content: "";position: absolute;width: 150px;height: 150px;background-color: red;border-radius: 50%;
}.heart::before {top: -75px;left: 0;
}.heart::after {top: 0;left: -75px;
}.heart .center {position: absolute;width: 150px;height: 150px;background-color: red;
}@keyframes beat {0%, 100% { transform: scale(1) rotate(45deg); }50% { transform: scale(1.2) rotate(45deg); }
}
</style>
</head>
<body>
<div class="heart"><div class="center"></div>
</div>
</body>
</html>

5.5 闪耀的星星效果

结合 CSS 和 JavaScript 创建动态星星效果：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>闪耀的星星</title>
<style type="text/css">
body {background-color: #000;margin: 0;overflow: hidden;
}.star {position: absolute;width: 30px;height: 30px;background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="yellow"><path d="M12 0L14.59 9.27L24 9.27L16.78 15.18L19.39 24L12 18.27L4.61 24L7.22 15.18L0 9.27L9.41 9.27L12 0Z"/></svg>');background-size: 100% 100%;transition: all 0.5s;
}.star:hover {transform: scale(3) rotate(180deg) !important;z-index: 100;
}
</style>
</head>
<body>
<script>
window.onload = function() {const screenW = window.innerWidth;const screenH = window.innerHeight;// 创建150个星星for(let i = 0; i < 150; i++) {const star = document.createElement('div');star.className = 'star';document.body.appendChild(star);// 随机位置const x = Math.random() * screenW;const y = Math.random() * screenH;star.style.left = x + 'px';star.style.top = y + 'px';// 随机大小const scale = Math.random() * 1.5;star.style.transform = `scale(${scale})`;// 随机透明度const opacity = 0.3 + Math.random() * 0.7;star.style.opacity = opacity;}
};
</script>
</body>
</html>