HTML5 程序设计第4章.ppt

;第4章 最新版本的层叠样式表——CSS3 ;本章知识点;4.1 CSS基础 ;4.1.1 什么是CSS ;【例4-1】 ;【例4-1】 ;4.1.2 在HTML文档中应用CSS ;1．行内样式表;2．内部样式表 ;3．外部样式表 ;接上 ;【例4-3】 ;4.1.3 颜色与背景 ;【例4-4】 ;【例4-4】;4.1.4 设置字体 ;【例4-5】 ;【例4-5】的运行结果 ;4.1.5 设置文本属性 ;1．设置文本对齐;【例4-6】 ;【例4-6】的运行结果 ;2．设置文本的修饰 ;【例4-7】 演示设置文本修饰的例子;【例4-7】的运行结果 ;3．设置文本的缩进;【例4-8】 演示设置文本缩进的例子 ;【例4-8】的运行结果 ;4．设置文本的字间距 ;【例4-9】 演示设置文本字间距的例子 ;【例4-9】的运行结果 ;5．设置文本的行间距 ;【例4-10】 演示设置文本行间距的例子 ;【例4-10】的运行结果 ;6．设置文本方向 ;【例4-11】 演示设置文本方向的例子 ;【例4-11】的运行结果 ;7．处理文本中的空白符 ;【例4-12】演示禁止元素中的文本折行 ;【例4-12】的运行结果如图4-10所示 ;4.1.6 超链接 ;【例4-13】 ;浏览【例4-13】的结果 ;【例4-14】 ;浏览【例4-14】的结果 ;CSS还包括下面的超链接样式 ;【例4-15】 ;4.1.7 列表 ;1．设置列表项标记的类型 ;接上 ;【例4-16】 设置无序列表和有序列表样式 ;2．设置列表项图像 ;【例4-17】 设置无序列表项前面的图像 ;4.1.8 表格 ;1．设置表格边框 ;浏览【例4-18】的结果 ;2．折叠边框 ;接上;CSS的其他表格属性 ;【例4-20】 ;接上;接上;浏览【例4-20】的结果 ;4.1.9 CSS 轮廓 ;CSS的轮廓属性 ;轮廓样式的可选值 ;轮廓宽度的可选值 ;【例4-21】 设置元素轮廓的例子 ;浏览【例4-21】的结果 ;4.1.10 浮动元素;【例4-22】 ;浏览【例4-22】的结果 ;4.2 CSS3的新技术 ;4.2.1 实现圆角效果 ;【例4-23】 ;浏览【例4-23】的结果 ;还可以使用下面的属性定义指定的圆角 ;【例4-24】 ;接上;浏览【例4-24】的结果 ;【例4-25】 ;浏览【例4-25】的结果 ;【例4-26】 ;浏览【例4-26】的结果 ;4.2.2 多彩的边框颜色;使用这些属性的语法 ;前缀-moz ;【例4-27】 ;浏览【例4-27】的结果 ;4.2.3 阴影 ;不同的浏览器引擎中，实现box-shadow属性的方法略有不同 ;【例4-28】 ;浏览【例4-28】的结果 ;提示 ;4.2.4 背景图片 ;【例4-29】 ;接上;浏览【例4-29】的??果 ;4.2.5 多列 ;【例4-30】 ; 浏览【例4-30】的结果 ;4.2.6 嵌入字体 ;参数说明 ;【例4-31】 ;浏览【例4-31】的结果 ;下载字体;4.2.7 透明度 ;【例4-32】 在CSS3中实现不同透明度的图像 ;浏览【例4-32】的结果 ;【例4-33】 在CSS3中实现不同透明度的层 ; 浏览【例4-33】的结果 ;【例4-34】 使用RGBA声明实现类似【例4-33】的不同透明度的层 ;4.2.8 HSL和HSLA颜色表现方法 ;【例4-35】 ;浏览【例4-35】的结果 ;HSLA声明 ;【例4-36】 ;浏览【例4-36】的结果 ;4.3 CSS3应用实例 ;4.3.1 HTML5 ＋ CSS3设计页面布局 ;在网页中引用style-css3.css，并使用HTML5中新的布局标签定义网页布局 ;4.3.2 设计漂亮的导航菜单 ;浏览【例4-37】的结果 ;transition属性 ;参数transition-property ;参数transition-duration ;参数transition-timing-function ;参数 transition-delay;【例4-38】 ;接上;浏览【例4-38】的结果 ;4.3.3 设计登录页面 ;浏览【例4-39】的结果 ;【例4-40】;接上;浏览【例4-40】的结果 ;【例4-41】 ;接上;接上;浏览【例4-41】的结果