5CSS美化网页元素

CSS美化网页元素第五章回顾与作业点评描述CSS的基本语法结构，并举例说明其构成。CSS选择器有哪几种，并举例说明。CSS的复合选择器有哪几种，并说明各自的特点。提问预习检查在某一段文本中突出显示某几个字，以粗体、红色、大字号显示，通常使用（）标签。在CSS中，设置文本行高使用（）属性。在CSS中设置背景颜色为透明的值为（）。提问transparentline-heightspan本章目标会使用CSS设置字体样式会使用CSS设置文本样式会使用CSS设置图片对齐方式会使用CSS设置超链接样式会使用CSS设置鼠标外观会使用CSS设置背景样式会使用CSS设置列表样式span标签span标签的作用p享受spanclass=show“东软”/span教育服务/pp在东软睿道，有一群人默默支持你成就spanid=dreamIT梦想/span/ppclass=bird选择span东软睿道/span，成就你的梦想/p示例字体样式属性名含义举例font-family设置字体类型font-family:隶书;font-size设置字体大小font-size:12px;font-style设置字体风格font-style:italic;font-weight设置字体的粗细font-weight:bold;font在一个声明中设置所有字体属性font:italicbold36px宋体;字体类型font-family属性p{font-family:Verdana,楷体;}body{font-family:Times,TimesNewRoman,楷体;}示例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;}示例字体风格font-style属性normal、italic和oblique斜体正常字体字体的粗细font-weight属性值说明normal默认值，定义标准的字体。bold粗体字体。bolder更粗的字体。lighter更细的字体。400、700定义由细到粗的字体。400等同于normal，700等同于bold。正常粗细字体加粗字体属性font属性字体属性的顺序：字体风格→字体粗细→字体大小→字体类型pspan{font:obliquebold12px楷体;}示例文本样式文本属性属性含义举例color设置文本颜色color:#00C;text-align设置元素水平对齐方式text-align:right;text-indent设置首行文本的缩进text-indent:20px;line-height设置文本的行高line-height:25px;text-decoration设置文本的装饰text-decoration:underline;文本颜色color属性十六进制方法表示颜色color:#FFFFFF;color:#000000;color:FF0000;color:#A983D8;color:#95F141;color:#339966;color:#EEFF66;color:#396;color:#EF6;6位颜色值相邻数字两两相同时，可两两缩写为1位蓝色字体排版文本段落水平对齐方式text-align属性值说明left把文本排列到左边。默认值：由浏览器决定right把文本排列到右边center把文本排列到中间justify实现两端对齐文本效果首行缩进text-indent：em或px行高line-height：px居中显示居右显示首行缩进设置行高文本修饰和垂直对齐文本装饰text-decoration属性垂直对齐方式vertical-align属性：middle、top、bottom值说明none默认值，定义的标准文本。underline设置文本的下划线。overline设置文本的上划线。line-through设置文本的删除线。blink设置文本闪烁。此值只在firefox浏览器中有效，在IE中无效。超链接伪类访问前，蓝色访问后，紫色图片边超链接后出现边框无超链接伪类样式语法标签名:伪类名{声明;}a:hover{color:#B46210;text-decoration:underline;}使用CSS设置超链接设置伪类的顺序：a:link-a:visited-a:hover-a:active图片超链接没有边框黑色，超链接无下划线褐色、超接链有下划线设置鼠标形状CSS设置鼠标形状span{cursor:pointer;}示例背景样式背景图像背景颜色背景图像背景颜色div标签div标签的用法网页布局排版网页内容语法div网页内容…/div#header{width:200px;height:280px;}……divid=header网页内容…/div宽高网页背景背景颜色background-color背景图像background-image背景颜色值：十六进制方法表示transparent设置背景图像背景图像background-image属性背景重复方式background-repeat属性背景定位background-position属性background-image:url(图片路径);repeat：沿水平和垂直两个方向平铺no-repeat：不平铺，即只显示一次repeat-x：只沿水平方向平铺repeat-y：只沿垂直方向平铺背景图像设置背景示例背景属性background属性.title{font-size:18px;font-weight:bold;color:#FFF;text-indent:1em;line-height:35px;background:#C00url(../image/arrow-down.gif)205px10pxno-repeat;}背景样式简写背景颜色背景图像背景定位背景不重复显示列表样式2-1list-style-typelist-style-imagelist-style-positionlist-style列表样式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:circleoutsideurl(image/arrow-right.gif);}示例列表图标效果总结使用CSS设置字体的大小、类型、风格、粗细等。使用CSS设置文本颜色、行距、首行缩进、对齐方式、文本装饰等。使用CSS设置超链接在不同状态下的样式。使用CSS设置页面背景颜色、背景图片，为列表设置列表自定义图标。使用CSS设置列表项的类型、列表图像及列表符号显示位置。