网页制作css文档

CSS文档的基本结构

CSS（层叠样式表）用于定义网页的样式和布局。一个典型的CSS文档包含选择器和声明块，声明块由属性和值组成。

选择器 {
    属性: 值;
    属性: 值;
}

常用选择器类型

1. 元素选择器：直接使用HTML标签名作为选择器。

   p {
       color: blue;
   }

2. 类选择器：以.开头，匹配HTML中class属性。

   .highlight {
       background-color: yellow;
   }

3. ID选择器：以#开头，匹配HTML中id属性（每个ID应唯一）。

   #header {
       font-size: 24px;
   }

4. 组合选择器：

   • 后代选择器：div p（选择div内的所有p）。
   • 子选择器：div > p（仅选择div的直接子元素p）。

常见样式属性

• 文本样式：

  font-family: Arial, sans-serif;
  font-size: 16px;
  color: #333;
  text-align: center;

• 盒模型：

  margin: 10px;
  padding: 15px;
  border: 1px solid black;
  width: 200px;

• 背景与颜色：

  background-color: #f0f0f0;
  background-image: url("image.jpg");

响应式设计

使用媒体查询适配不同设备屏幕：

@media (max-width: 768px) {
    body {
        font-size: 14px;
    }
}

外部CSS引入

在HTML中通过<link>标签引入外部CSS文件：

<link rel="stylesheet" href="styles.css">

调试技巧

• 使用浏览器开发者工具（F12）检查元素样式。
• 验证CSS语法通过工具如W3C CSS Validator。

通过合理组织选择器和属性，CSS能高效控制网页外观和交互效果。