本科网页设计与制作实例教程978 7 307 10379 5 教学全套课件资源包02 教案第8章 在网页中应用CSS样式.docx

《本科网页设计与制作实例教程978 7 307 10379 5 教学全套课件资源包02 教案第8章 在网页中应用CSS样式.docx》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第8章在网页中应用CSS样式一、教学目标CSS（CascadingStyleSheets），中文名称是“层叠样式表”，简称样式表。CSS样式可以精确地控制页面中每个元素的字体样式、背景、排列方式、区域尺寸和边框等；CSS样式还能够简化网页代码格式，使得下载显示的速度加快。二、课时分配本项目共5个小节，安排10课时。三、教学重点本章主要学习了CSS样式在网页中的应用。CSS样式的定义既美化网页又方便用户对网站后期的更新。四、教学难点掌握设置CSS样式是必不可少的。五、教学内容8.1CSS样式简介8.1.1CSS样式表的语法结构样式表由选择符和样式两部分组成，用来告诉浏览器

2、一个网页文件如何显示。其中，选择符用来设置规则的对象，通常是HTML的元素，如〈body〉、〈img〉等；样式用来设置选择符的属性，属性可以有多个，中间用“；”隔开。格式为选择符{属性1：值1；属性2：值2；…}该规则用来设置〈p〉和〈/p〉之间字体的颜色和大小。8.1.2CSS选择符选择符有CLASS、标签和ID选择符3种。定义格式如下：标签名.CLASS值{属性1：值1；属性2：值2；…}标签名{属性1：值1；属性2：值2；…}#ID值{属性1：值1；属性2：值2；…}8.1.3CSS的位置CSS样式表可以嵌入HTML的标签中，以style属性值的方式定义，称为内联

3、样式表；也可以以选择符样式表形式置于〈style〉和〈./style〉中，然后置于〈head〉和〈/head〉中，称为文档级样式表。除此之外，CSS样式表还可以保存为一个扩展名为.css的文件，然后被多个网页调用，称为外部样式表。8.1.4CSS的优先权当对同一个HTML文件应用多个CSS样式时，样式间可能发生冲突，不能按照预期的效果显示。浏览器显示CSS样式的原则有以下几项：（1）若在同一个类型的样式表中发生冲突，则按最后定义的样式来显示。（2）若在不同类型的样式表中发生冲突，则按内联样式表、文档级样式表、外部样式表的优先顺序显示。（3）若HTML样式与CSS样式存在

4、冲突，则优先应用CSS样式。8.1.5CSS常用属性字体属性用于设置文字的显示效果，常用属性见下表。CSS的常用属性8.2创建CSS样式8.2.1执行菜单命令创建样式表在Dreamweaver中执行菜单命令创建样式表的操作步骤如下。（1）执行“窗口”→“CSS样式”菜单命令，打开“CSS样式”面板，然后执行“文本”→“CSS样式”→“新建”菜单命令。“CSS样式”面板（2）在打开的“新建CSS规则”对话框的“选择器类型”中选择“类”单选按钮，在“名称”文本框中输入自定义样式表名称。（3）在“定义在”选项中，可以选择新建样式表的作用类型，是独立的“新建样式表文件”，还是只

5、对当前网页效果设置起作用的“仅对该文档”，然后单击“确定”按钮。“新建CSS规则”对话框（4）在打开的“.style1的CSS规则定义”对话框中进行各选项的设置后，单击“确定”按钮。设置各选项（5）在“CSS样式”面板中可以看到新创建好的样式表。创建好的样式表8.2.2使用“CSS样式”面板创建样式表在Dreamweaver中使用“CSS样式”面板创建样式表的操作步骤如下。（1）执行“窗口”→“CSS样式”菜单命令，打开“CSS样式”面板，然后单击“新建CSS规则”按钮。（2）在打开的“新建CSS规则”对话框的“选择器类型”中选择“类”单选按钮，在“名称”文本框中输入自

6、定义样式表名称。（3）在“定义在”选项中，可以选择新建样式表的作用类型，是独立的“新建样式表文件”，还是只对当前网页效果设置起作用的“仅对该文档”，然后单击“确定”按钮。（4）在打开的“.style1的CSS规则定义”对话框中进行各选项的设置后，单击“确定”按钮。（5）在“CSS样式”面板中可以看到新创建好的样式表。8.3设置CSS样式8.3.1设置类型在“类型”栏中，可以设置字体、字体大小、字体颜色、行高等内容。CSS样式表中“类型”样式的设置操作如下。（1）执行“文本”→“CSS样式”→“新建”菜单命令，打开“新建CSS规则”对话框，在其中新建一个CSS规则。（2）

7、设置好新建CSS样式表的规则属性后，单击“确定”按钮，打开新建CSS样式表的规则定义设置对话框。CSS规则定义设置对话框（3）选择需要的选项进行设置，例如在“字体”中选择“宋体”，字体大小为12像素，行高为1.5倍行高，修饰为“无”，颜色为“#666666”。（4）单击“确定”按钮，即可完成“类型”的设置。8.3.2设置背景在“背景”栏中，可以设置背景颜色、背景图像、背景图像的显示方式等内容。CSS样式表中“背景”样式的设置操作如下。（1）执行“文本”→“CSS样式”→“新建”菜单命令，打开“新建CSS规则”对话框，在其中新建一个CSS规