网页制作教程css
CSS基础概念
CSS（层叠样式表）用于控制网页的视觉表现，包括布局、颜色、字体等。通过选择器（Selector）和属性（Property）定义样式规则。
引入CSS的三种方式
-
内联样式：直接在HTML标签中使用
style属性。<p style="color: red;">内联样式示例</p> -
内部样式表：在HTML的
<head>中使用<style>标签。<style> p { color: blue; } </style> -
外部样式表：通过
.css文件引入，推荐使用。<link rel="stylesheet" href="styles.css">
常用CSS选择器
-
标签选择器：按HTML标签名匹配。
p { font-size: 16px; } -
类选择器：通过
.class匹配。.text-bold { font-weight: bold; } -
ID选择器：通过
#id匹配。#header { background-color: #f0f0f0; } -
后代选择器：嵌套关系匹配。
div p { color: green; }
盒模型（Box Model）
每个元素由内容（Content）、内边距（Padding）、边框（Border）、外边距（Margin）组成。
.box {
width: 200px;
padding: 20px;
border: 1px solid black;
margin: 10px;
}布局技术
-
Flexbox：弹性布局，适合一维排列。
.container { display: flex; justify-content: center; align-items: center; } -
Grid：网格布局，适合二维布局。
.grid-container { display: grid; grid-template-columns: 1fr 1fr; }
响应式设计
使用媒体查询（Media Query）适配不同设备。
@media (max-width: 600px) {
body { font-size: 14px; }
}动画与过渡
-
过渡（Transition）：平滑变化属性值。
.button { transition: background-color 0.3s ease; } -
动画（Animation）：定义关键帧实现复杂效果。
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .element { animation: fadeIn 2s; }
调试工具
浏览器开发者工具（F12）可实时查看和修改CSS，推荐使用Chrome或Firefox的检查功能。
学习资源推荐
- MDN Web Docs（权威文档）
- W3Schools（交互式教程）
- CSS-Tricks（实用技巧）
通过实践项目（如个人博客、产品页面）巩固知识，逐步掌握高级特性如变量（CSS Variables）和预处理（Sass/Less）。
