网页制作教程制作css
CSS 基础语法
CSS（层叠样式表）用于控制网页的样式和布局。基本语法由选择器和声明块组成：
选择器 {
属性: 值;
属性: 值;
}例如，设置段落文字颜色为红色：
p {
color: red;
}选择器类型
- 元素选择器：直接使用 HTML 标签名（如
p、h1）。 - 类选择器：以
.开头（如.header），通过class属性调用。 - ID 选择器：以
#开头（如#main），通过id属性调用。 - 后代选择器：用空格分隔（如
div p选择div内的所有p）。
常用样式属性
- 文本样式：
p { font-family: Arial; font-size: 16px; text-align: center; } - 盒模型：
div { width: 200px; padding: 10px; margin: 20px; border: 1px solid black; } - 背景与颜色：
body { background-color: #f0f0f0; background-image: url("image.jpg"); }
布局技术
- Flexbox：弹性布局，适合一维排列。
.container { display: flex; justify-content: space-between; } - Grid：网格布局，适合二维布局。
.grid-container { display: grid; grid-template-columns: 1fr 1fr; }
响应式设计
使用媒体查询适配不同设备：
@media (max-width: 600px) {
body {
font-size: 14px;
}
}动画与过渡
- 过渡效果：平滑改变属性值。
button { transition: background-color 0.3s; } button:hover { background-color: blue; } - 关键帧动画：
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .element { animation: fadeIn 2s; }
链接 CSS 到 HTML
在 HTML 文件的 <head> 中引入外部 CSS 文件：
<link rel="stylesheet" href="styles.css">或使用内联样式：
<p style="color: red;">内联样式示例</p>调试工具
浏览器开发者工具（按 F12）可实时修改和检查 CSS，帮助快速定位问题。
