网页制作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;
  }
}