中文Dreamweaver CS5网页设计 沈大林 张伦_ 第5章 CSS样式和DIV标签

《中文Dreamweaver CS5网页设计 沈大林 张伦_ 第5章 CSS样式和DIV标签》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、71第5章CSS样式和DIV标签第5.1节CSS样式在设计网页时，常常需要对网页中各种对象的属性进行设置，通常网站中众多网页内会有许多相同属性的对象，例如，相同颜色、大小、字体的文字，同样粗细的图像边框等。如果对这些相同的元素进行逐一的属性设置，会大大增加工作量，而且修改也很繁琐。为了简化这项工作，就需要使用CSS样式表，它可以对页面布局、背景、字体大小、颜色、表格等属性进行统一的设置，然后再应用于页面各个相应的对象。CSS（Cascading Style Sheet，即层叠样式表）技术是一种格式化网页的标准方式，它通过设置CSS属性使网页元素对象获得不同的效果。在定义了一个CSS样式后，就

2、可以将它应用于网页内不同的元素，使这些元素对象具有相同的属性，在修改CSS样式后，所有应用了该CSS样式的网页元素的属性会随之一同被修改。另外，相对于HTML标记符而言，CSS样式属性提供了更多的格式设置功能。例如，可以通过CSS样式属性的设置将链接文字的下划线去掉，给文字添加阴影，为列表指定图像作为项目符号等。由于CSS具有上述这些优点，所以它已经被广泛用于网页的设计中。5.1.1创建和应用CSS样式1．了解“CSS样式”面板单击“窗口”→“CSS样式”命令，调出“CSS样式”面板，单击按下“全部”按钮后的“CSS样式”面板如图511所示，单击按下“当前”按钮后的“CSS样式”面板如图51

3、2所示。“CSS样式”面板也叫CSS样式表编辑器。（1）窗格：在“全部”模式下，“CSS样式”面板显示“所有规则”窗格和“属性”窗格。可以通过拖曳窗格之间的边框调整任意窗格的大小，通过拖曳分隔线调整列的大小。“所有规则”窗格显示当前文档中定义的规则（样式表的名称）以及附加到当前文档的样式表中定义的所有规则（外部CSS样式文件的名称）。该窗格内如果显示“未定义样式”选项，则表示没有定义CSS样式。使用“属性”窗格可以编辑“所有规则”窗格中任何所选规则的CSS属性。单击“添加属性”热字，会在“添加属性”热字处出现一个下拉列表框，该下拉列表框中列出了所有相关的属性名称，选择其中一个属性，即可设置该

4、属性的相应值。单击属性值，即可进入该属性值的编辑状态，可以修改该属性值。图511 “CSS样式”（全部）面板图512 “CSS样式”（当前）面板在“当前”模式下，“CSS样式”面板显示“所选内容的摘要”窗格、“规则”窗格和“属性”窗格。“所选内容的摘要”窗格内显示文档中当前所选内容的CSS属性；“规则”窗格内显示所选属性的位置（或所选标签的一组层叠的规则，具体取决于您的选择）；“属性”窗格可以编辑“所有规则”窗格中任何所选规则的CSS属性。（2）“显示类别视图”按钮：单击按下该按钮后，可以分类显示选中的CSS样式的属性和属性值。将Dreamweaver支持的CSS属性分为“字体”、“背景”、

5、“区块”、“边框”、“方框”、“列表”、“定位”和“扩展名”8个类别。每个类别的属性都包含在一个列表中，可以单击类别名称旁边的加号(+)按钮展开或折叠它。（3）“显示列表视图”按钮：单击按下该按钮后，可以按英文字母的顺序显示Dreamweaver支持的所有CSS属性和属性值。“设置属性”（蓝色）将出现在列表顶部。（4）“只显示设置属性”按钮：单击按下该按钮后，只显示已经设置过的CSS样式的属性和属性值。“设置属性”视图为默认视图。（5）“附加样式表”按钮：单击它，可以调出一个“链接外部样式表”对话框，如图513所示。再单击“浏览”按钮，可调出“选择样式表文件”对话框，利用该对话框可以选择要链

6、接或导入外部样式表（文件的扩展名为.CSS）。在“链接外部样式表”对话框内的“媒体”下拉列表框中可以选择媒体类型。单击“范例样式表”热字，可以调出“范例样式表”对话框，如图514所示。该对话框给出一些样式表范例，并给出与它们相应的文件名称和路径，可供使用。图513 “链接外部样式表”对话框图514 “范例样式表”对话框（6）“编辑样式表”按钮：在“CSS样式”面板中选中一种CSS样式名称，单击该按钮，可调出相应的“CSS规则定义”对话框，可以对CSS样式表进行编辑。“（7）删除CSS规则”按钮：单击它，可以删除“CSS样式”面板中的选定规则或属性，并从它所应用于的所有元素中删除格式设置。但是

7、，不会删除由该样式引用的类或ID属性。还可以分离（或“取消链接”）附加的CSS样式表。2．调出“新建CSS规则”对话框的3种方法（1）选择“格式”→“CSS样式”→“新建”命令。（2）单击“CSS样式”面板中内右下角的“新建CSS规则”按钮。（3）在“文档”窗口中选择文本，在“属性”（CSS）栏内“目标规则”下拉列表框选中“新CSS规则”选项，然后单击“编辑规则”按钮，或者在其“属性”拦进行属性设置（例如单击