基于Web标准的网页设计与制作22012.pptVIP

《基于Web标准的网页设计》;第四章 CSS 概述 ;CSS 概述;为什么需要CSS;;;;html只能对元素一个一个的设置样式;使用CSS后;html的弱点;CSS的语法 ;CSS样式规则的组成－选择器;CSS的声明;CSS属性值的写法;在HTML中引入CSS的方法;在HTML中引入CSS的方法 ;行内式;嵌入式;链接式和导入式;链接式和导入式的区别;;选择器的分类（重点）;CSS选择器的分类;标记选择器;伪类选择器;通过伪类选择器制作动态超链接;类选择器;;;id选择器;ID选择器;ID选择器;;类名和id名的大小写;DW中对CSS的可视化编辑 ;新建CSS规则的过程;CSS规则定义面板;编辑CSS样式－也在CSS面板里;用CSS修饰文本－简单CSS属性的应用;CSS的文本属性;文本对齐属性(text-align);文本修饰属性(text-decoration);文本缩进属性(text-indent);行高属性(line-height);文本颜色属性(color);字间距属性(letter-spacing);《基于Web标准的网页设计》;CSS的层叠性;CSS的层叠性;CSS的层叠性－未冲突;CSS的层叠性－发生冲突;选择器的优先级;!important的用途;CSS的继承性 ;CSS的继承性 ;;继承关系树型图(DOM);继承性习题;;要善于利用CSS继承性;并不是所有的CSS属性都具有继承性;选择器的组合;选择器的组合 ;复合选择器;1 交集选择器;交集选择器的作用范围;交集选择器举例;2 并集选择器;并集选择器举例;通配选择符;3 后代选择器;;后代选择器;后代选择器举例;4. 复合选择器的优先级;复合选择器优先级计算 例题;CSS样式的优先级 总图;复杂选择器名称的分解 ; CSS样式的总体设计原则 ;CSS样式的总体设计原则2;CSS 2.1新增加的选择器简介 ;CSS 2.1新增加的选择器简介 ;1. 子选择器;子选择器;2 相邻选择器;3 属性选择器;4 新增加的伪类选择器;5. 伪对象选择器;5. 伪对象选择器;CSS所有的选择器类型总结;4.2 应用CSS修饰文本和超链接;CSS文本修饰 ;CSS文本修饰举例;CSS动态超链接 ;;需要注意三点 ;CSS属性的值和单位 ;CSS属性的值和html属性值的比较 ;颜色的值 ;;;CSS长度单位 ;相对单位;百分比;CSS的滤镜属性简介 ;CSS的滤镜;CSS的滤镜;CSS滤镜的用法;CSS滤镜属性的分类;滤镜的应用;滤镜的应用;滤镜的应用;作业;本次实验任务;《基于Web标准的网页设计》;CSS的盒子模型;CSS的盒子模型;CSS的盒子模型;CSS的盒子模型;;元素盒子大小的计算;IE quirk模式下盒子的宽度;CSS盒子模型计算题;;边框border属性;边框border属性;填充padding属性;盒子模型的特性;对盒子模型的思考;属性值的简写形式?;各种元素盒子属性的默认值;4.5.2 盒子模型的应用;用盒子美化表格;盒子的定位;盒子的三种定位形式;标准流;标准流下的盒子排列分析;行内元素的盒子;改变行内元素的高度;display属性;block元素;inline元素;列表项元素display: list-item;隐藏元素display: none;;需要使用display属性切换的情况;标准流下定位的应用－制作竖直导航菜单;盒子的margin叠加问题;盒子的margin在标准流中的计算;行内元素之间的水平margin;实验2——块级元素之间的竖直margin body div style=margin-bottom:50px;块元素1/div div style=margin-top:30px;块元素2/div /body ;空白边叠加;嵌套盒子之间的margin;嵌套盒子在IE和Firefox中的不同显示;背景的控制 ;CSS的背景属性;CSS的背景属性;各个背景属性的默认值;background属性的缩写;DW中的背景设置面板;背景的运用技巧;背景的运用技巧;同时运用背景颜色和背景图片;控制背景在盒子中的位置及是否平铺 ;;li元素的背景应用;;多个元素背景的叠加 ;圆角的设计;4图像可变宽度圆角栏目框 ;4图像可变宽度圆角栏目框 ;最后再设置背景色;滑动门技术－背景的高级运用 ;1. 图像阴影;滑动门制作图片阴影原理图 ;2. 自适应宽度圆角导航条;滑动门导航条代码;背景图案的翻转－控制背景的显示区域 ;通过背景图片位置控制实现图片翻转;将滑动门技术和背景图片翻转结合的例子; CSS圆角设计;圆角的设计方法;1. 制作固定宽度的圆角框;2. 制作可变宽度圆角 ;3. 不用图片做圆角－山顶角方法;3. 不用图片做圆角－山顶角方法;