HTML开发网页样式.ppt

* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * CSS的属性 文字、文本属性 背景属性 列表属性 盒子模型 浮动属性 定位属性 字体属性 字体属性小结 属性 描述 font-style 设置字体风格 font-weight 设置字体粗细 font-size 设置字体的尺寸 font-family 设置字体系列 font 简写属性，作用是把所有针对字体的属性设置在一个声明中(注意顺序) 例如：font: italic bold 16px 楷体; 文本属性 文本属性小结 属性 描述 color 设置文本的颜色，如 red，#FF0000 line-height 设置文本的行高 text-align 设置文本的对齐方式, 如 left 、center、right text-decoration 设置文本装修，如underline、none、line-through 课堂演示 需求说明 使一级标题居中显示，二级分类字体为蓝色，字体为斜体、加粗、16px、楷体，且加上下划线，并让分类之间的行高为30px； 演示示例：文本属性 课堂练习 需求说明 制作北大青鸟网站新闻信息展示页面 使用外部样式表创建页面样式 完成时间：10分钟 共性问题集中讲解 小标题h2行高28px，字体大小12px 字体大小18px，行高40px ，居中显示 居中显示，文字大小12px，字体颜色#666666 段落字体12px行高20px 设置页面元素的背景样式 背景属性 属性 描述 background-color 背景色，取值如，red，#FF0000 background-image 背景图片,如: background-image : url ( “./images/bg.png” ); background-position 背景开始位置,包括水平方向(X轴)和竖直方向(Y轴)的设置 X轴取值：left，center，right 或 像素值 或 百分比 Y轴取值：top，center，bottom 或 像素值 或 百分比 background-repeat 背景填充方式,取值： repeat-x | repeat-y | no-repeat background 合写方式，如 background：#fff url(bg.png) left top no-repeat; 课堂演示 需求说明 使用外部样式表创建页面样式 一级标题为红色背景色且带向下图标 主体部分为灰色(#D7D7D7)背景色 二级分类均有向右箭头图标 演示示例：商品分类侧边栏 列表属性 超链接伪类 鼠标形状控制 知识点分类 列表属性 超链接伪类 鼠标形状控制 列表属性 属性 描述 举例 list-style-image 将列表设置为列表标志 list-style-image:url(./arrow.gif); list-style-type 设置列表项标志的类型: disc(实心圆) | circle (空心圆) | square(正方形) list-style-type : circle ; list-style 以上属性的合并简写,或 none 去掉默认属性设置 list-style:square url(/i/arrow.gif); 列表属性 超链接伪类 鼠标形状控制 超链接伪类 a:link {color: red} /* 未访问的链接 */ a:visited {color: blue} /* 已访问的链接 */ a:hover {color: green} /* 当有鼠标悬停在链接上 */ a:active {color: yellow} /* 被选择的链接 */ 示例 1、在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的 2、在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的 3、记忆方法： love hate ! 经验 鼠标形状控制 cursor属性，其值： 鼠标形状控制 课堂演示 需求说明 完善商品分类侧边栏 去掉默认小黑点 鼠标移至分类文字超链接时 字体为红色 文字有下划线 鼠标移至红色标题上时，鼠标形状为可移动形状 演示示例：完善商品分类