前端css制作教程
CSS基础概念
CSS（层叠样式表）用于控制网页的视觉呈现。通过选择器和属性声明，可以定义HTML元素的样式。例如，以下代码将段落文字设为红色：
p {
color: red;
}选择器类型
类选择器以点号开头，适用于多个元素：
.highlight {
background-color: yellow;
}ID选择器以井号开头，用于唯一元素：
#header {
font-size: 24px;
}属性选择器匹配特定属性：
input[type="text"] {
border: 1px solid gray;
}盒模型
每个元素被视为矩形盒子，包含内容区、内边距、边框和外边距：
.box {
width: 200px;
padding: 20px;
border: 5px solid black;
margin: 10px;
}布局技术
Flexbox实现弹性布局：
.container {
display: flex;
justify-content: space-between;
}Grid创建网格系统：
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}响应式设计
媒体查询适配不同屏幕尺寸：
@media (max-width: 768px) {
.menu {
display: none;
}
}动画效果
关键帧动画示例：
@keyframes slide {
from { transform: translateX(0); }
to { transform: translateX(100px); }
}
.element {
animation: slide 2s infinite;
}预处理器
Sass提供变量和嵌套功能：
$primary-color: #333;
.button {
background: $primary-color;
&:hover {
background: lighten($primary-color, 10%);
}
}性能优化
减少重绘和回流：
/* 避免频繁修改几何属性 */
.animate {
will-change: transform;
}现代特性
CSS变量实现主题切换：
:root {
--main-bg: #ffffff;
}
.dark-mode {
--main-bg: #000000;
}
body {
background: var(--main-bg);
}
