css样式表制作
CSS样式表制作指南
CSS（层叠样式表）用于控制网页的视觉呈现。以下是制作CSS样式表的核心方法和注意事项：
基本语法结构 选择器 { 属性: 值; 属性: 值; }
常用选择器类型
- 元素选择器：
p { color: red; } - 类选择器：
.className { font-size: 16px; } - ID选择器：
#idName { background: #fff; } - 属性选择器：
[type="text"] { border: 1px solid; }
样式引入方式
- 内联样式：
<p style="color:blue;"> - 内部样式表：
<style> body { margin:0; } </style> - 外部样式表：
<link rel="stylesheet" href="style.css">
常见样式属性
- 文本样式：
font-family, font-size, color, text-align - 盒模型：
width, height, padding, margin, border - 定位：
position, top, left, z-index - 布局：
display, float, flex, grid
响应式设计 @media (max-width: 600px) { .container { width: 100%; } }
CSS预处理器示例（Sass） $primary-color: #333;
body { font: 100% $primary-color; }
性能优化建议
- 避免过度嵌套选择器
- 使用缩写属性
- 减少!important使用
- 合并重复样式
调试工具
- 浏览器开发者工具
- CSS验证服务
- 自动前缀工具
制作CSS样式表时应注意浏览器兼容性，推荐使用现代CSS特性时添加供应商前缀。样式组织可采用BEM等命名规范保持代码可维护性。
