项目5使用CSS控制网元素.pptVIP

※任务实施任务1使用CSS控制页面、段落、文本的布局3．选择“区块”选项，设置文字缩进为“30像素”。如右图所示。四．设置列表样式*※任务实施任务1使用CSS控制页面、段落、文本的布局4．选择“列表”选项，设置项目符号图像为“images/dot.gif”，位置为“外”。如右图所示。四．设置列表样式※任务实施任务1使用CSS控制页面、段落、文本的布局5．单击“确定”按钮完成段落的CSS设置。四．设置列表样式6．选中网页“栏目导航”中的列表（在“标签选择器”中单击ul标记），在“属性”面板中设置其样式为“.list”。任务1使用CSS控制页面、段落、文本的布局列表样式应用前后的效果是明显不同的，如下图所示。没有使用.list样式的效果使用.list样式后的效果任务2使用CSS控制表格元素的外观任务分析本任务我们将使用CSS对“栏目导航”和“联系方式”两个区域进一步进行美化。设置文本颜色为“白色”，对这行标题使用列表样式，并且用“images\title01.jpg”图片作单元格的背景。※任务实施任务2使用CSS控制表格元素的外观1．打开站点example中的company.html文件。2．在CSS样式面板中单击“新建CSS规则”按钮，在打开的“新建CSS规则”对话框中，设置“选择器类型”为“类”；在“标签”中输入“.tab_title”；在“定义在”选项中选择“仅对该文档”。单击“确定”按钮。3．选择“类型”选项，设置文本字体为“宋体”，大小为“12像素”，行高为“1.5倍行高”，粗细为“粗体”，颜色为“#FFFFFF”。1．打开站点example中的company.html文件。2．在CSS样式面板中单击“新建CSS规则”按钮，在打开的“新建CSS规则”对话框中，设置“选择器类型”为“类”；在“标签”中输入“.tab_title”；在“定义在”选项中选择“仅对该文档”。单击“确定”按钮。任务实施任务2使用CSS控制表格元素的外观选择“类型”选项，设置背景图像为“images/title01.jpg”，如右图所示。任务实施任务2使用CSS控制表格元素的外观选择“列表”选项，设置背景图像为“images/dot1.jpg”，位置为“外”，如右图所示。※任务实施任务2使用CSS控制表格元素的外观6．通过“标签选择器”选中“栏目导航”所在的单元格，在“属性”面板中设置样式为“tab_title”。7．同样的方法设置“联系方式”单元格样式。任务2使用CSS控制表格元素的外观网页的浏览效果任务分析本任务要为company.html网页的导航菜单及各板块建立超链接。并为超链接设置美观的CSS样式，存储为外部样式表，不仅可将样式作用于当前网页，也可供其他网页所调用。任务3使用CSS设置超链接属性※相关知识任务3使用CSS设置超链接属性在“新建CSS规则”对话框中选择“高级”，则在选择器的下拉列表中可以看到这四种超链接样式规则。如右图所示。超链接有四种显示状态，含义如下：a:link——超链接默认状态；a:visited——已访问过的超链接状态；a:hover——鼠标指向的超链接状态；a:active——鼠标正在点击的超链接状态。一．利用CSS设置超链接的四种状态※相关知识任务3使用CSS设置超链接属性如果网页不同区块的内容超链接样式要求不同，则可以在“新建CSS规则”对话框中将超链接样式名前加上该区块元素的ID名或者类名，即可设置出专门针对某些区块或某些标记的超链接样式。这样就能在同一个网页中制作出不同的超链接样式。二．将网页中不同位置的超链接设置成不同的样式※任务实施任务3使用CSS设置超链接属性一．建立超链接的四种状态CSS样式1．打开站点example中的company.html文件。2．在CSS样式面板中单击“新建CSS规则按钮”，打开“新建CSS规则”对话框。在“选择器类型”选项中选择“高级”，在“选择器”选项中选择“a:link”，在“定义在”选项中选择“新建样式表文件”。设置完毕后，单击“确定”按钮。*※任务实施任务3使用CSS设置超链接属性一．建立超链接的四种状态CSS样式3．弹出“保存样式表文件为”对话框。如右图所示。输入样式表文件名为“a_css.css”，保存位置是站点文件夹