在Dreamweaver中为div添加CSS样式

在Dreamweaver里给div元素添加CSS样式，是一个直观的过程。掌握这个基本操作后，类似的样式添加方式你也能触类旁通。

下面，我们一步步来拆解。

第一步：插入div元素

首先，你需要在页面里放置一个div。

操作很简单：

• 找到顶部菜单栏的“插入”。
• 在下拉菜单里找到并点击“div”标签。

这样，一个基础的div结构就添加到你的文档里了。

第二步：为div设置ID

接下来，选中这个刚刚插入的div。

在软件下方的属性面板里，你会看到一个“ID”输入框。

这里就是给这个div起“名字”的地方，我们输入“test”作为它的唯一标识符。

记住这个ID，后面会用到。

第三步：新建CSS规则

现在，把目光转向软件右侧。这里通常有一个“CSS样式”面板。

在面板的“全部规则”区域任意位置点击鼠标右键，会弹出一个菜单。

选择“新建CSS规则”。

第四步：设置选择器

这时会弹出一个对话框。关键步骤来了：

• 在“选择器类型”里，选择“ID选择器”。
• 在“选择器名称”一栏中，填入“#test”。

（“#test”就是刚才我们给div起的ID，前面加上#号。）

Dreamweaver通常很智能，在你选择ID选择器后会自动补上#号，手动确认一下就好。

第五步：定义CSS样式

点击“确定”后，就进入了真正的样式定义环节——CSS规则定义界面。

这个界面就像是一个控制面板，你可以在这里为#test这个div定制各种外观。

从左边的分类列表里，你可以依次设置：

• 盒模型参数：比如宽度（width）、高度（height）。
• 边框（border）：样式、颜色、粗细。
• 背景（background-color）：改变div的背景色。
• 内边距（padding）：控制内容与边框之间的距离。

当然，还有更多选项，比如字体、文本、定位等，你可以根据需求慢慢探索。

第六步：应用与修改样式

所有样式设置完毕后，点击右下角的“确定”，这条CSS规则就正式生效了。

你立刻就能在编辑区看到div的外观发生了变化。

如果之后觉得样式需要调整怎么办？很简单。

回到右侧的“CSS样式”面板，在“全部规则”列表里找到你刚才创建的“#test”规则。

右键点击它，选择“编辑规则”，就能再次打开定义界面进行修改。

总结

整个过程就是这样：

1. 插入元素。
2. 赋予ID。
3. 创建对应ID的CSS规则。
4. 定义样式。

这个逻辑是通用的，无论是类选择器还是标签选择器，操作流程都大同小异。

多练习几次，你就会非常熟练了。