网页制作 css样式

CSS样式基础

CSS（层叠样式表）用于控制网页的视觉表现，包括布局、颜色、字体等。以下为关键知识点和实用方法：

选择器与样式规则

CSS通过选择器匹配HTML元素并应用样式：

/* 标签选择器 */  
p { color: blue; }  

/* 类选择器 */  
.text-red { color: red; }  

/* ID选择器 */  
#header { background: #f0f0f0; }  

/* 后代选择器 */  
div p { font-size: 16px; }  

常用样式属性

• 文本与字体

  body {  
    font-family: Arial, sans-serif;  
    line-height: 1.6;  
    text-align: center;  
  }  

• 盒模型

  .box {  
    width: 200px;  
    padding: 20px;  
    margin: 10px auto;  
    border: 1px solid #ddd;  
  }  

• 背景与颜色

  .banner {  
    background: linear-gradient(to right, #ff9966, #ff5e62);  
    color: white;  
  }  

布局技术

• Flexbox

  .container {  
    display: flex;  
    justify-content: space-between;  
    align-items: center;  
  }  

• Grid布局

  .grid {  
    display: grid;  
    grid-template-columns: repeat(3, 1fr);  
    gap: 10px;  
  }  

• 响应式设计

  @media (max-width: 768px) {  
    .menu { display: none; }  
  }  

动画与过渡

.button {  
  transition: all 0.3s ease;  
}  
.button:hover {  
  transform: scale(1.1);  
}  

@keyframes fadeIn {  
  from { opacity: 0; }  
  to { opacity: 1; }  
}  
.fade-in { animation: fadeIn 2s; }  

最佳实践

• 使用外部样式表（<link rel="stylesheet" href="styles.css">）分离结构与样式。
• 避免过度使用!important，优先通过选择器优先级解决冲突。
• 采用CSS变量（自定义属性）统一管理颜色或尺寸：

  :root { --main-color: #3498db; }  
  .theme { color: var(--main-color); }  

通过以上方法可高效实现网页样式设计，结合浏览器开发者工具调试能进一步提升效果。