网页制作css设置
CSS 基础设置
CSS（层叠样式表）用于控制网页的视觉表现，包括布局、颜色、字体等。以下是核心设置方法：
选择器与属性
/* 元素选择器 */
p {
color: #333;
font-size: 16px;
}
/* 类选择器 */
.header {
background-color: #f8f9fa;
}
/* ID选择器 */
#main-content {
width: 80%;
margin: 0 auto;
}盒模型
.box {
width: 200px;
padding: 20px;
border: 1px solid #ddd;
margin: 10px;
box-sizing: border-box; /* 包含padding和border */
}布局技术
Flexbox布局
.container {
display: flex;
justify-content: space-between;
align-items: center;
}
.item {
flex: 1;
min-width: 100px;
}Grid布局
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.grid-item {
grid-column: span 1;
}响应式设计
媒体查询
@media (max-width: 768px) {
.menu {
display: none;
}
#main-content {
width: 95%;
}
}视口单位
.banner {
height: 50vh; /* 视口高度的50% */
width: 100vw; /* 视口宽度的100% */
}动画与过渡
关键帧动画
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.element {
animation: fadeIn 1s ease-in-out;
}过渡效果
.button {
transition: all 0.3s ease;
}
.button:hover {
transform: scale(1.05);
background-color: #007bff;
}性能优化
CSS优化建议
- 避免过度嵌套选择器（如
.nav ul li a） - 使用CSS变量提高可维护性
- 合并重复样式规则
- 优先使用类选择器而非ID选择器
CSS变量示例
:root {
--primary-color: #3498db;
--spacing-unit: 8px;
}
.card {
padding: var(--spacing-unit);
border: 1px solid var(--primary-color);
}浏览器兼容性
前缀处理
.transform {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}特性检测
@supports (display: grid) {
.container {
display: grid;
}
}
