CSS应用及盒子模型

1、CSS应用及盒子模型 课程介绍 目标：掌握样式表的三种应用方法及灵活应用盒模型目标：掌握样式表的三种应用方法及灵活应用盒模型 内容：掌握样式表的应用方法、理解内容：掌握样式表的应用方法、理解CSS的优先级、熟的优先级、熟 练实现块级元素和行内元素之间转换、理解盒子练实现块级元素和行内元素之间转换、理解盒子 模型在网页设计中的重要作用、熟练掌握关于盒模型在网页设计中的重要作用、熟练掌握关于盒 子模型的各种属性子模型的各种属性 重点：重点：CSS的优先级、盒子模型的优先级、盒子模型 难点：盒子模型难点：盒子模型 CSS应用及盒子模型 vCSS样式表的应用 vCSS的优先级 v块级元素和行内元素 v

2、盒子模型 CSS的应用 网页中有多种使用CSS的方式，并且有各自的优缺点。 用户可以根据自己的需要和不同的场景来选择使用不同 类型的样式表。 行内样式 内嵌样式 外部样式 CSS的应用行内样式 行内样式表是在各种CSS的引入方式当中最直接的一种。 直接使用元素的style属性设置。 如果某个样式规则使用频率不高，只是极个别元素使用， 可以把样式定义在元素的标签里。 语法： 这是一个使用了 行内样式 的p标签 CSS的应用内嵌样式 内嵌式样式表就是将样式规则定义到HTML文件一个单 独的区域，即HTML头部分标签中的标签 之间，与HTML文档中的设置页面内容的标签分离开来， 从而实现对整个页面范

3、围的内容进行统一的控制与管理。 语法 选择器1属性1：属性值1； 选择器2属性1：属性值1； p ,h2font-family:隶书; CSS的应用外部样式表2-1 外部样式表是相对于内部样式表而言的，它是一个后 缀名为.css的文本格式文件，独立于HTML页面，放置 于网站目录中，也称为样式表文件。 两种方式引入外部样式：链接方式、导入方式 链接方式是指在某个HTML页面中使用标签引用 外部样式表文件。 语法： 属性： href指定外部样式文件的URL。 rel指明包含链接的文档和链接到的文档之间的关系 type用于指明链接的文档的MIME类型 CSS的应用外部样式表2-2 导入方式是指在标

4、签之间使用import关键字导 入外部样式表文件。 语法： import url(sheet1.css); 或者 import sheet1.css; CSS文件文件 p ,h2font-family:隶书; HTML源文件源文件 CSS文件文件 p ,h2font-family:隶书; HTML源文件源文件 import url(style.css); CSS的应用三种样式表的对比 CSS的优先级 所谓CSS优先级，即是指CSS样式在浏览器中被解析 的先后顺序。样式表的使用遵循“最近原则”。即 HTML元素离哪个样式表近，就受那个样式表的控制。 如果离得最近的样式表定义的规则少，不能满足需要

5、， 那么会顺序应用较远的样式表。 优先顺序就为：行内样式内嵌样式外部样式。 两种外部样式表的方式链接式和导入式同时使用时， 出现在后面的样式表比出现在前面的样式表优先级高。 块级元素和行内元素区别 块级元素和行内元素的区别 标记不同行： 标记同一行： 用来组合文档中的行内元素。它是行内元素。用来组合文档中的行内元素。它是行内元素。 标签可以把文档分割为独立的、不同的部分。它是块级元素标签可以把文档分割为独立的、不同的部分。它是块级元素。 块级元素和行内元素display属性 CSS的样式属性display可以实现块级元素与行内元素之间 的转换 。 Display属性值 inline可以将块级元

6、素改变为行内元素； block将行内元素改变为块级元素； none可以将文档中元素隐藏起来，并且不会占据页面空间 盒子模型结构 盒子模型是CSS样式表中的一个重要内容，是网页元素的 显示基础，主要用来实现网页设计中排版、布局、定位等 操作。 CSS定义的所有元素都可以包含边界、边框、填充和内容 区域。在元素内容(content)与边框(border)之间的空白区 域，被称为元素的填充(padding)，也可以称为元素的内边 距、补白或内框；在元素边框外边的空白区域，被称为边 界(margin)，也可以称为元素的外边距或外框。 padding、border、margin都可以进一步细化为上下左右

7、4 个部分，在CSS中可以分别单独设置 盒子模型的属性width、height width属性用来设置盒子中内容的宽度，height属性用来设 置盒子中内容的高度，属性值为整数或小数值。 一个盒子实际所占有的宽度或高度是由“内容+内边距+边 框+外边距”组成的。可以通过设置width和height的值来 控制内容所占的矩形的大小，而对于任何一个盒子，都可 分以别设定4条边各自的border、padding和margin。 盒的宽度= width +margin-left+ padding-left + border-left+ padding-right + + border-right +m

8、argin-right 盒的高度= height+ margin-top+border-top+padding-top +padding-bottom + border-bottom +margin-bottom 盒子模型的属性border Border(边框)一般用于分隔不同的元素。 盒子模型的属性border-width border-width用来设定border的粗细程度，即宽度。对盒 子上下左右4条边同时产生作用，可以有四种表示方式。 如果只设置1个属性值，那么这个值将表示上下左右四个边 框的宽度； 如果设置2个属性值，第1个属性值表示上下边框宽度，第2 属性值表示左右边框宽度； 如

9、果设置3个属性值，第1个属性值表示上边框宽度，第2个 属性值表示左右边框的宽度，第3个属性值表示下边框的宽 度； 如果设置4个属性值，依次表示上、右、下、左边框的宽度， 即从上边框开始顺时针排序。 盒子模型的属性border-style border-style用来设定border的样式，它的默认值为none， 因此边框要想显示出来必须设置border-style值 。 盒子模型的属性border-color border-color用来设定border的颜色。通常情况下颜 色值为十六进制数，例如红色为“#ff0000”，当然也 可以是颜色的英语单词，例如red，yellow等。 在指定颜色属

10、性时，如果border-width值为0或者 border-style值为none，这个属性将不起作用 。 如果某元素的4条边框的设置都一样宽度、样式和颜 色，还可以直接使用border属性。 语法： border:border-width border-style border-color border:5px solid red; 盒子模型的属性padding padding用于设置元素内容与边框之间的距离，称为 填充，也叫内边距。 盒子模型的属性margin margin指的是元素与元素之间的距离，表示盒子边界， 也称为外边距。 本章小结 本章介绍了CSS样式的三种应用方式，以及三种方式在 使用过程中的优先级