文档介绍：第8章使用CSS样式表
教学提示和教学目标
CSS样式表
定义样式表属性
教学提示和教学目标
教学提示:CSS在当前的网页设计中已经成为不可缺少的技术,对于网页设计者来说CSS是一个非常灵活的工具,S无需把繁杂的样式定义编写在文档结构中。CSS样式表的主要优点是提供方便的更新功能,在更新CSS样式时,使用该样式的网站所有网页内容都自动更新应用新样式。
教学目标:
掌握创建CSS样式
掌握使用CSS编辑器设置CSS属性
掌握自定义CSS样式
掌握链接外部现有CSS样式文件
CSS样式表
CSS层叠样式表是一系列格式设置规则,它控制网页内容的外观,使用CSS设置页面格式时,将内容与表现形式分开,页面内容(即HTML代码)驻留在HTML文件自身中,而用于定义内容表现形式的CSS规则驻留在另一个文件(外部样式表)或HTML文档的另一部分(通常为文件头部分)中,使用CSS可以灵活地控制具体的页面外观,从精确的布局定位到特定的字体样式。
关于CSS样式表
使用【CSS样式】面板
创建新的CSS样式
应用自定义CSS样式
创建和链接到外部CSS样式表
关于CSS样式表
CSS允许控制HTML无法独自控制的许多属性,如可以为选定的文本指定不同的字体、大小和单位(像素、磅值等),通过使用CSS以像素为单位设置字体大小,还可以确保在多个浏览器中以更一致的方式显示页面外观。
除设置文本格式外,还可以使用CSS控制Web页面中块级别元素的格式和定位。如设置块级元素的边距、边框以及其他文本周围的浮动文本等。
1. CSS规则
2. Dreamweaver中CSS样式的类型
3. CSS的插入位置
使用【CSS样式】面板
在Dreamweaver中,选择【窗口】|【CSS样式】命令,打开【CSS样式】面板,或按Shift+F11组合键,打开【CSS样式】面板,。
在【CSS样式】面板的底部排列有几个按钮,分别如下。
【附加样式表】:在HTML文档中链接一个外部CSS文件。
【新建CSS样式】:创建新的CSS样式文件。
【编辑样式表】:编辑原有的CSS规则。
【删除CSS样式】:删除选中已有的CSS规则
创建新的CSS样式
在Dreamweaver中,可以创建自己的CSS样式来自动格式化HTML标签和网页文字。
在【新建CSS规则】对话框中可以进行如下设置。
【名称】:设置新建的样式表的名称。
【选择器类型】:定义样式类型,并将其运用到特定的部分。选择【类】,要在【名称】的下拉列表框中输入自定义样式的名称,其名称可以是字母和数字的组合,如果没有输入符号“.”,Dreamweaver 8会自动输入。选择【标签】,需要在【标签】后的下拉列表框中选择一个HTML标签,也可以直接在【标签】后的下拉列表框中输入这个标签。选择【高级】,需要在【选择器】后的下拉列表中选择一个选择器的类型,也可以在【选择器】后的下拉列表框中输入一个选择器类型。
【定义在】:用来设置新建的CSS语句的位置。CSS样式按照使用方法可以分为内部样式和外部样式,如果想把CSS规则反应用于当前网页内部,勾选【仅对该文档】单选按钮。
应用自定义CSS样式
应用自定义CSS样式的具体操作步骤如下。
(1) 打开网页文档。
(2) 选择【窗口】|【CSS样式】命令,打开【CSS样式】面板。
(3) 在【CSS样式】面板中单击鼠标的右键,在弹出的菜单中选择【新建】选项。
(4) 弹出【新建CSS规则】对话框,在对话框中【选择器类型】设置为【类】,【名称】,【定义在】设置为【仅对该文档】。
(5) 单击【确定】按钮,弹出【.zt的CSS规则定义】对话框,在对话框中将【字体】设置为【宋体】,【大小】设置为12像素,【样式】设置为【正常】,【颜色】设置为#000000。
(6) 单击【确定】按钮,在【CSS样式】面板中可以看到新建的样式。
(7) 选中需要套用样式的文字,S规则名上单击鼠标的右键,在弹出的菜单中选择【套用】命令。
(8) 选择命令后,文字自动套用样式,。
(9) 保存文档,按F12键在浏览器中预览效果,。
套用样式预览效果
创建和链接到外部CSS样式表
1. S样式表
(1) 选择【窗口】|【CSS样式】命令,打开【CSS样式】面板。
(2) 在【CSS样式】面板中单击【新建CSS规则】按钮,弹出【新建CSS规则】对话框,在对话框中【选择器类型】设置为【类】,【名称】,【定义在】设置为【新建样式表文件】。
(3) 单