TP05CSS美化网页元素

1、CSS美化网页元素第五章回顾与作业点评回顾与作业点评描述描述CSS的基本语法结构，并举例说明其构成。的基本语法结构，并举例说明其构成。CSS选择器有哪几种，并举例说明。选择器有哪几种，并举例说明。CSS的复合选择器有哪几种，并说明各自的特的复合选择器有哪几种，并说明各自的特点。点。提问提问2/39本章任务本章任务制作百度音乐标签页面制作百度音乐标签页面制作开心庄园页面制作开心庄园页面制作网站新闻信息展示页面制作网站新闻信息展示页面制作购物网站商品分类页面制作购物网站商品分类页面制作畅销书排行榜页面制作畅销书排行榜页面3/39本章目标本章目标会使用会使用CSS设置字体样式设置字体样式 会使用会使

2、用CSS设置文本样式设置文本样式会使用会使用CSS设置图片对齐方式设置图片对齐方式会使用会使用CSS设置超链接样式设置超链接样式会使用会使用CSS设置鼠标外观设置鼠标外观会使用会使用CSS设置背景样式设置背景样式会使用会使用CSS设置列表样式设置列表样式4/39为什么使用为什么使用CSS有效的传递页面信息有效的传递页面信息使用使用CSS美化过的页面文本，使页面漂亮、美观，美化过的页面文本，使页面漂亮、美观，吸引用户吸引用户可以很好的突出页面的主题内容，使用户第一眼可以很好的突出页面的主题内容，使用户第一眼可以看到页面主要内容可以看到页面主要内容具有良好的用户体验具有良好的用户体验5/39标签标

3、签标签标签 的作用的作用 在行内定义一个区域，也就是一行内在行内定义一个区域，也就是一行内可以被可以被划分成好几个区域，从而实现划分成好几个区域，从而实现某种特定效果某种特定效果享受享受“北财北财”教育服务教育服务在北财，有一群人默默支持你成就在北财，有一群人默默支持你成就 IT梦想梦想选择选择北财北财，成就你的梦想，成就你的梦想演示示例演示示例1：span标签的应用标签的应用示例示例6/39字体样式字体样式属性名属性名含义含义举例举例font-family设置字体类型设置字体类型font-family:隶书隶书;font-size设置字体大小设置字体大小font-size:12px;font

4、-style设置字体风格设置字体风格font-style:italic; font-weight设置字体的粗细设置字体的粗细font-weight:bold;font在一个声明中设置所有在一个声明中设置所有字体属性字体属性font:italic bold 36px 宋体宋体;7/39字体类型字体类型font-family属性属性pfont-family:Verdana,楷体楷体;演示演示示例示例2：字体类型：字体类型bodyfont-family: Times,Times New Roman, 楷体楷体;示例示例8/39font-size属性属性单位：单位：px（像素）（像素）in、cm、mm

5、、pt、pc字体大小字体大小h1font-size:24px;h2font-size:16px;h3font-size:5mm;pfont-size:10in;spanfont-size:12pt;strongfont-size:13pc;示例示例9/39字体风格字体风格font-style属性属性normal、italic和和oblique斜体斜体正常字体正常字体演示演示示例示例3：字体风格：字体风格10/39inherit:继承继承 normal：正常：正常 oblique：倾斜的字体的粗细字体的粗细font-weight属性属性值值说明说明normal默认值，定义标准的字体。默认值，定义

6、标准的字体。bold粗体字体。粗体字体。lighter更细的字体。更细的字体。100、200、300、400、500、600、700、800、900定义由细到粗的字体。定义由细到粗的字体。400等同于等同于normal，700等同于等同于bold。正常粗细正常粗细演示演示示例示例4：字体的粗细：字体的粗细11/39字体属性字体属性font属性属性字体属性的顺序：字体风格字体属性的顺序：字体风格字体粗细字体粗细字体大小字体大小字体类型字体类型p spanfont:oblique bold 12px 楷体楷体;示例示例12/39文本样式文本样式文本属性文本属性属性属性含义含义举例举例color设置

7、文本颜色设置文本颜色color:#00C;text-align设置元素水平对齐方式设置元素水平对齐方式text-align:right;text-indent设置首行文本的缩进设置首行文本的缩进text-indent:20px;line-height设置文本的行高设置文本的行高line-height:25px;text-decoration 设置文本的装饰设置文本的装饰text-decoration:underline;13/39文本颜色文本颜色color属性属性十六进制方法表示颜色十六进制方法表示颜色color:#FFFFFF;color:#000000;color:FF0000;color

8、:#A983D8;color:#95F141;color:#339966;color:#EEFF66;color:#396;color:#EF6;6位颜色值相邻数位颜色值相邻数字两两相同时，可字两两相同时，可两两缩写为两两缩写为1位位演示演示示例示例5：文本颜色：文本颜色蓝色字体蓝色字体14/39排版文本段落排版文本段落水平对齐方式水平对齐方式text-align属性属性值值说明说明left把文本排列到左边。默认值：由浏览器决定把文本排列到左边。默认值：由浏览器决定right把文本排列到右边把文本排列到右边center把文本排列到中间把文本排列到中间justify实现两端对齐文本效果实现两端对

9、齐文本效果首行缩进首行缩进text-indent：em或或px行高行高line-height：px居中显示居中显示居右显示居右显示首行缩进首行缩进设置行高设置行高演示演示示例示例6：排版文本段落：排版文本段落15/39文本修饰和垂直对齐文本修饰和垂直对齐文本装饰文本装饰text-decoration属性属性垂直对齐方式垂直对齐方式vertical-align属性：属性：middle、top、bottom值值说明说明none默认值，定义的标准文本。默认值，定义的标准文本。underline设置文本的下划线。设置文本的下划线。overline设置文本的上划线。设置文本的上划线。line-throu

10、gh设置文本的删除线。设置文本的删除线。blink设置文本闪烁。此值只在设置文本闪烁。此值只在firefox浏览器中有效，浏览器中有效，在在IE中无效。中无效。演示演示示例示例7：垂直对齐方式：垂直对齐方式16/39学员操作学员操作制作百度音乐标签页面制作百度音乐标签页面训练要点训练要点使用使用Dreamweaver制作网页制作网页使用字体属性设置字体风格、大小使用字体属性设置字体风格、大小使用文本属性设置字体颜色、行距使用文本属性设置字体颜色、行距使用使用标签标签需求说明需求说明讲解需求说明讲解需求说明指导指导18px、楷体、加粗显示、楷体、加粗显示12px，行高，行高20px英文字体：英文

11、字体：“Times New Roman”或或“Times”中文字体：宋体中文字体：宋体完成时间完成时间：10分钟分钟实现思路实现思路使用使用color属性设置字体颜色属性设置字体颜色使用使用font设置字体类型和字体大小，但是顺序为字设置字体类型和字体大小，但是顺序为字体大小体大小字体类型，字体类型要先设置英文字体，字体类型，字体类型要先设置英文字体，再设置中文字体；或者使用再设置中文字体；或者使用font-size设置字体大设置字体大小，使用小，使用font-family设置字体类型。设置字体类型。歌手分类字母序号放在标签歌手分类字母序号放在标签，使用，使用font-weight设置字体加粗

12、。设置字体加粗。CSS文件单独放在文件单独放在CSS文件夹下，使用链接式引文件夹下，使用链接式引用用CSS文件。文件。17/39学员操作学员操作制作开心庄园页面制作开心庄园页面需求说明需求说明标题行距标题行距40px，加，加粗显示；粗显示；正文大小正文大小12px，行，行距距20px；图片与文；图片与文本居中对齐；本居中对齐；使用外部样式表创使用外部样式表创建页面样式。建页面样式。完成时间：完成时间：10分钟分钟练习练习18px、字体颜色、字体颜色#9c2f0618/39共性问题集中讲解共性问题集中讲解常见问题及解决办法常见问题及解决办法代码规范问题代码规范问题调试技巧调试技巧19/39超链接

13、伪类超链接伪类访问前，蓝色访问前，蓝色访问后，紫色访问后，紫色图片边超链接图片边超链接后出现边框后出现边框无超链接无超链接伪类样式伪类样式语法语法标签名标签名:伪类名伪类名声明声明;a:hover color:#B46210;text-decoration:underline;20/39使用使用CSS设置超链接设置超链接伪类名称伪类名称含义含义示例示例a:link未单击访问时超链接样式未单击访问时超链接样式a:linkcolor:#9ef5f9;a:visited单击访问后超链接样式单击访问后超链接样式a:visited color:#333;a:hover鼠标悬浮其上的超链接样式鼠标悬浮其上

14、的超链接样式a:hovercolor:#ff7300;a:active鼠标单击未释放的超链接样式鼠标单击未释放的超链接样式a:active color:#999;设置伪类的顺序：设置伪类的顺序：a:link-a:visited-a:hover-a:active图片超链接没有边框图片超链接没有边框黑色，超链接无下划线黑色，超链接无下划线褐色、超接链有下划线褐色、超接链有下划线演示演示示例示例8：超链接样式：超链接样式21/39设置鼠标形状设置鼠标形状值值说明说明图例图例default默认光标默认光标pointer超链接的指针超链接的指针wait指示程序正在忙指示程序正在忙help指示可用的帮助指

15、示可用的帮助text指示文本指示文本crosshair鼠标呈现十字状鼠标呈现十字状CSS设置鼠标形状设置鼠标形状spancursor:pointer;示例示例22/39标签标签DIV元素是用来为HTML文档内大块（block-level）的内容提供结构和背景的元素。DIV的起始标签和结束标签之间的所有内容都是用来构成这一块区域，其中所包含元素的特性由DIV标签的属性来控制，或者是通过使用样式表格式化这个块来进行控制。 DIV标签称为区隔标记。 作用：设定字、画、表格等的摆放位置。用来布局网页中的所有元 素23/39标签标签标签的用法标签的用法网页布局网页布局排版网页内容排版网页内容语法语法网页

16、内容网页内容#header width:200px;height:280px;网页内容网页内容宽宽高高24/39背景样式背景样式25/39背景图像背景图像背景颜色背景颜色网页背景网页背景背景颜色背景颜色background-color背景图像背景图像background-image背景颜色值：十六进制方法表示背景颜色值：十六进制方法表示transparent演示演示示例示例9：背景颜色：背景颜色26/39设置背景图像设置背景图像背景图像背景图像background-image属性属性背景重复方式背景重复方式background-repeat属性属性背景定位背景定位 background-pos

17、ition属性属性background-image:url(图片路径图片路径);repeat：沿水平和垂直两个方向平铺：沿水平和垂直两个方向平铺no-repeat：不平铺，即只显示一次：不平铺，即只显示一次repeat-x：只沿水平方向平铺：只沿水平方向平铺repeat-y：只沿垂直方向平铺：只沿垂直方向平铺值值含义含义Xpos Ypos单位：单位：px，Xpos表示水平位置，表示水平位置，Ypos表示垂直位置表示垂直位置X% Y%使用百分比表示背景的位置使用百分比表示背景的位置X、Y方向关键词方向关键词 水平方向的关键词：水平方向的关键词：left、center、right垂直方向的关键词：

18、垂直方向的关键词：top、center、bottom背景图像背景图像演示演示示例示例10：背景图像：背景图像27/39设置背景设置背景示例示例背景属性背景属性background属性属性.title font-size:18px;font-weight:bold;color:#FFF;text-indent:1em;line-height:35px;background:#C00 url(./image/arrow-down.gif) 205px 10px no-repeat;背景样式简写背景样式简写背景颜色背景颜色背景图像背景图像背景定位背景定位背景不重复显示背景不重复显示28/39背景样式

19、背景样式29/39背景样式简写效果背景样式简写效果列表样式列表样式2-1list-style-typelist-style-imagelist-style-positionlist-style值值说明说明语法示例语法示例none无标记符号无标记符号list-style-type:none;disc实心圆，默认类型实心圆，默认类型list-style-type:disc;circle空心圆空心圆list-style-type:circle;square实心正方形实心正方形list-style-type:square;decimal数字数字list-style-type:decimal30/39列

20、表样式列表样式2-2list-style-imagelist-style-positioninsideoutsidelist-styleli list-style-image:url(image/arrow-right.gif);list-style-type:circle;li list-style-image:url(image/arrow-right.gif);list-style-type:circle;list-style-position:outside;li list-style:circle outside url(image/arrow-right.gif);示例示例演示演示

21、示例示例11：列表样式：列表样式列表图标效果列表图标效果31/39学员操作学员操作家用电器商品分类页面家用电器商品分类页面需求说明需求说明电器分类无下划线，鼠标悬浮超电器分类无下划线，鼠标悬浮超链接时显示下划线。链接时显示下划线。分类内容超链无下划线，鼠标悬分类内容超链无下划线，鼠标悬浮至超链接时字体颜色为棕红色浮至超链接时字体颜色为棕红色（#F60），显示下划线。），显示下划线。练习练习完成时间：完成时间：10分钟分钟18px、加粗、行距、加粗、行距35、背、背景色景色#0f7cbf，缩进，缩进1字符字符14px、加粗、行距、加粗、行距30px、背景色背景色#e4f1fa、字体颜色、字体颜色

22、#0f7cbf12px、行距、行距20px，字体颜，字体颜色色#66666632/39学员操作学员操作畅销书排行榜页面畅销书排行榜页面2-1训练要点训练要点设置页面的背景属性设置页面的背景属性使用使用CSS设置超链接样式设置超链接样式使用使用CSS设置列表样式设置列表样式需求说明需求说明使用无序列表制作畅销书排使用无序列表制作畅销书排行榜页面行榜页面超链接无下划线，鼠标悬浮超链接无下划线，鼠标悬浮至超链接时显示下划线至超链接时显示下划线教员讲解需求教员讲解需求指导指导16px、缩进、缩进1字符，行距字符，行距30px，绿色背景，绿色背景#518700背景图像背景图像浅绿色背景浅绿色背景#f3f4df、12px，行，行距距28px，文本颜