网页制作css功能
CSS 基础功能
CSS（层叠样式表）用于控制网页的视觉表现，包括布局、颜色、字体等。通过选择器和属性定义样式规则。
选择器示例：
p {
color: blue;
font-size: 16px;
}布局控制
使用 display、position、flexbox 或 grid 实现页面布局。Flexbox 适合一维布局，Grid 适合二维布局。
Flexbox 示例：
.container {
display: flex;
justify-content: center;
}Grid 示例：
.container {
display: grid;
grid-template-columns: 1fr 1fr;
}响应式设计
通过媒体查询适配不同设备屏幕尺寸，确保网页在手机、平板和桌面设备上正常显示。
媒体查询示例：
@media (max-width: 600px) {
body {
font-size: 14px;
}
}动画与过渡
CSS 提供 transition 和 animation 属性创建平滑的动画效果。
过渡示例：
.button {
transition: background-color 0.3s ease;
}
.button:hover {
background-color: #ff0000;
}动画示例：
@keyframes slide {
from { transform: translateX(0); }
to { transform: translateX(100px); }
}
.element {
animation: slide 2s infinite;
}变量与自定义属性
CSS 变量提高代码复用性和维护性，可在全局或局部范围内定义和使用。
变量定义与使用：
:root {
--primary-color: #3498db;
}
.button {
background-color: var(--primary-color);
}预处理器功能
Sass 和 Less 等预处理器扩展 CSS 功能，支持嵌套、混合和函数等高级特性。
Sass 嵌套示例：
nav {
ul {
margin: 0;
li { display: inline-block; }
}
}现代 CSS 特性
CSS 新特性如 aspect-ratio、gap 和 clamp() 函数简化开发并增强设计灵活性。
clamp() 示例：
.text {
font-size: clamp(1rem, 2.5vw, 2rem);
}性能优化
优化 CSS 提升页面加载速度，包括减少冗余代码、使用高效选择器和压缩文件。
关键 CSS 技术：
<style>
/* 内联关键 CSS */
</style>
<link rel="stylesheet" href="non-critical.css" media="print" onload="this.media='all'">
