dw网页制作css

CSS 基础语法与结构

CSS（层叠样式表）用于控制网页的视觉表现。基本语法由选择器和声明块组成：

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

• 选择器：指定样式应用的HTML元素（如 p、.class、#id）。
• 声明块：包含一组属性-值对（如 color: red;）。

常用CSS属性

1. 文本样式

   font-family: Arial, sans-serif; /* 字体 */
   font-size: 16px;               /* 字号 */
   color: #333;                   /* 文字颜色 */
   text-align: center;            /* 对齐方式 */

2. 盒模型

   width: 200px;                  /* 宽度 */
   padding: 10px;                 /* 内边距 */
   margin: 20px;                  /* 外边距 */
   border: 1px solid #ccc;        /* 边框 */

3. 背景与颜色

   

   background-color: #f0f0f0;     /* 背景色 */
   background-image: url('image.jpg'); /* 背景图 */
   background-repeat: no-repeat;  /* 禁止重复 */

4. 布局属性

   display: flex;                 /* 弹性布局 */
   position: absolute;            /* 定位方式 */
   float: left;                   /* 浮动 */

CSS 引入方式

1. 内联样式（直接写在HTML标签内）

   <p style="color: blue;">文本</p>

2. 内部样式表（嵌入HTML的<style>标签）

   

   <style>
     p { color: red; }
   </style>

3. 外部样式表（通过.css文件引入，推荐）

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

CSS 选择器优先级

优先级从高到低：

1. !important（强制优先级）

   color: red !important;

2. 内联样式（权重1000）
3. ID选择器（如 #header，权重100）
4. 类/伪类选择器（如 .button，权重10）
5. 元素选择器（如 p，权重1）

响应式设计

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

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

调试技巧

• 浏览器开发者工具（F12）检查元素样式。
• 使用 border: 1px solid red; 临时高亮元素边界。

通过系统学习以上内容，可快速掌握CSS在DW（Dreamweaver）或任何网页开发环境中的应用。