HTML开发网页样式题库.pptVIP

* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * 人有了知识，就会具备各种分析能力， 明辨是非的能力。 所以我们要勤恳读书，广泛阅读， 古人说“书中自有黄金屋。 ”通过阅读科技书籍，我们能丰富知识， 培养逻辑思维能力； 通过阅读文学作品，我们能提高文学鉴赏水平， 培养文学情趣； 通过阅读报刊，我们能增长见识，扩大自己的知识面。 有许多书籍还能培养我们的道德情操， 给我们巨大的精神力量， 鼓舞我们前进。 * * * * * * * * * * * * * * * * * * * * * * * * * * * * 小结 CSS选择器分标签选择器、类选择器和ID选择器 CSS的复合选择器： 交集选择器、并集选择器和后代选择器 在HTML中引入CSS样式的三种方式 行内样式、内部样式表和外部样式表 注意CSS的优先级 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: y