css样式制作
CSS样式制作基础
CSS(层叠样式表)用于控制网页的视觉呈现。通过选择器和属性声明,可以精确控制HTML元素的布局、颜色、字体等样式。
选择器与属性
/* 标签选择器 */
p {
color: blue;
font-size: 16px;
}
/* 类选择器 */
.highlight {
background-color: yellow;
}
/* ID选择器 */
#header {
padding: 20px;
}
盒模型 每个元素被视为一个矩形盒子,包含内容区、内边距(padding)、边框(border)和外边距(margin):
width/height:内容区尺寸padding: 10px;:内边距border: 1px solid black;:边框margin: auto;:外边距
布局技术
Flexbox布局 弹性盒子模型适合一维布局(行或列):
.container {
display: flex;
justify-content: center; /* 主轴对齐 */
align-items: center; /* 交叉轴对齐 */
}
.item {
flex: 1; /* 弹性比例 */
}
Grid布局 网格布局适合二维复杂布局:
.grid-container {
display: grid;
grid-template-columns: 1fr 2fr; /* 列宽比例 */
gap: 10px; /* 网格间隙 */
}
.grid-item {
grid-column: span 2;
}
响应式设计
媒体查询 根据设备特性应用不同样式:
@media (max-width: 768px) {
.sidebar {
display: none;
}
.content {
width: 100%;
}
}
视口单位 使用相对单位适应不同屏幕:
vw(视口宽度百分比)vh(视口高度百分比)vmin/vmax(最小/最大视口尺寸百分比)
动画与过渡
关键帧动画

@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.element {
animation: fadeIn 2s ease-in-out;
}
过渡效果
.button {
transition: background-color 0.3s;
}
.button:hover {
background-color: #3498db;
}
预处理与模块化
Sass/Less CSS预处理器提供变量、嵌套等功能:
$primary-color: #333;
.container {
.item {
color: $primary-color;
}
}
CSS模块 组件化样式避免冲突:
/* styles.module.css */
.title {
font-weight: bold;
}
import styles from './styles.module.css';
<h1 className={styles.title}>标题</h1>
性能优化
选择器优化

- 避免深层嵌套(如
.nav ul li a) - 优先使用类选择器而非标签选择器
代码压缩 使用工具如PostCSS自动删除空白字符和冗余代码
关键CSS 将首屏必要样式内联,延迟加载非关键样式
现代CSS特性
CSS变量
:root {
--main-color: #06c;
}
.element {
color: var(--main-color);
}
伪元素
.tooltip::after {
content: attr(data-tooltip);
position: absolute;
}
滤镜与混合模式
.image {
filter: blur(2px);
mix-blend-mode: multiply;
}






