使用语言开发商业站点tp05.pptx

第五章CSS3美化网页元素

预习检查在某一段文本中突出显示某几个字，以粗体、红色、大字号显示，通常使用（)标签在CSS中，设置文本行高使用（）属性在CSS中设置背景颜色为透明的值为（）设置文本字体加粗的属性是什么？去掉列表项前标记符号的CSS属性是什么？描述使用font属性设置字体类型、风格、大小、粗细的样式顺序transparentline-heightspan集中测试2/43

回顾与作业点评描述CSS的基本语法结构，并举例说明其构成CSS基本选择器有哪几种，并举例说明CSS的高级选择器有哪几种，并说明各自的特点点评作业的提交情况和共性问题3/43作业点评回顾

本章任务制作京东新闻资讯页制作购物网站商品分类列表制作畅销书排行榜页面4/43

本章目标会使用CSS设置字体样式和文本样式会使用CSS设置超链接样式会使用CSS设置列表样式会使用CSS设置背景样式会使用CSS设置渐变效果5/43

为什么使用CSS有效的传递页面信息使用CSS美化过的页面文本，使页面漂亮、美观，吸引用户可以很好的突出页面的主题内容，使用户第一眼可以看到页面主要内容具有良好的用户体验页面使用CSS有什么好处？6/43

span标签span标签的作用能让某几个文字或者某个词语凸显出来p享受spanclass=show“北大式”/span教育服务/pp在北大青鸟，有一群人默默支持你成就spanid=dreamIT梦想/span/ppclass=bird选择span北大青鸟/span，成就你的梦想/p示例演示示例1：span标签的应用7/43

字体样式属性名含义举例font-family设置字体类型font-family:隶书;font-size设置字体大小font-size:12px;font-style设置字体风格font-style:italic;font-weight设置字体的粗细font-weight:bold;font在一个声明中设置所有字体属性font:italicbold36px宋体;8/43

字体类型font-family属性p{font-family:Verdana,楷体;}body{font-family:Times,TimesNewRoman,楷体;}示例演示示例2：字体类型9/43

字体大小font-size属性单位px（像素）em、rem、cm、mm、pt、pch1{font-size:24px;}h2{font-size:16px;}h3{font-size:2em;}span{font-size:12pt;}strong{font-size:13pc;}示例10/43

字体风格font-style属性normal、italic和oblique斜体正常字体演示示例3：字体风格11/43

值说明normal默认值，定义标准的字体bold粗体字体bolder更粗的字体lighter更细的字体100、200、300、400、500、600、700、800、900定义由细到粗的字体400等同于normal，700等同于bold字体的粗细font-weight属性正常粗细字体加粗演示示例4：字体的粗细12/43

字体属性font属性字体属性的顺序：字体风格→字体粗细→字体大小→字体类型pspan{font:obliquebold12px楷体;}示例13/43

文本样式文本属性属性含义举例color设置文本颜色color:#00C;text-align设置元素水平对齐方式text-align:right;text-indent设置首行文本的缩进text-indent:20px;line-height设置文本的行高line-height:25px;text-decoration设置文本的装饰text-decoration:underline;14/43

文本颜色color属性RGB十六进制方法表示颜色：前两位表示红色分量，中间两位表示绿色分量，最后两位表示蓝色分量rgb(r,g,b):正整数的取值为0～255RGBA在RGB基础上增加了控制alpha透明度的参数，其中这个透明通道值为0～1color:#A983D8;color:#EEFF66;color:rgb(0,255,255);color:rgba(0,0,255,0.5);演示示例5：文本颜色示例15/43

首行缩进text-indent：em或px行高line-height：px水平对齐方式text-align属性值说明left把文本排列到左边。默认值：由浏览器决定right把文本排列到右边center把文本排列到中间justify实现两端对齐文