css样式制作
CSS样式制作基础
CSS（层叠样式表）用于控制网页的视觉呈现。通过CSS可以定义字体、颜色、布局等样式。
选择器与属性
/* 标签选择器 */
p {
color: blue;
font-size: 16px;
}
/* 类选择器 */
.highlight {
background-color: yellow;
}
/* ID选择器 */
#header {
padding: 20px;
}盒模型布局
CSS盒模型包含内容(content)、内边距(padding)、边框(border)和外边距(margin)。
.box {
width: 300px;
padding: 20px;
border: 5px solid black;
margin: 10px;
box-sizing: border-box; /* 包含padding和border在内的宽度 */
}弹性布局(Flexbox)
Flexbox提供高效的布局方式，特别适合响应式设计。
.container {
display: flex;
justify-content: center; /* 水平对齐 */
align-items: center; /* 垂直对齐 */
flex-wrap: wrap; /* 换行 */
}
.item {
flex: 1 0 200px; /* 增长 收缩 基础宽度 */
margin: 10px;
}网格布局(Grid)
CSS Grid创建二维布局系统，适合复杂页面结构。
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 20px;
}
.grid-item {
grid-column: span 2; /* 跨两列 */
background-color: #f0f0f0;
}动画与过渡效果
CSS支持平滑的动画和过渡效果。
/* 过渡 */
.button {
transition: background-color 0.3s ease;
}
.button:hover {
background-color: #4CAF50;
}
/* 动画 */
@keyframes slide {
from { transform: translateX(0); }
to { transform: translateX(100px); }
}
.slider {
animation: slide 2s infinite alternate;
}响应式设计
媒体查询使样式能适应不同屏幕尺寸。
/* 移动设备优先 */
.container {
padding: 10px;
}
/* 平板及以上 */
@media (min-width: 768px) {
.container {
padding: 20px;
}
}
/* 桌面 */
@media (min-width: 1024px) {
.container {
max-width: 1200px;
margin: 0 auto;
}
}变量与自定义属性
CSS变量提高样式的可维护性。
:root {
--primary-color: #3498db;
--spacing-unit: 8px;
}
.element {
color: var(--primary-color);
margin: calc(var(--spacing-unit) * 2);
}
