CSS简介
进阶选择器与组合选择器
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">
