《网页设计与制作》第6章课件

1、第六章 美化 会使用CSS设置文本和字体样式 会使用CSS设置超链接样式 会使用CSS设置背景样式 会使用CSS设置列表样式 本章目标 标签 标签标签 的作用的作用 享受享受“北大式北大式”教育服务教育服务 在北大青鸟，有一群人默默支持你成就在北大青鸟，有一群人默默支持你成就 IT梦想梦想 选择选择北大青鸟北大青鸟，成就你的梦想，成就你的梦想 演示示例演示示例1：span标签的应用标签的应用 示例示例 字体样式 4/39 字体类型 font-family属性属性 bodyfont-family: Times,Times New Roman, 楷体楷体; 示例示例 5/39 font-size属

2、性属性 单位：单位：px（像素）（像素） in、cm、mm、pt、pc 字体大小 h1font-size:24px; h2font-size:16px; h3font-size:5mm; pfont-size:10in; spanfont-size:12pt; strongfont-size:13pc; 示例示例 6/39 字体风格 font-style属性属性 normal、italic和和oblique 斜体斜体 正常字体正常字体 7/39 . h1font-size:24px; font-style:italic; h1 spanfont-style:oblique; h2font-si

3、ze:16px; font-style:normal ; . 京东商城京东商城 全部商品分类全部商品分类 图书、音像、电子书刊图书、音像、电子书刊 . 字体的粗细 font-weight属性属性 正常粗细正常粗细 字体加粗字体加粗 8/39 字体属性 font属性属性 字体属性的顺序：字体风格字体属性的顺序：字体风格字体粗细字体粗细字体大小字体大小字体类型字体类型 p spanfont:oblique bold 12px 楷体楷体; 示例示例 9/39 文本样式 文本属性文本属性 10/39 文本颜色 color属性属性 十六进制方法表示颜色十六进制方法表示颜色 color:#FFFFFF;

4、color:#000000; color:FF0000; color:#A983D8; color:#95F141; color:#339966; color:#EEFF66; color:#396; color:#EF6; 6位颜色值相邻数位颜色值相邻数 字两两相同时，字两两相同时， 可两两缩写为可两两缩写为1位位 红色字体红色字体 11/39 蓝色字体蓝色字体 排版文本段落 水平对齐方式水平对齐方式 text-align属性属性 首行缩进首行缩进 text-indent：em或或px 行高行高 line-height：px 居中显示居中显示 居右显示居右显示 首行缩进首行缩进 设置行高设置

5、行高 12/39 演示示例演示示例6：排版文本段落：排版文本段落 文本修饰 文本装饰文本装饰 text-decoration属性属性 13/39 文本修饰和垂直对齐 文本装饰 text-decoration属性 垂直对齐方式 vertical-align属性：middle、top、bottom 14/39 . p img vertical-align:middle; . 图片与文本图片与文本 居中对齐居中对齐 . 行距、对齐等：行距、对齐等： line-height （行高）（行高） text-align （对齐）（对齐） text-decoration （文本修饰文本修饰 ） 文本、字体属性

6、-小结 字体、字号：字体、字号： font（缩写形式）（缩写形式） font-weight（粗细）（粗细） font-size（大小）（大小） font-family（字体）（字体） 超链接样式的特殊性 文本或图像加上链接，将失去原 样式而继承链接的样式 超链接样式的特点 加链接后，加链接后， 图片图片/文本样文本样 式的变化式的变化 超链接样式的四种状态超链接样式的四种状态 未访问状态（未访问状态（a:link ） 已访问状态（已访问状态（a:visited ） 鼠标移上状态（鼠标移上状态（a:hover ） 激活选定状态（激活选定状态（a:active ） 可以分别设置可以分别设置 链接的

7、四种状链接的四种状 态的样式态的样式 超链接伪类样式 超链接伪类样式 采用选择器：状态的方式分别定采用选择器：状态的方式分别定 义样式，一般称为伪类义样式，一般称为伪类 如何设置超链接的样式 .nav li a color:#b46210; .nav li a:hover color:#ff7300;font-size:20px; /style 家用电器家用电器 手机数码手机数码 1、先定义共有样式：表示、先定义共有样式：表示.nav类类 下下标签中的链接样式标签中的链接样式 设置超链接样式的步骤：设置超链接样式的步骤： 1、确定页面所有链接样式是否相同，否则分开定义、确定页面所有链接样式是否

8、相同，否则分开定义 2、先定义四个状态共有样式，再分别定义其他状态、先定义四个状态共有样式，再分别定义其他状态 2、再单独定义某个状、再单独定义某个状 态特有的样式态特有的样式 导航版块的链接样式导航版块的链接样式 一般和页面样式不同一般和页面样式不同 ，需单独定义，需单独定义 设置伪类的顺序：设置伪类的顺序：a:link-a:visited-a:hover-a:active 设置鼠标形状 CSS设置鼠标形状设置鼠标形状 cursor属性属性 spancursor:pointer; 示例示例 19/39 背景样式 背景图像背景图像 背景颜色背景颜色 背景图像背景图像 背景颜色背景颜色 20/3

9、9 标签 标签的用法标签的用法 网页布局网页布局 排版网页内容排版网页内容 语法语法 网页内容网页内容 #header width:200px; height:280px; 网页内容网页内容 宽宽 高高 21/39 背景属性2-1 背景属性：背景属性： background （缩写形式）（缩写形式） background-color（背景色背景色 ） background-image（背景图背景图 ） background-repeat（背景图重复方式背景图重复方式 ） background-position（位置坐标、偏移量）位置坐标、偏移量） 四类四类 平铺平铺 效果效果 背景颜色值：十六

10、进制方法表示背景颜色值：十六进制方法表示 transparent（透明色，默认值）（透明色，默认值） background-image:url(图片路径图片路径); repeat（默认值）（默认值） no-repeat（不平铺）、（不平铺）、 repeat-x（只沿水平方向平铺）（只沿水平方向平铺） repeat-y（只垂直方向平铺）（只垂直方向平铺） 背景属性2-2 div background:#C00 url(./image/pic.gif) 205px 10px no-repeat; 背景出现的水平和垂背景出现的水平和垂 直位置坐标，实现各直位置坐标，实现各 种拍偏移效果种拍偏移效果

11、设置背景图片、不重复设置背景图片、不重复 平铺平铺 ，只显示一次，只显示一次 各种偏移各种偏移 效果效果 背景属性的顺序：背景颜色背景属性的顺序：背景颜色背景图像背景图像背景定位背景定位背景重复背景重复 列表样式2-1 list-style-type list-style-image list-style-position list-style 24/39 列表样式2-2 list-style-image list-style-position inside outside list-style li list-style-image:url(image/arrow-right.gif); l

12、ist-style-type:circle; li list-style-image:url(image/arrow-right.gif); list-style-type:circle; list-style-position:outside; li list-style:circle outside url(image/arrow-right.gif); 示例示例 演示示例演示示例11：列表样式：列表样式 列表图标效果列表图标效果 列表属性应用 列表属性的典型应用：导航菜单列表属性的典型应用：导航菜单 li width:150px; color:red; font:28px 隶书隶书; list-style:none; float:left; 购物车购物车 设置列表为设置列表为none去掉去掉 圆点圆点 所有所有html标签都有的标签都有的float浮动属性，浮动属性， 此处用于横向排列此处用于横向排列 总结 l使用使用CSS设置字体的大小、类型、风格、粗细等。设置字体的大小、类型、风格、粗细等。 l使用使用CSS设置文本颜色、行距、首行缩进、对齐