网站制作css教程
CSS基础概念
CSS（层叠样式表）用于控制网页的视觉表现，包括布局、颜色、字体等。通过选择器（Selector）和属性（Property）定义样式规则。
引入CSS的三种方式
内联样式：直接在HTML标签中使用style属性。
<p style="color: red;">文本内容</p>内部样式表：在HTML的<head>中通过<style>标签定义。
<head>
<style>
p { color: blue; }
</style>
</head>外部样式表：通过.css文件引入，推荐用于大型项目。
<link rel="stylesheet" href="styles.css">常用CSS选择器
标签选择器：按HTML标签名匹配。
p { font-size: 16px; }类选择器：通过.classname匹配。
.text-red { color: red; }ID选择器：通过#idname匹配，优先级较高。
#header { background: #333; }组合选择器：
div.container { width: 100%; } /* 同时满足div和class="container" */盒模型与布局
每个元素被视为一个盒子，包含content、padding、border和margin。
.box {
width: 200px;
padding: 20px;
border: 1px solid #000;
margin: 10px;
}Flex布局：现代布局方案，适合响应式设计。
.container {
display: flex;
justify-content: center; /* 水平对齐 */
align-items: center; /* 垂直对齐 */
}响应式设计
使用媒体查询适配不同设备屏幕。
@media (max-width: 768px) {
.menu { display: none; }
}动画与过渡
过渡效果：平滑改变属性值。
.button {
transition: background 0.3s ease;
}
.button:hover { background: #555; }关键帧动画：
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.element { animation: fadeIn 2s; }实用工具与框架
- CSS预处理器：如Sass/Less，支持变量和嵌套语法。
- CSS框架：Bootstrap、Tailwind CSS可加速开发。
- 浏览器开发者工具：调试样式和布局。
