个人主页：Guiat
归属专栏：HTML CSS JavaScript
文章目录
正文
1. CSS 基础概念
CSS（层叠样式表）是一种用于描述HTML或XML文档表现形式的样式表语言。它控制网页的视觉展示，包括布局、颜色、字体等。
1.1 CSS 语法结构
CSS 规则集由选择器和声明块组成：
选择器 {
属性: 值;
属性: 值;
}
例如：
h1 {
color: blue;
font-size: 24px;
}
1.2 CSS 引入方式
1.2.1 内联样式
直接在HTML元素中使用style属性：
<p style="color: red; font-size: 16px;">这是红色文本</p>
1.2.2 内部样式表
在HTML文档的<head>部分使用<style>标签：
<head>
<style>
p {
color: blue;
font-size: 18px;
}
</style>
</head>
1.2.3 外部样式表
创建独立的.css文件，通过<link>标签引入：
<head>
<link rel="stylesheet" href="styles.css">
</head>
2. CSS 选择器
2.1 基本选择器
| 选择器类型 | 语法 | 示例 | 描述 |
|---|---|---|---|
| 元素选择器 | 元素名 | p { } | 选择所有<p>元素 |
| 类选择器 | .类名 | .intro { } | 选择所有class="intro"的元素 |
| ID选择器 | #ID名 | #header { } | 选择id="header"的元素 |
| 通用选择器 | * | * { } | 选择所有元素 |
2.2 组合选择器
/* 后代选择器 - 选择div内部的所有p元素 */
div p {
color: red;
}
/* 子选择器 - 只选择div的直接子元素p */
div > p {
color: blue;
}
/* 相邻兄弟选择器 - 选择紧跟在div后的p元素 */
div + p {
color: green;
}
/* 通用兄弟选择器 - 选择div后的所有p兄弟元素 */
div ~ p {
color: orange;
}
3. 盒模型
网页中的每个元素都被看作一个矩形盒子，由内容、内边距、边框和外边距组成。
3.1 标准盒模型与IE盒模型
/* 标准盒模型 */
.box-standard {
box-sizing: content-box; /* 默认值 */
width: 300px;
padding: 20px;
border: 10px solid black;
/* 总宽度 = 300px + 20px*2 + 10px*2 = 360px */
}
/* IE盒模型 */
.box-ie {
box-sizing: border-box;
width: 300px;
padding: 20px;
border: 10px solid black;
/* 总宽度 = 300px (内容区域会自动缩小) */
}
3.2 margin和padding
/* 四个方向相同 */
.box1 {
margin: 10px;
padding: 20px;
}
/* 上下、左右分别设置 */
.box2 {
margin: 10px 20px; /* 上下10px，左右20px */
padding: 5px 15px; /* 上下5px，左右15px */
}
/* 分别设置上、右、下、左 (顺时针) */
.box3 {
margin: 10px 20px 30px 40px;
padding: 5px 15px 25px 35px;
}
4. 布局技术
4.1 Flexbox布局
Flexbox是一维布局模型，非常适合处理行或列的排列。
.container {
display: flex;
flex-direction: row; /* row, column, row-reverse, column-reverse */
justify-content: space-between; /* flex项目在主轴上的对齐方式 */
align-items: center; /* flex项目在交叉轴上的对齐方式 */
flex-wrap: wrap; /* 允许项目换行 */
gap: 10px; /* 项目间距 */
}
.item {
flex: 1; /* 弹性增长比例 */
}
4.1.1 Flex属性示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.flex-container {
display: flex;
background-color: lightgray;
}
.flex-container>div {
background-color: DodgerBlue;
color: white;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
</style>
</head>
<body>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
4.2 Grid布局
Grid是二维布局系统，同时处理行和列。
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3列等宽 */
grid-template-rows: 100px 200px; /* 2行，高度分别为100px和200px */
grid-gap: 10px; /* 网格间距 */
}
.grid-item {
grid-column: span 2; /* 横跨2列 */
grid-row: 1 / 3; /* 从第1行到第3行（不含） */
}
4.2.1 Grid布局示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container>div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
</style>
</head>
<body>
<div class="grid-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>
5. 响应式设计
5.1 媒体查询
媒体查询允许根据设备特性（如屏幕宽度）应用不同的样式：
/* 基础样式 */
body {
font-size: 16px;
}
/* 在宽度小于768px的设备上应用 */
@media (max-width: 768px) {
body {
font-size: 14px;
}
.sidebar {
display: none;
}
}
/* 在宽度小于480px的设备上应用 */
@media (max-width: 480px) {
body {
font-size: 12px;
}
.container {
padding: 5px;
}
}
5.2 响应式单位
.responsive-element {
/* 相对于视口宽度的单位 */
width: 50vw;
/* 相对于父元素字体大小的单位 */
padding: 1.5em;
/* 相对于根元素(html)字体大小的单位 */
margin: 2rem;
/* 相对于视口尺寸的单位（取较小的那个） */
font-size: 5vmin;
}
6. CSS 变换与动画
6.1 变换(Transform)
.transform-example {
/* 平移 */
transform: translate(50px, 20px);
/* 旋转 */
transform: rotate(45deg);
/* 缩放 */
transform: scale(1.5, 0.8);
/* 倾斜 */
transform: skew(10deg, 20deg);
/* 组合变换 (从右到左执行) */
transform: rotate(45deg) scale(1.5) translate(50px, 20px);
}
6.2 过渡(Transition)
过渡允许属性值在指定的持续时间内平滑地变化。
.transition-example {
width: 100px;
height: 100px;
background-color: blue;
/* 指定过渡属性、持续时间、速度曲线和延迟 */
transition: width 0.5s ease,
background-color 1s ease-in-out 0.2s;
}
.transition-example:hover {
width: 200px;
background-color: red;
}
6.3 动画(Animation)
使用@keyframes规则定义动画序列，然后通过animation属性应用。
/* 定义名为"slide"的动画 */
@keyframes slide {
0% {
transform: translateX(0);
opacity: 0;
}
50% {
opacity: 1;
}
100% {
transform: translateX(300px);
opacity: 0;
}
}
.animation-example {
width: 100px;
height: 100px;
background-color: green;
/* 应用动画 */
animation-name: slide;
animation-duration: 3s;
animation-timing-function: ease-in-out;
animation-delay: 1s;
animation-iteration-count: infinite;
animation-direction: alternate;
/* 简写形式 */
/* animation: slide 3s ease-in-out 1s infinite alternate; */
}
7. CSS 预处理器
CSS预处理器添加了编程特性（变量、嵌套、混合等），使CSS更易于维护。
7.1 Sass/SCSS示例
// 变量
$primary-color: #3498db;
$secondary-color: #2ecc71;
$padding: 15px;
// 嵌套
.container {
max-width: 1200px;
padding: $padding;
.header {
background-color: $primary-color;
color: white;
h1 {
font-size: 24px;
}
}
.content {
background-color: lighten($primary-color, 40%);
&:hover {
background-color: darken($primary-color, 10%);
}
}
}
// 混合(Mixin)
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
border-radius: $radius;
}
.button {
@include border-radius(5px);
background-color: $secondary-color;
padding: $padding / 2;
}
8. CSS 新特性
8.1 CSS变量(自定义属性)
:root {
--primary-color: #3498db;
--secondary-color: #2ecc71;
--font-size-base: 16px;
--spacing: 20px;
}
.header {
background-color: var(--primary-color);
padding: var(--spacing);
font-size: calc(var(--font-size-base) * 1.5);
}
.button {
background-color: var(--secondary-color);
padding: calc(var(--spacing) / 2);
margin: var(--spacing);
}
8.2 网格与子网格
.grid-container {
display: grid;
grid-template-columns: repeat(9, 1fr);
gap: 10px;
}
.nested-grid {
grid-column: span 3;
/* CSS Grid Level 2: 子网格 */
display: grid;
grid-template-columns: subgrid; /* 使用父网格的列定义 */
}
8.3 CSS Shapes
.circle-text {
width: 300px;
height: 300px;
shape-outside: circle(50%);
float: left;
/* 文本将围绕圆形流动 */
}
.custom-shape {
width: 300px;
height: 200px;
shape-outside: polygon(0 0, 100% 0, 100% 75%, 75% 100%, 0 100%);
float: right;
/* 文本将围绕多边形流动 */
}
9. CSS 滤镜和混合模式
9.1 CSS 滤镜 (Filter)
滤镜可以对元素应用视觉效果，如模糊、亮度调整等。
.filter-examples img {
width: 200px;
margin: 10px;
}
.blur {
filter: blur(5px);
}
.brightness {
filter: brightness(150%);
}
.contrast {
filter: contrast(200%);
}
.grayscale {
filter: grayscale(100%);
}
.sepia {
filter: sepia(80%);
}
.hue-rotate {
filter: hue-rotate(180deg);
}
.invert {
filter: invert(100%);
}
.combined {
filter: contrast(150%) brightness(120%) sepia(30%);
}
9.2 混合模式 (Blend Modes)
混合模式决定了元素如何与其背景或重叠元素混合。
.blend-container {
background-image: url('background.jpg');
padding: 20px;
}
.multiply {
background-color: rgba(255, 0, 0, 0.5);
mix-blend-mode: multiply;
}
.screen {
background-color: rgba(0, 255, 0, 0.5);
mix-blend-mode: screen;
}
.overlay {
background-color: rgba(0, 0, 255, 0.5);
mix-blend-mode: overlay;
}
/* 背景混合 */
.background-blend {
width: 300px;
height: 300px;
background-image: url('pattern.png'), url('photo.jpg');
background-blend-mode: overlay;
}
10. CSS 形状与裁剪
10.1 形状路径 (shape-outside)
shape-outside属性定义了一个形状，文本将环绕这个形状流动。
.circle-float {
width: 200px;
height: 200px;
border-radius: 50%;
background: #3498db;
float: left;
shape-outside: circle(50%);
margin-right: 20px;
}
.ellipse-float {
width: 300px;
height: 200px;
background: #e74c3c;
border-radius: 50%;
float: right;
shape-outside: ellipse(40% 50%);
margin-left: 20px;
}
.polygon-float {
width: 200px;
height: 200px;
background: #2ecc71;
float: left;
clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 100%, 0% 100%);
shape-outside: polygon(0% 0%, 100% 0%, 100% 75%, 75% 100%, 0% 100%);
margin-right: 20px;
}
10.2 裁剪路径 (clip-path)
clip-path属性用于裁剪元素，只显示通过裁剪路径定义的部分。
.clip-circle {
clip-path: circle(40%);
}
.clip-ellipse {
clip-path: ellipse(30% 50% at 50% 50%);
}
.clip-polygon {
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
/* 创建一个菱形 */
}
.clip-path-animation {
width: 200px;
height: 200px;
background: linear-gradient(45deg, #3498db, #9b59b6);
animation: morph 3s infinite alternate;
}
@keyframes morph {
0% {
clip-path: circle(40%);
}
50% {
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
100% {
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
}
11. CSS 性能优化
11.1 选择器性能
选择器从右到左解析，最右边的选择器被称为"关键选择器"（key selector）。
/* 低效选择器 - 浏览器必须检查所有div元素 */
div * {
color: red;
}
/* 低效选择器 - 浏览器必须检查所有a元素 */
#header .nav li a {
color: blue;
}
/* 高效选择器 - 直接通过类找到元素 */
.nav-link {
color: blue;
}
11.1.1 选择器性能优化建议
- 避免使用通用选择器（*）
- 减少选择器的深度
- 使用类选择器代替复杂的后代选择器
- 避免过度使用子选择器（>）和相邻选择器（+）
11.2 重排与重绘优化
/* 触发重排的属性变化 */
.reflow-example {
/* 使用transform代替下面的属性 */
/* left: 100px; */
/* top: 50px; */
/* width: 200px; */
/* height: 300px; */
/* 使用transform避免重排 */
transform: translate(100px, 50px);
}
/* 只触发重绘的属性变化 */
.repaint-example {
/* 这些只触发重绘，性能更好 */
color: red;
background-color: blue;
visibility: hidden;
}
/* 使用will-change提示浏览器 */
.optimized-animation {
will-change: transform, opacity;
transition: transform 0.3s, opacity 0.3s;
}
12. CSS 架构与组织
12.1 BEM命名规范
BEM代表块（Block）、元素（Element）和修饰符（Modifier），是一种CSS命名约定。
/* 块 */
.card {
border: 1px solid #ddd;
border-radius: 4px;
padding: 16px;
}
/* 元素（使用__连接块和元素） */
.card__title {
font-size: 18px;
margin-bottom: 8px;
}
.card__image {
width: 100%;
height: auto;
}
.card__content {
color: #333;
}
/* 修饰符（使用--连接元素和修饰符） */
.card--featured {
border-color: gold;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.card__title--large {
font-size: 24px;
}
12.2 SMACSS架构
SMACSS（可扩展和模块化CSS架构）将CSS分为5类：
/* 1. 基础规则 */
body, h1, h2, p, ul, li {
margin: 0;
padding: 0;
}
/* 2. 布局规则 (前缀l- 或 layout-) */
.l-header {
height: 80px;
}
.l-sidebar {
width: 25%;
float: left;
}
.l-main {
width: 75%;
float: right;
}
/* 3. 模块规则 */
.nav {
list-style: none;
}
.nav-item {
display: inline-block;
}
/* 4. 状态规则 (前缀is- 或 has-) */
.is-active {
font-weight: bold;
color: #333;
}
.is-hidden {
display: none;
}
/* 5. 主题规则 (前缀theme-) */
.theme-dark {
background: #333;
color: white;
}
.theme-light {
background: white;
color: #333;
}
13. 现代CSS框架比较
13.1 功能对比表
| 特性 | Bootstrap 5 | Tailwind CSS | Bulma | Material UI |
|---|---|---|---|---|
| 类型 | 组件库 | 原子CSS | 组件库 | 组件库 |
| 文件大小 | ~150KB | ~10KB (生产优化后) | ~200KB | ~100KB |
| 定制化 | 中等 | 高 | 中等 | 中等 |
| 学习曲线 | 低 | 中高 | 低 | 中等 |
| JS依赖 | 可选 | 不需要 | 不需要 | 需要React |
| 响应式 | 内置 | 内置 | 内置 | 内置 |
| 流行度 | 非常高 | 高 | 中等 | 高 |
13.2 示例代码比较
13.2.1 Bootstrap 5
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="card">
<img src="image.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
</div>
</div>
13.2.2 Tailwind CSS
<div class="container mx-auto px-4">
<div class="flex flex-wrap -mx-4">
<div class="w-full md:w-1/2 px-4">
<div class="bg-white rounded-lg shadow-md overflow-hidden">
<img class="w-full" src="image.jpg" alt="...">
<div class="p-4">
<h5 class="text-xl font-semibold mb-2">Card title</h5>
<p class="text-gray-700 mb-4">Some quick example text.</p>
<a href="#" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
Go somewhere
</a>
</div>
</div>
</div>
</div>
</div>
14. CSS 变量的高级应用
14.1 主题切换
使用CSS变量可以轻松实现主题切换：
/* 定义默认（浅色）主题变量 */
:root {
--bg-color: #ffffff;
--text-color: #333333;
--primary-color: #4299e1;
--secondary-color: #ed8936;
--border-color: #e2e8f0;
}
/* 定义深色主题变量 */
.dark-theme {
--bg-color: #1a202c;
--text-color: #f7fafc;
--primary-color: #90cdf4;
--secondary-color: #fbd38d;
--border-color: #2d3748;
}
/* 使用变量 */
body {
background-color: var(--bg-color);
color: var(--text-color);
transition: background-color 0.3s, color 0.3s;
}
.button {
background-color: var(--primary-color);
border: 1px solid var(--border-color);
}
/* JavaScript切换主题 */
// document.getElementById('themeToggle').addEventListener('click', function() {
// document.body.classList.toggle('dark-theme');
// });
14.2 响应式变量
可以在媒体查询中修改CSS变量值：
:root {
--h1-font-size: 2.5rem;
--paragraph-margin: 1.5rem;
--container-width: 1200px;
}
@media (max-width: 768px) {
:root {
--h1-font-size: 2rem;
--paragraph-margin: 1rem;
--container-width: 100%;
}
}
@media (max-width: 480px) {
:root {
--h1-font-size: 1.5rem;
--paragraph-margin: 0.75rem;
}
}
h1 {
font-size: var(--h1-font-size);
}
p {
margin-bottom: var(--paragraph-margin);
}
.container {
max-width: var(--container-width);
margin: 0 auto;
}
15. CSS Grid高级布局技巧
15.1 区域命名与布局
.dashboard {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: auto 1fr auto;
grid-template-areas:
"header header header header"
"sidebar main main main"
"footer footer footer footer";
min-height: 100vh;
gap: 10px;
}
.header {
grid-area: header;
background-color: #3498db;
padding: 1rem;
}
.sidebar {
grid-area: sidebar;
background-color: #2ecc71;
}
.main-content {
grid-area: main;
background-color: #ecf0f1;
}
.footer {
grid-area: footer;
background-color: #34495e;
padding: 1rem;
}
/* 响应式布局修改 */
@media (max-width: 768px) {
.dashboard {
grid-template-columns: 1fr;
grid-template-areas:
"header"
"main"
"sidebar"
"footer";
}
}
15.2 auto-fill 与 auto-fit
.gallery {
display: grid;
gap: 10px;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
/* 或者使用 auto-fit */
/* grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); */
}
/*
auto-fill: 尽可能多地创建网格轨道，即使有空轨道
auto-fit: 扩展现有项目以填充可用空间
*/
.gallery-item {
height: 200px;
background-color: #3498db;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
}
结语
感谢您的阅读！期待您的一键三连！欢迎指正！
扫一扫
1311
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
