第5章 css样式和div标签

《第5章 css样式和div标签》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、性值。第5章CSS样式和Div标签5.1【案例21】“中国名胜简介”网页相关知识1．“CSS样式”面板“CSS样式”面板也叫CSS样式表编辑器，空的“CSS样式”面板如图5-1-12所示，定义了内部CSS样式后的“CSS样式”面板如图5-1-7所示。定义了内部和外部CSS样式后的“CSS样式”面板如图5-1-11所示。其中各选项的作用如下：（1）“所有规则”列表框：显示所有样式表的名称和外部CSS样式文件的名称，如图5-1-12和图5-1-13所示。图5-1-12内的“未定义样式”选项表示没有定义CSS样式。（2）“属性”列表框：

2、用来显示选中的CSS样式的属性和属性值，单击“添加属性”超链接，会在“添加属性”超链接处出现一个下拉列表框，该列表框中了出了所有相关的属性名称，选择其中一个属性，即可设置该属性的相应值。单击属性值，即可进入该属性值的编辑状态，也可以修改该属（3）“显示类别视图”按钮（4）“显示列表视图”按钮：单击该按钮后，可以分类显示选中的CSS样式的属性和属性值。：单击该按钮后，可以按英文字母的顺序显示选中的CSS样式的属性和属性值。图5-1-12“CSS样式”面板图5-1-13“CSS样式”面板（5）“只显示设置属性”按钮：单击该按钮后，只显

3、示已经设置过的CSS样式的属性和属性值。（6）“附加样式表”按钮：单击该按钮后，可以弹出“链接外部样式表”对话框，如图5-1-14所示。再单击“浏览”按钮，可弹出“选择样式表文件”对话框，从中可以选择要链接或导入外部样式表（文件的扩展名为.CSS）。在“链接外部样式表”对话框内的“媒体”下拉列表框中可以选择媒体类型。单击“范例样式表”超链接，可以弹出“范例样式表”对话框，如图5-1-15所示。该对话框给出一些样式表范例，并给出与它们相应的文件名称和路径，可供用户使用。图5-1-14“链接外部样式表”对话框图5-1-15“范例样式表

4、”对话框（7）“新建CSS规则”按钮：单击该按钮，可以弹出一个“新建CSS规则”对话框。（8）“编辑样式表”按钮：在“CSS样式”面板中选中一种CSS样式名称，单击该按钮，可弹出相应的“CSS规则定义”对话框，可以对CSS样式表进行编辑。（9）“删除CSS样式”按钮：单击该按钮，将删除选中的CSS样式删除。2．“新建CSS规则”对话框中其他各选项的含义、“新建CSS规则”对话框如图5-1-8所示，其中各选项的作用如下：（1）“类”单选按钮：选中该单选按钮后，可以应用于任何标签，定义CSS样式。（2）“标签”单选按钮：选中该单选按钮

5、后，下边的“名称”下拉列表框将变为“标签”下拉列表框，其中提供了各种HTML语言的标记。用户可以对HTML标记重新定制，并改变它们的属性。（3）“高级”单选按钮：选中该单选按钮后，下边的“名称”下拉列表框将变为“选择器”下拉列表框。“选择器”下拉列表框有四个选项，都是针对链接字的，分别是“a:link”（一般链接）、“a:visited”（访问过的链接）“a:hover”（当前的链接）和“a:active”（被激活的链接）。用户可以设置它们的属性，使链接字在各种状态下表现不同的特性。（4）“定义在”选项组：用来确定创建CSS样式的

6、位置。选中第一个单选按钮，则创建外部CSS；选中“仅对该文档”单选按钮，则创建内部CSS，并定义在当前文档中。创建外部CSS时，如果在下拉列表框中选择“（新建样式表文件）”选项，则新建一个CSS样式表文件（扩展名为“.css”）；如果在下拉列表框中选择一个已经创建的CSS样式文件（该下拉列表框内会有它的名称），则定义在所选择的CSS样式文件内。3．应用CSS样式用户可将定义的CSS样式应用于网页中的文本、图像、Flash等对象。具体方法如下：（1）利用“CSS样式”面板：选择要应用CSS样式的对象，可以是文本、图像、Flash等，

7、右击“CSS样式”面板中相应的样式名称，单击快捷菜单中的“套用”命令。（2）利用“属性”栏：利用“属性”栏将CSS样式应用于网页中对象的方法如下：①选择要应用CSS样式的文本对象，在其“属性”栏的“样式”下拉列表框中选择需要的CSS样式名称，即可将选择的CSS样式应用于选择的文本对象。②选择要应用CSS样式的图像或Flash等对象，在其“属性”栏的“类”下拉列表框中选择需要的CSS样式名称，即可将选择的CSS样式应用于选择的图像或Flash等对象。ll5.2【案例22】“特效课程表”网页相关知识1．定义CSS的背景属性选择图5-2

8、-4所示的“CSS规则定义”对话框内左边“分类”列表框内的“背景”选项，此时的“CSS规则定义”对话框内的“背景”栏如图5-2-5所示。各选项的作用如下：（1）“背景颜色”按钮与文本框：用来给选中的对象添加背景色。（2）“背景图像”下拉列表框与“浏