TP05CSS美化网页元素资料.pptxVIP

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享受span class=“show”“北财”/span教育服务/p p在北财，有一群人默默支持你成就 span id=dreamIT梦想/span/p p class=“bird”选择span北财/span，成就你的梦想/p 6/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 宋体; 7/39 字体类型 font-family属性 p{font-family:Verdana,楷体;} body{font-family: Times,Times New Roman, 楷体;} 8/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;} 9/39 字体风格 font-style属性 normal、italic和oblique 斜体 正常字体 10/39 inherit:继承 normal：正常 oblique：倾斜的 字体的粗细 font-weight属性 值 说明 normal 默认值，定义标准的字体。 bold 粗体字体。 lighter 更细的字体。 100、200、300、400、500、600、700、800、900 定义由细到粗的字体。 400等同于normal，700等同于bold。 正常粗细 11/39 字体属性 font属性 字体属性的顺序：字体风格→字体粗细→字体大小→字体类型 p span{font:oblique bold 12px 楷体;} 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位 蓝色字体 14/39 排版文本段落 水平对齐方式 text-align属性 值 说明 left 把文本排列到左边。默认值：由浏览器决定 right 把文本排列到右边 center 把文本排列到中间 justify 实现两端对齐文本效果 首行缩进 text-indent：em或px 行高 line-height：px 居中显示 居右显示 首行缩进 设置行高 15/39 文本修饰和垂直对齐 文本装饰 text-decoration属性 垂直对齐方式 vertical-align属性：middle、to