DW-第9章div+css样式材料.pptx

本章目标 9.1 DIV盒模型介绍 9.2 CSS概述 9.3 CSS语法 9.4 DIV+CSS样式实例布局 9.1 div盒子模型介绍 　CSS中， Box Model叫盒子模型（或框模型），Box Model规定了元素框处理元素内容（element content）、内边距（padding）、边框（border） 和 外边距（margin） 的方式。在HTML文档中，每个元素（element）都有盒子模型，所以说在Web世界里（特别是页面布局），Box Model无处不在。下面是Box Model的图示： 　　　　　　　　　　　　　　　　　 一个盒模型包括4个区 内容（content） 内边距（padding） 边框（border） 外边距（margin） 9.1 div盒子模型介绍 9.1 div盒子模型介绍 说明：上图中，由内而外依次是元素内容（content）、内边矩（padding-top、padding-right、padding-bottom、padding-left）、边框（border-top、border-right、border-bottom、border-left）和外边距（marging-top、margin-right、margin-bottom、margin-left）。 　内边距、边框和外边距可以应用于一个元素的所有边，也可以应用于单独的边。而且，外边距可以是负值，而且在很多情况下都要使用负值的外边距。 　　 9.1 div盒子模型介绍 　　下图是W3School的Box Model 图解： 　 　　 9.2 CSS概述 层叠样式表css（ Cascading?Style?Sheets ）的缩写。 也称为级联样式表 它是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。 9.2 CSS概述 CSS-级联样式表单 Cascading Style Sheet 对WEB页面进行外观控制的机制 将页面的内容和表现分离 CSS版本 目前为止，CSS有两个官方标准：CSS1和CSS2 CSS1的功能在大多数浏览器中都被支持 —nocss.html、css.html 9.2 示例-无CSS 9.2 示例-有CSS 9.2.1 CSS 优点 优点 代码独立，便于控制 样式文件可在浏览器中缓存 便于分工合作 提高了可访问性 提供更多的外观控制手段 9.3 css样式 CSS样式 内联样式 嵌入样式 外联样式 9.3.1 内联样式 内联样式—inlineCSS.html 把样式代码内联到标记内 使用style作为属性，样式语句作为属性值 如： 控制table标记的边框样式为不折叠 9.3.1 内联样式特点 内联样式特点 看上去很直观 针对个别元素控制 和传统的外观控制方式没有本质的不同 不推荐使用 9.3.2 嵌入样式 嵌入样式—internalCSS.html 使用style标记把样式代码插入到页面中 一般插入到head标记中 如： 9.3.2 嵌入样式特点 特点 将CSS语句直接写在HTML文档中，但它独立存在，方便维护和修改 仅针对一个HTML文档进行设置 代码是HTML文档的一部分，没有利用浏览器的缓存机制 9.3.3 外联样式 外联样式—externalCSS.html 通过外部样式文件对页面进行控制 外部的样式文件通过HTML的link元素连接到HTML文档中 9.3.3 外联样式使用 使用 建立外部样式文件（.css） 外部的样式文件不能含有任何像head或style这样的HTML标记 样式表文件仅仅由样式规则或声明组成 9.3.3 外联样式特点 特点 当样式被应用到很多的网页时，推荐使用外部样式表 网页制作者使用外部样式表，在改变整个网站的外观时，仅需要改变一个文件 大多数浏览器会保存外部样式表在缓冲区，从而如果样式表在缓冲区就避免了在展示网页时的延迟 在实际开发中一般都使用外联样式 9.3.4 CSS基本语法 选择符 {属性1:属性值1;属性2:属性值2;} 选择符（selector）：指定样式适用的标记，除指定标记外，样式不起作用 属性：样式的关键字 属性值：描述样式的值； 格式：属性与属性之间使用分号分隔，属性与属性值之间使用冒号分隔 如：P {font-size:12pt; color:red;} 使用—html.css body {color:black} p {font-family:”sans serif”} p {text-align:center;color:red} p { text-align:center; color:black; font-family:arial } 如果是