《网页设计基础教程与上机指导(第2版)》第8章：使用CSS样式表课件.ppt

《《网页设计基础教程与上机指导(第2版)》第8章：使用CSS样式表课件.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第8章使用CSS样式表教学提示和教学目标8.1CSS样式表8.2定义样式表属性教学提示和教学目标教学提示：CSS在当前的网页设计中已经成为不可缺少的技术，对于网页设计者来说CSS是一个非常灵活的工具，通过CCS无需把繁杂的样式定义编写在文档结构中。CSS样式表的主要优点是提供方便的更新功能，在更新CSS样式时，使用该样式的网站所有网页内容都自动更新应用新样式。教学目标：掌握创建CSS样式掌握使用CSS编辑器设置CSS属性掌握自定义CSS样式掌握链接外部现有CSS样式文件8.1CSS样式表CSS层叠样式表是一系列格式设置规则，它控制网页内容的外观，使用CSS设置页面格式时，将内容与表现形式

2、分开，页面内容(即HTML代码)驻留在HTML文件自身中，而用于定义内容表现形式的CSS规则驻留在另一个文件(外部样式表)或HTML文档的另一部分(通常为文件头部分)中，使用CSS可以灵活地控制具体的页面外观，从精确的布局定位到特定的字体样式。8.1.1关于CSS样式表8.1.2使用【CSS样式】面板8.1.3创建新的CSS样式8.1.4应用自定义CSS样式8.1.5创建和链接到外部CSS样式表8.1.1关于CSS样式表CSS允许控制HTML无法独自控制的许多属性，如可以为选定的文本指定不同的字体、大小和单位(像素、磅值等)，通过使用CSS以像素为单位设置字体大小，还可以确保在多个浏览器

3、中以更一致的方式显示页面外观。除设置文本格式外，还可以使用CSS控制Web页面中块级别元素的格式和定位。如设置块级元素的边距、边框以及其他文本周围的浮动文本等。1.CSS规则2.Dreamweaver中CSS样式的类型3.CSS的插入位置8.1.2使用【CSS样式】面板在Dreamweaver中，选择【窗口】

4、【CSS样式】命令，打开【CSS样式】面板，或按Shift＋F11组合键，打开【CSS样式】面板，如图8.1所示。在【CSS样式】面板的底部排列有几个按钮，分别如下。【附加样式表】：在HTML文档中链接一个外部CSS文件。【新建CSS样式】：创建新的CSS样式文件。【编辑样式表】：

5、编辑原有的CSS规则。【删除CSS样式】：删除选中已有的CSS规则8.1.3创建新的CSS样式在Dreamweaver中，可以创建自己的CSS样式来自动格式化HTML标签和网页文字。在【新建CSS规则】对话框中可以进行如下设置。【名称】：设置新建的样式表的名称。【选择器类型】：定义样式类型，并将其运用到特定的部分。选择【类】，要在【名称】的下拉列表框中输入自定义样式的名称，其名称可以是字母和数字的组合，如果没有输入符号“.”，Dreamweaver8会自动输入。选择【标签】，需要在【标签】后的下拉列表框中选择一个HTML标签，也可以直接在【标签】后的下拉列表框中输入这个标签。选择【高级】

6、，需要在【选择器】后的下拉列表中选择一个选择器的类型，也可以在【选择器】后的下拉列表框中输入一个选择器类型。【定义在】：用来设置新建的CSS语句的位置。CSS样式按照使用方法可以分为内部样式和外部样式，如果想把CSS规则反应用于当前网页内部，勾选【仅对该文档】单选按钮。8.1.4应用自定义CSS样式应用自定义CSS样式的具体操作步骤如下。(1)打开网页文档。(2)选择【窗口】

7、【CSS样式】命令，打开【CSS样式】面板。(3)在【CSS样式】面板中单击鼠标的右键，在弹出的菜单中选择【新建】选项。(4)弹出【新建CSS规则】对话框，在对话框中【选择器类型】设置为【类】，【名称】文本框中输入

8、.zt，【定义在】设置为【仅对该文档】。(5)单击【确定】按钮，弹出【.zt的CSS规则定义】对话框，在对话框中将【字体】设置为【宋体】，【大小】设置为12像素，【样式】设置为【正常】，【颜色】设置为＃000000。(6)单击【确定】按钮，在【CSS样式】面板中可以看到新建的样式。(7)选中需要套用样式的文字，然后在样式面板的新建CCS规则名上单击鼠标的右键，在弹出的菜单中选择【套用】命令。(8)选择命令后，文字自动套用样式，如图8.13所示。(9)保存文档，按F12键在浏览器中预览效果，如图8.14所示。图8.13套用样式图8.14预览效果8.1.5创建和链接到外部CSS样式表1.创

9、建外部CCS样式表(1)选择【窗口】

10、【CSS样式】命令，打开【CSS样式】面板。(2)在【CSS样式】面板中单击【新建CSS规则】按钮，弹出【新建CSS规则】对话框，在对话框中【选择器类型】设置为【类】，【名称】文本框中输入.ws，【定义在】设置为【新建样式表文件】。(3)单击【确定】按钮，弹出【保存样式表文件为】对话框，在【文件名】文本框中输入样式表文件的名称，并在【相对于】下拉表框中选择【文档】选项。(4)单击【保存】按钮，弹