TP05CSS美化网页元素

CSS美化网页元素第五章回顾与作业点评描述CSS的基本语法结构，并举例说明其构成。CSS选择器有哪几种，并举例说明。CSS的复合选择器有哪几种，并说明各自的特点。提问2/39本章任务制作百度音乐标签页面制作开心庄园页面制作网站新闻信息展示页面制作购物网站商品分类页面制作畅销书排行榜页面3/39本章目标会使用CSS设置字体样式会使用CSS设置文本样式会使用CSS设置图片对齐方式会使用CSS设置超链接样式会使用CSS设置鼠标外观会使用CSS设置背景样式会使用CSS设置列表样式4/39为什么使用CSS有效的传递页面信息使用CSS美化过的页面文本，使页面漂亮、美观，吸引用户可以很好的突出页面的主题内容，使用户第一眼可以看到页面主要内容具有良好的用户体验5/39<span>标签<span>标签的作用<span>在行内定义一个区域，也就是一行内可以被<span>划分成好几个区域，从而实现某种特定效果<p>享受<spanclass=“show”>“北财”</span>教育服务</p><p>在北财，有一群人默默支持你成就

<spanid="dream">IT梦想</span></p><pclass=“bird”>选择<span>北财</span>，成就你的梦想</p>演示示例1：span标签的应用示例6/39字体样式属性名含义举例font-family设置字体类型font-family:"隶书";font-size设置字体大小font-size:12px;font-style设置字体风格font-style:italic;font-weight设置字体的粗细font-weight:bold;font在一个声明中设置所有字体属性font:italicbold36px"宋体";7/39字体类型font-family属性p{font-family:Verdana,"楷体";}演示示例2：字体类型body{font-family:Times,"TimesNewRoman","楷体";}示例8/39font-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;}示例9/39字体风格font-style属性normal、italic和oblique斜体正常字体演示示例3：字体风格10/39inherit:继承normal：正常oblique：倾斜的字体的粗细font-weight属性值说明normal默认值，定义标准的字体。bold粗体字体。lighter更细的字体。100、200、300、400、500、600、700、800、900定义由细到粗的字体。400等同于normal，700等同于bold。正常粗细演示示例4：字体的粗细11/39字体属性font属性字体属性的顺序：字体风格→字体粗细→字体大小→字体类型pspan{font:obliquebold12px"楷体";}示例12/39文本样式文本属性属性含义举例color设置文本颜色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:#A983D8;color:#95F141;color:#339966;color:#EEFF66;color:#396;color:#EF6;6位颜色值相邻数字两两相同时，可两两缩写为1位演示示例5：文本颜色蓝色字体14/39排版文本段落水平对齐方式text-align属性值说明left把文本排列到左边。默认值：由浏览器决定right把文本排列到右边center把文本排列到中间justify实现两端对齐文本效果首行缩进text-indent：em或px行高line-height：px居中显示居右显示首行缩进设置行高演示示例6：排版文本段落15/39文本修饰和垂直对齐文本装饰text-decoration属性垂直对齐方式vertical-align属性：middle、top、bottom值说明none默认值，定义的标准文本。underline设置文本的下划线。overline设置文本的上划线。line-through设置文本的删除线。blink设置文本闪烁。此值只在firefox浏览器中有效，在IE中无效。演示示例7：垂直对齐方式16/39学员操作—制作百度音乐标签页面训练要点使用Dreamweaver制作网页使用字体属性设置字体风格、大小使用文本属性设置字体颜色、行距使用<span>标签需求说明讲解需求说明指导18px、楷体、加粗显示12px，行高20px英文字体：“TimesNewRoman”或“Times”中文字体：宋体完成时间：10分钟实现思路使用color属性设置字体颜色使用font设置字体类型和字体大小，但是顺序为字体大小→字体类型，字体类型要先设置英文字体，再设置中文字体；或者使用font-size设置字体大小，使用font-family设置字体类型。歌手分类字母序号放在标签<span>，使用font-weight设置字体加粗。CSS文件单独放在CSS文件夹下，使用链接式引用CSS文件。17/39学员操作—制作开心庄园页面需求说明标题行距40px，加粗显示；正文大小12px，行距20px；图片与文本居中对齐；使用外部样式表创建页面样式。完成时间：10分钟练习18px、字体颜色#9c2f0618/39共性问题集中讲解常见问题及解决办法代码规范问题调试技巧共性问题集中讲解19/39超链接伪类访问前，蓝色访问后，紫色图片边超链接后出现边框无超链接伪类样式语法标签名:伪类名{声明;}a:hover{ color:#B46210; text-decoration:underline;}20/39使用CSS设置超链接伪类名称含义示例a:link未单击访问时超链接样式a:link{color:#9ef5f9;}a:visited单击访问后超链接样式a:visited{color:#333;}a:hover鼠标悬浮其上的超链接样式a:hover{color:#ff7300; a:active鼠标单击未释放的超链接样式a:active{color:#999;}设置伪类的顺序：a:link->a:visited->a:hover->a:active图片超链接没有边框黑色，超链接无下划线褐色、超接链有下划线演示示例8：超链接样式21/39设置鼠标形状值说明图例default默认光标pointer超链接的指针wait指示程序正在忙help指示可用的帮助text指示文本crosshair鼠标呈现十字状CSS设置鼠标形状span{cursor:pointer;}示例22/39<div>标签DIV元素是用来为HTML文档内大块（block-level）的内容提供结构和背景的元素。DIV的起始标签和结束标签之间的所有内容都是用来构成这一块区域，其中所包含元素的特性由DIV标签的属性来控制，或者是通过使用样式表格式化这个块来进行控制。DIV标签称为区隔标记。作用：设定字、画、表格等的摆放位置。用来布局网页中的所有元素23/39<div>标签<div>标签的用法网页布局排版网页内容语法<div>网页内容…</div>#header{ width:200px; height:280px;}……<divid="header">网页内容…</div>宽高24/39背景样式25/39背景图像背景颜色网页背景背景颜色background-color背景图像background-image背景颜色值：十六进制方法表示transparent演示示例9：背景颜色26/39设置背景图像背景图像background-image属性背景重复方式background-repeat属性背景定位

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

水平方向的关键词：left、center、right垂直方向的关键词：top、center、bottom背景图像演示示例10：背景图像27/39设置背景示例背景属性background属性.title{ font-size:18px; font-weight:bold; color:#FFF; text-indent:1em; line-height:35px;

background:#C00url(../image/arrow-down.gif)205px10pxno-repeat;}背景样式简写背景颜色背景图像背景定位背景不重复显示28/39背景样式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列表样式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);}示例演示示例11：列表样式列表图标效果31/39学员操作—家用电器商品分类页面需求说明电器分类无下划线，鼠标悬浮超链接时显示下划线。分类内容超链无下划线，鼠标悬浮至超链接时字体颜色为棕红色（#F60），显示下划线。练习完成时间：10分钟18px、加粗、行距35、背景色#0f7cbf，缩进1字符14px、加粗、行距30px、背景色#e4f1fa、字体颜色#0f7cbf12px、行距20px，字体颜色#66666632/39学员操作—畅销书排行榜页面2-1训练要点设置页面的背景属性使用CSS设置超链