CSS简介
- 进阶选择器与组合选择器
- 1. 伪类和伪元素选择器
- 2. 属性选择器
- 高级布局
- 1. Flexbox布局
- 2. CSS Grid布局
- 响应式设计和媒体查询
- 动画与过渡
- 1. 过渡效果
- 2. 关键帧动画
- CSS变量与混合宏
- 1. CSS变量
- 2. Sass混合宏
- 使用CSS框架
- 1. 引入Bootstrap
- CSS优化与性能
- 1. 减少CSS文件大小
- 2. 使用CSS预处理器
- 3. 使用内容分发网络（CDN）
进阶选择器与组合选择器
1. 伪类和伪元素选择器
伪类和伪元素选择器用于选择元素的特定状态或部分。更高级的使用方式如下：
:nth-of-type(n)：选择指定类型的第n个元素。:not(selector)：选择不匹配选择器的元素。::first-letter：选择元素的首字母。::first-line：选择元素的首行。
p:nth-of-type(2) {color: red;
}div:not(.excluded) {background-color: lightblue;
}p::first-letter {font-size: 200%;color: green;
}p::first-line {font-weight: bold;
}
2. 属性选择器
属性选择器可以更精确地选择具有特定属性值的元素。
/* 选择具有title属性的元素 */
a[title] {color: blue;
}/* 选择title属性以"example"开头的元素 */
a[title^="example"] {color: green;
}/* 选择title属性以"end"结尾的元素 */
a[title$="end"] {color: red;
}/* 选择title属性包含"mid"的元素 */
a[title*="mid"] {color: purple;
}
高级布局
1. Flexbox布局
Flexbox布局可以创建更加复杂和灵活的布局，支持各种对齐方式和弹性分配。
.container {display: flex;flex-direction: row; /* 主轴为水平 */flex-wrap: wrap; /* 允许换行 */justify-content: space-around; /* 沿主轴分布 */align-items: center; /* 垂直方向居中对齐 */align-content: space-between; /* 多行之间分布 */
}.item {flex: 1; /* 弹性项，等分分配空间 */margin: 10px;padding: 20px;background-color: lightcoral;
}
2. CSS Grid布局
CSS Grid布局允许创建二维布局，行和列都可以灵活定义。
.container {display: grid;grid-template-columns: repeat(3, 1fr); /* 创建3列，等宽 */grid-template-rows: auto; /* 行高自动 */gap: 10px; /* 网格项之间的间距 */
}.item {background-color: lightblue;padding: 20px;
}/* 合并网格单元格 */
.item:first-child {grid-column: span 2; /* 占据两列 */grid-row: span 2; /* 占据两行 */
}
响应式设计和媒体查询
响应式设计使得网页在不同设备上都能良好显示。最佳实践包括使用灵活的网格、媒体查询和流体图片等。
/* 基本样式 */
body {font-size: 16px;
}.container {display: grid;grid-template-columns: 1fr;gap: 10px;
}/* 屏幕宽度在600px到900px之间的样式 */
@media (min-width: 600px) and (max-width: 900px) {.container {grid-template-columns: repeat(2, 1fr); /* 创建两列布局 */}
}/* 屏幕宽度大于900px的样式 */
@media (min-width: 900px) {.container {grid-template-columns: repeat(3, 1fr); /* 创建三列布局 */}
}
动画与过渡
CSS动画和过渡可以为网页添加动态效果，提升用户体验。
1. 过渡效果
过渡效果用于平滑地改变元素的样式。
button {background-color: lightblue;transition: background-color 0.3s ease, transform 0.3s ease;
}button:hover {background-color: blue;transform: scale(1.1); /* 放大 */
}
2. 关键帧动画
关键帧动画用于创建复杂的动画效果。
@keyframes fadeIn {0% {opacity: 0;}100% {opacity: 1;}
}@keyframes slide {from {transform: translateX(0);}to {transform: translateX(100px);}
}div {width: 100px;height: 100px;background-color: red;animation: fadeIn 2s ease-in-out, slide 2s ease-in-out;
}
CSS变量与混合宏
CSS变量和混合宏（Mixins）可以提高样式代码的可重用性和维护性。
1. CSS变量
CSS变量使得样式的管理更加方便和灵活。
:root {--main-color: #4CAF50;--padding: 10px;
}.container {background-color: var(--main-color);padding: var(--padding);
}
2. Sass混合宏
Sass混合宏允许定义可重用的样式代码块。
Sass文件（styles.scss）：
$primary-color: blue;
$secondary-color: green;
$font-stack: Helvetica, sans-serif;@mixin flex-center {display: flex;justify-content: center;align-items: center;
}body {font: 100% $font-stack;color: $primary-color;
}.container {@include flex-center;height: 100vh;background-color: $secondary-color;
}
使用CSS框架
CSS框架如Bootstrap、Foundation等可以极大地加快开发速度，并确保一致的设计风格。
1. 引入Bootstrap
引入Bootstrap框架，并使用其内置的样式类和组件。
HTML：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"><title>Bootstrap示例</title>
</head>
<body><div class="container"><div class="row"><div class="col-md-4"><div class="card"><div class="card-body"><h5 class="card-title">卡片标题</h5><p class="card-text">这是卡片内容。</p><a href="#" class="btn btn-primary">按钮</a></div></div></div><div class="col-md-4"><div class="card"><div class="card-body"><h5 class="card-title">卡片标题</h5><p class="card-text">这是卡片内容。</p><a href="#" class="btn btn-primary">按钮</a></div></div></div><div class="col-md-4"><div class="card"><div class="card-body"><h5 class="card-title">卡片标题</h5><p class="card-text">这是卡片内容。</p><a href="#" class="btn btn-primary">按钮</a></div></div></div></div></div><script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script><script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
CSS优化与性能
优化CSS可以提升网页加载速度和渲染性能。
1. 减少CSS文件大小
- 压缩CSS文件。
- 移除未使用的CSS代码。
- 合并多个CSS文件。
2. 使用CSS预处理器
使用Sass或Less预处理器，可以让CSS更加模块化和易于维护。
3. 使用内容分发网络（CDN）
将CSS文件托管在CDN上，可以提高文件的加载速度。
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
