HTML-T6.ppt

1、第六章,CSS的应用方式和盒子模型,回顾,CSS的样式规则中，定义背景颜色的属性是什么？CSS的样式规则中，定义文本居中的属性是什么？,提问,本章案例,熟练使用盒子模型相关属性，改变HTML元素的样式和定位。,案例演示,本章目标,CSS的三种应用方式理解盒子模型学会使用div和span,预习检查,CSS的应用方式有哪三种？描述盒子模型的外边界属性是什么？Div元素是块元素还是内联元素？,提问,CSS的三类应用方式,内部样式表,在区声明的样式表，称为“内部样式表”。内部样式表的特点：仅对本页面有效。内部样式表的缺点：各个页面CSS重复率较高，以后维护起来不方便。,内部样式表,外部样式表,把样式表

2、写在一个以.css为后缀的CSS文件里。有了单独的CSS文件，HTML文档如何引用这个文件呢？,演示：外部样式表,标签,指定CSS文件的路径,推荐使用外部样式表,行内样式表,如果某个样式规则使用频率不高，只是极个别元素使用，可以把样式定义在元素的标签里。,行内样式表,三种样式表的特点,样式表的“最近原则”,外部样式表,内部样式表,行内样式表,第一段、第二段文本的格式分别是什么？如果将外部样式表、内部样式表更换位置，结果又怎样？,课堂练习,使用外部样式表，实现网页区样式的统一。,背景颜色：#CCFFFF,宋体，12px,为什么要学习盒子模型,在CSS中，盒子模型是非常重要的概念。盒子模型可以帮助

3、你实现灵活的排版和一些特效。,使用盒子模型的网页,盒子模型的结构,border-top,border-bottom,border-left,border-right,Content内容,padding-left,padding-right,padding-top,padding-bottom,盒子,盒子所占空间,Margin-left,Margin-right,Margin-top,Margin-bottom,盒子模型的属性,盒子模型的属性,盒子模型示例效果,左填充40px,左边界50px,上边界50px,示例中使用盒子模型的哪些属性？,提问,绿色虚线边框,盒子模型的参考代码,查看源代码,外边

4、界属性,填充属性,边框属性,盒子模型属性的简写,上、右、下、左边界都为30px,上、下边界为30px；左、右边界为50px;,上边界为30px；左、右边界为50px;下边界为60px;,四个数值依次表示上、右、下、左边界值,盒子模型-示例2,使用盒子模型的哪些属性可以实现？,文本框：红色细线,提问,参考代码,课堂练习,使用盒子模型，实现网页内容距离左边100px，距离右边100px。,距离左边100px,距离右边100px,HTML元素分类,在HTML中，一切元素皆为盒子。,Display属性,是块元素还是内联元素？依照以前所学的，两个并排的表格如何实现呢？,并排的表格,提问,参考代码,取值：block|inline|none,网页新元素：div和span,div和span都属于容器元素。它们的区别：div属于块元素，span属于内联元素。,Div