DW-第9章div+css样式.pptxVIP

本章目标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的图示：　9.1 div盒子模型介绍一个盒模型包括4个区内容（content）内边距（padding）边框（border）外边距（margin）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和CSS2CSS1的功能在大多数浏览器中都被支持—nocss.html、css.html9.2 示例-无CSS9.2 示例-有CSS9.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;}9.4 CSS基本语法如果是多个单词，使用双引号括上使用—html.cssbody {color:black}p {font-family:”sans serif”}p {text-align:center;color:red}p { text-align:center; color:black; font-family:arial}如果有多个属性，使用分号将各个属性分隔开注意代码的格式，使可读性更好9.5 选择符分类选择符分类普通选择符类选择符id选择符9.5.1 普通选择符普通选择符任意的HTML标记其样式仅仅作用在选择符指定的HTML元素上如