chapter6利用CSS美化网页.pptxVIP

第6章 利用CSS样式美化网页——制作“服务”页面计算机工程学院　计算机基础教学部学习目标掌握创建样式及应用样式的方法了解CSS选择器的4种类型的区别了解CSS常用属性值的设置了解利用CSS控制网页的3种方法掌握利用外部样式表文件统一网站风格的方法了解利用CSS美化网页的流程深圳职业技术学院 计算机基础教研室.实训项目网页设计师小高围绕“慧衡科技专业服务”这一主题，已经制作好了网页内容，现需要对其进行美化。深圳职业技术学院 计算机基础教研室.项目分析设计思路：（1）在设计页面属性时，采用跟整体网站风格一致的灰蓝色作为背景颜色。（2）页面元素以文本为主，首先设置文本样式，使用不同的颜色区分不同的文本。（3）采用列表制作浅蓝色背景的水平导航条，使用装饰图片环绕在文本左侧。（4）对于子页面“外贸电子商务”和“外贸网站设计”，采用外部样式表文件统一外观。设计页面背景时使用颜色来区分不同的模块，在对文本进行美化时采用不同的字体、颜色及大小突出标题，并使用图像制作文本背景美化网页。深圳职业技术学院 计算机基础教研室.设计目标深圳职业技术学院 计算机基础教研室.预备知识：认识CSS（1）CSS（Cascading Style Sheets），中文翻译为层叠样式表，是用户控制网页样式并允许将样式信息与网页内容分离的一种标记性语言，它是由W3C于1996年12月推出。（2）CSS的主要功能就是定义元素的属性值来控制元素的显示效果。其中包括定义元素的大小、边框、背景、定位等，通过对这些属性设置值来形成一个样式，然后再将样式应用于文档中同一类型的元素，使网页结构内容和表现形式相分离。深圳职业技术学院 计算机基础教研室.预备知识：CSS的语法规则?CSS选择器的类型：（1）标签选择器 h1{ }（2）类选择器 .textfooter { }（3）ID选择器 #table1 { }（4）复合内容选择器 #table1 a{ }深圳职业技术学院 计算机基础教研室.预备知识：CSS的使用方式（1）内联样式: 直接对HTML标签使用style属性，然后将代码直接写在其中。 p style=”color : red” 慧衡科技 /p（2）嵌入式样式表： 嵌入式样式表使用style/style标签将样式嵌入到HTML文件的头部中。（3）外部样式表： 外部样式表是指将CSS写成一个文件，在HTML文件的头部中通过使用link标签将样式表文件链接到此页面中。深圳职业技术学院 计算机基础教研室.制作流程任务5：制作水平导航条任务1：设置网页的页面属性任务4：利用CSS设置超链接样式任务6：创建外部样式表文件任务2：利用CSS美化文本任务3：利用CSS实现图文混排深圳职业技术学院 计算机基础教研室.任务1 ——设置网页的页面属性深圳职业技术学院 计算机基础教研室.STEP1：重新定义HTML标签body打开“CSS样式”面板，新建CSS规则。重新定义body标签的属性值。（1）设置body的背景属性，在“Background-color”文本框中输入“#65768A”。（2）设置body的文本样式，在“Font-size”文本框中输入“12px”。（3）设置body的方框样式，在“Margin”区域中，不勾选“全部相同”，在“Top”文本框中输入“0”。深圳职业技术学院 计算机基础教研室.STEP2：查看body标签的CSS代码深圳职业技术学院 计算机基础教研室.在代码视图下查看CSS代码。任务2 ——利用CSS美化文本深圳职业技术学院 计算机基础教研室.STEP1：重新定义HTML标签h1，h2，p重新定义HTML标签h1的属性值：? 重新定义HTML标签h2的样式： h2{ font-family: 宋体; font-size: 14px; color: #C7D9ED; }? 重新定义HTML标签p的样式： p{line-height: 150%; color: #000; width: 1000px;}深圳职业技术学院 计算机基础教研室.STEP2：新建类样式“.copyright”、“.alignRight”深圳职业技术学院 计算机基础教研室.新建类样式“.copyright”，设置属性值。为页脚文本应用类样式“.copyright”。创建类样式“.alignRight”，并应用到页面中所有的“详细了解”文本所在的段落，属性值如下： .alignRight {text-align: right; }任务3 ——利用CSS实现图文混排深圳职业技术学院 计算机基础教研室.任务4 ——利用CSS设置超链接样式深圳职业技术学院 计算机基础教研室.STEP1：重新定义HTML标签a重新定义HTML标签a，设置链接文本的字体格式及取消下划线。a { font-famil