CSS应用及盒子模型.ppt

CSS应用及盒子模型 课程介绍 目标：掌握样式表的三种应用方法及灵活应用盒模型 内容：掌握样式表的应用方法、理解CSS的优先级、熟 练实现块级元素和行内元素之间转换、理解盒子 模型在网页设计中的重要作用、熟练掌握关于盒 子模型的各种属性 重点：CSS的优先级、盒子模型 难点：盒子模型 CSS应用及盒子模型 CSS样式表的应用 CSS的优先级 块级元素和行内元素 盒子模型 CSS的应用 网页中有多种使用CSS的方式，并且有各自的优缺点。用户可以根据自己的需要和不同的场景来选择使用不同类型的样式表。 行内样式 内嵌样式 外部样式 CSS的应用……行内样式 行内样式表是在各种CSS的引入方式当中最直接的一种。直接使用元素的style属性设置。 如果某个样式规则使用频率不高，只是极个别元素使用，可以把样式定义在元素的标签里。 语法： 标签 style=”属性1：属性值1；属性2：属性值2；……” CSS的应用……内嵌样式 内嵌式样式表就是将样式规则定义到HTML文件一个单独的区域，即HTML头部分head标签中的style标签之间，与HTML文档中的设置页面内容的标签分离开来，从而实现对整个页面范围的内容进行统一的控制与管理。 语法 style type=”text/css” 选择器1{属性1：属性值1；……} 选择器2{属性1：属性值1；……} …… style CSS的应用……外部样式表2-1 外部样式表是相对于内部样式表而言的，它是一个后缀名为.css的文本格式文件，独立于HTML页面，放置于网站目录中，也称为样式表文件。 两种方式引入外部样式：链接方式、导入方式 链接方式是指在某个HTML页面中使用link标签引用外部样式表文件。 语法： link href=“” rel=”” type=”” 属性： href指定外部样式文件的URL。 rel指明包含链接的文档和链接到的文档之间的关系 type用于指明链接的文档的MIME类型 CSS的应用……外部样式表2-2 导入方式是指在style标签之间使用import关键字导入外部样式表文件。 语法： style type=”text/css” @import url(sheet1.css); 或者 @import sheet1.css; /style CSS的应用……三种样式表的对比 CSS的优先级 所谓CSS优先级，即是指CSS样式在浏览器中被解析的先后顺序。样式表的使用遵循“最近原则”。即HTML元素离哪个样式表近，就受那个样式表的控制。如果离得最近的样式表定义的规则少，不能满足需要，那么会顺序应用较远的样式表。 优先顺序就为：行内样式内嵌样式外部样式。 两种外部样式表的方式链接式和导入式同时使用时，出现在后面的样式表比出现在前面的样式表优先级高。 块级元素和行内元素……区别 块级元素和行内元素的区别 块级元素和行内元素……display属性 CSS的样式属性display可以实现块级元素与行内元素之间的转换 。 Display属性值 inline可以将块级元素改变为行内元素； block将行内元素改变为块级元素； none可以将文档中元素隐藏起来，并且不会占据页面空间 盒子模型……结构 盒子模型的属性……width、height width属性用来设置盒子中内容的宽度，height属性用来设置盒子中内容的高度，属性值为整数或小数值。 一个盒子实际所占有的宽度或高度是由“内容+内边距+边框+外边距”组成的。可以通过设置width和height的值来控制内容所占的矩形的大小，而对于任何一个盒子，都可分以别设定4条边各自的border、padding和margin。 盒子模型的属性……border Border(边框)一般用于分隔不同的元素。 盒子模型的属性……border-width border-width用来设定border的粗细程度，即宽度。对盒子上下左右4条边同时产生作用，可以有四种表示方式。 如果只设置1个属性值，那么这个值将表示上下左右四个边框的宽度； 如果设置2个属性值，第1个属性值表示上下边框宽度，第2属性值表示左右边框宽度； 如果设置3个属性值，第1个属性值表示上边框宽度，第2个属性值表示左右边框的宽度，第3个属性值表示下边框的宽度； 如果设置4个属性值，依次表示上、右、下、左边框的宽度，即从上边框开始顺时针排序。 盒子模型的属性……border-style border-style用来设定border的样式，它的默认值为none，因此边框要想显示出来必须设置border-style值 。 盒子模型的属性……border