web网页制作css
CSS 基础语法
CSS（层叠样式表）用于控制网页的样式和布局。基本语法由选择器和声明块组成：
选择器 {
属性: 值;
属性: 值;
}- 选择器：指定需要样式化的 HTML 元素（如
p、.class、#id）。 - 声明块：包含一组属性-值对，用花括号
{}包裹。
引入 CSS 的三种方式
- 内联样式：直接在 HTML 标签中使用
style属性。<p style="color: red;">文本</p> - 内部样式表：在 HTML 文件的
<head>部分通过<style>标签定义。<style> p { color: blue; } </style> - 外部样式表：通过
<link>标签引入独立的.css文件（推荐）。<link rel="stylesheet" href="styles.css">
常用 CSS 属性
- 文本样式：
color: #333; /* 文字颜色 */ font-size: 16px; /* 字体大小 */ font-family: Arial; /* 字体类型 */ text-align: center; /* 对齐方式 */ - 盒模型：
width: 200px; /* 宽度 */ height: 100px; /* 高度 */ padding: 10px; /* 内边距 */ margin: 20px; /* 外边距 */ border: 1px solid black; /* 边框 */ - 布局：
display: flex; /* 弹性布局 */ display: grid; /* 网格布局 */ position: relative; /* 定位方式 */
选择器类型
- 元素选择器：基于 HTML 标签名称。
p { color: green; } - 类选择器：通过
.class指定。.highlight { background: yellow; } - ID 选择器：通过
#id指定（唯一性）。#header { font-size: 24px; } - 伪类选择器：定义元素特殊状态（如悬停）。
a:hover { color: red; }
响应式设计
使用媒体查询（Media Queries）适配不同设备屏幕：
@media (max-width: 600px) {
body { font-size: 14px; }
}动画与过渡
- 过渡效果：平滑改变属性值。
.button { transition: background 0.3s ease; } .button:hover { background: #ddd; } - 关键帧动画：
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .element { animation: fadeIn 2s; }
调试技巧
- 使用浏览器开发者工具（F12）检查元素样式。
- 通过
border: 1px solid red;临时标记元素边界。
推荐学习资源
- MDN CSS 文档：全面且权威的语法参考。
- CodePen：在线实践 CSS 效果的平台。
- Flexbox Froggy：交互式弹性布局学习游戏。
