制作网站css
CSS 基础知识
CSS（层叠样式表）用于控制网页的外观和布局。通过CSS，可以定义字体、颜色、间距、背景等样式属性，使网页更具视觉吸引力。
创建CSS文件
新建一个以.css为扩展名的文件，例如style.css。在HTML文件中通过<link>标签引入CSS文件：
<link rel="stylesheet" href="style.css">常用CSS选择器
选择器用于指定哪些HTML元素应用样式。常见选择器包括：
- 元素选择器：
p { color: red; }（所有段落文本为红色） - 类选择器：
.header { font-size: 24px; }（类名为header的元素） - ID选择器：
#main { width: 80%; }（ID为main的元素） - 后代选择器：
div p { margin: 10px; }（div内的所有p元素）
盒模型
CSS盒模型由内容（content）、内边距（padding）、边框（border）和外边距（margin）组成：
.box {
width: 200px;
padding: 20px;
border: 1px solid #000;
margin: 10px;
}布局技术
-
Flexbox：适用于一维布局（行或列）：
.container { display: flex; justify-content: center; align-items: center; } -
Grid：适用于二维布局：
.grid-container { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
响应式设计
使用媒体查询适配不同设备：
@media (max-width: 768px) {
body {
font-size: 14px;
}
}动画与过渡
通过transition和@keyframes实现动态效果：
.button {
transition: background-color 0.3s ease;
}
.button:hover {
background-color: #ff0000;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.element {
animation: fadeIn 2s;
}预处理器（如Sass）
Sass扩展了CSS功能，支持变量、嵌套和混合：
$primary-color: #333;
body {
font-family: Arial;
color: $primary-color;
}
.header {
background: lighten($primary-color, 20%);
}最佳实践
- 使用语义化的类名（如
.nav-menu而非.div1） - 避免过度使用
!important - 通过CSS变量维护主题色等重复值：
:root { --main-color: #06c; } a { color: var(--main-color); }
调试工具
浏览器开发者工具（F12）可实时编辑和检查CSS，帮助快速定位样式问题。
