网页制作css简单
基础CSS语法结构
CSS规则由选择器和声明块组成。选择器指定样式应用的对象，声明块包含属性和值的组合：
选择器 {
属性: 值;
属性: 值;
}示例：
p {
color: blue;
font-size: 16px;
}常用选择器类型
- 元素选择器：直接使用HTML标签名（如
p、h1） - 类选择器：以
.开头（如.header） - ID选择器：以
#开头（如#main-content） - 后代选择器：通过空格嵌套（如
div p）
引入CSS的三种方式
- 内联样式：直接在HTML标签中使用
style属性<p style="color: red;">文本</p> - 内部样式表：在HTML的
<head>内通过<style>标签定义<style> body { background-color: #f0f0f0; } </style> - 外部样式表：通过
<link>引入独立的.css文件（推荐）<link rel="stylesheet" href="styles.css">
常用样式属性示例
- 文本样式
h1 { font-family: Arial, sans-serif; text-align: center; text-decoration: underline; } - 盒模型
.box { width: 200px; padding: 20px; margin: 10px auto; border: 1px solid black; } - 背景与颜色
body { background-color: lightgray; color: #333; }
简单布局技巧
- 居中元素：
.center { display: block; margin: 0 auto; width: 50%; } - 浮动与清除：
.float-left { float: left; width: 30%; } .clearfix::after { content: ""; display: table; clear: both; }
响应式设计基础
使用媒体查询适配不同屏幕尺寸：
@media (max-width: 600px) {
body {
font-size: 14px;
}
.box {
width: 100%;
}
}调试工具建议
浏览器开发者工具（F12）可实时查看和修改CSS，推荐使用Chrome或Firefox的检查元素功能。
