TP05 CSS美化网页元素.pptx

第五章CSS美化网页元素回顾与作业点评描述CSS的基本语法结构，并举例说明其构成。CSS选择器有哪几种，并举例说明。CSS的复合选择器有哪几种，并说明各自的特点。提问/39本章任务/39制作百度音乐标签页面制作开心庄园页面制作网站新闻信息展示页面制作购物网站商品分类页面制作畅销书排行榜页面本章目标会使用CSS设置字体样式 会使用CSS设置文本样式会使用CSS设置图片对齐方式会使用CSS设置超链接样式会使用CSS设置鼠标外观会使用CSS设置背景样式会使用CSS设置列表样式/39为什么使用CSS有效的传递页面信息使用CSS美化过的页面文本，使页面漂亮、美观，吸引用户可以很好的突出页面的主题内容，使用户第一眼可以看到页面主要内容具有良好的用户体验/39span标签span标签 的作用 span在行内定义一个区域，也就是一行内可以被span划分成好几个区域，从而实现某种特定效果示例p享受span class=“show”“北财”/span教育服务/pp在北财，有一群人默默支持你成就 span id=dreamIT梦想/span/pp class=“bird”选择span北财/span，成就你的梦想/p演示示例1：span标签的应用/39字体样式属性名含义举例font-family设置字体类型font-family:隶书;font-size设置字体大小font-size:12px;font-style设置字体风格font-style:italic; font-weight设置字体的粗细font-weight:bold;font在一个声明中设置所有字体属性font:italic bold 36px 宋体;/39字体类型font-family属性p{font-family:Verdana,楷体;}示例body{font-family: Times,Times New Roman, 楷体;}演示示例2：字体类型/39字体大小font-size属性单位：px（像素）in、cm、mm、pt、pc示例h1{font-size:24px;}h2{font-size:16px;}h3{font-size:5mm;}p{font-size:10in;}span{font-size:12pt;}strong{font-size:13pc;}/39字体风格font-style属性normal、italic和oblique斜体inherit:继承 normal：正常 oblique：倾斜的正常字体演示示例3：字体风格/39字体的粗细font-weight属性正常粗细值说明normal默认值，定义标准的字体。bold粗体字体。lighter更细的字体。100、200、300、400、500、600、700、800、900定义由细到粗的字体。400等同于normal，700等同于bold。演示示例4：字体的粗细/39字体属性font属性字体属性的顺序：字体风格→字体粗细→字体大小→字体类型示例p span{font:oblique bold 12px 楷体;}/39文本样式文本属性属性含义举例color设置文本颜色color:#00C;text-align设置元素水平对齐方式text-align:right;text-indent设置首行文本的缩进text-indent:20px;line-height设置文本的行高line-height:25px;text-decoration设置文本的装饰text-decoration:underline;/39文本颜色color属性十六进制方法表示颜色蓝色字体color:#FFFFFF;color:#000000;color:FF0000;color:#A983D8;color:#95F141;color:#339966;color:#EEFF66;6位颜色值相邻数字两两相同时，可两两缩写为1位color:#396;color:#EF6;演示示例5：文本颜色/39排版文本段落居中显示居右显示水平对齐方式text-align属性首行缩进text-indent：em或px行高line-height：px值说明left把文本排列到左边。默认值：由浏览器决定right把文本排列到右边center把文本排列到中间justify实现两端对齐文本效果首行缩进设置行高演示示例6：排版文本段落/39文本修饰和垂直对齐文本装饰text-decoration属性垂直对齐方式vertical-align属性：middle、top、bottom值说明none默认值，定义的标准文本。underline设置文本的下划线。overline设置文本的上划线。line-through设置文本的删除线。blink设置文本闪烁。此值只在firefox浏览器中有效