DW-第10章div+css样式.pptx

第10章 网页制作div+css3 样式布局 主讲:孙洪娟本章目标10.1 CSS3概述10.2 CSS3语法10.3 DIV盒模型介绍10.4 DIV+CSS3样式实例布局10.1 CSS概述层叠样式表css（ Cascading?Style?Sheets ）的缩写。也称为级联样式表。它是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。10.1.1 CSS 优点优点：代码独立，便于控制， 样式文件可在浏览器中缓存便于分工合作，提高了可访问性，提供更多的外观控制手段，可以将格式和结构分离，可以以前所未有的能力控制页面布局。可以制作体积更小下载更快的网页。 可以将许多网页同时更新。10.1.2 css3使用方法CSS样式使用方法：行内样式内嵌样式链接样式导入样式10.1.2 行内（内联）样式把样式代码内联到标记内使用style作为属性，样式语句作为属性值如：控制table标记的边框样式table style=border:#F00 solid 1px;/table10.1.2 内嵌（内联）样式内嵌样式就是将css样式代码添加到head 与/head之间，并且用style和 /style标记进行声明。这种写法串然没有完全实现页面内容和样式控制代码完全分离，但可以设置一些比较简单的样式，并统一页面样式。10.1.2 链接（外联）样式链接样式是css中使用频率最高也是最实用的方法。它很好地将“页面内容”和“样式风格代码”分离成两个或多个文件，实现了页面框架HTML代码和css代码的完全分离。使前期制作和后期维护十分方便。链接样式是指在外部定义css样式表并形成以.css为扩展名的文件。10.1.2 导入样式导入样式和链接样式基本相同，都是创建一个单独css文件，名后再引入到HTML文件中。导入外部样式表是指在内部样式表的style标记中，使用@import导入一个外部样式表。例如：headstyle type=“text/css”!— @import “1.css”--/style/head10.1.2 优先级行内样式内嵌样式链接样式导入样式10.2 CSS基本语法选择器（selector）也称为选择符。HTML中的所有标记都是通过不同的css选择器进行控制的。选 择器不只是HTML文档中的元素标记。它还可以是类（class）id等等。跟据css选择符用涂可以把选择器分为：标签选择器、类选择器、全局选择器、id选择器和伪类选择器。如：P {font-size:12pt; color:red;}10.2 CSS基本语法1、标签选择器HTML文档中由多个不同标记组成，而css选择器就是声明那些标记采用样式。如：P {font-size:12pt; color:red;}如：body,p,td,th,div,dl,ul,ol,li{font-family:宋体；font-size:12px; color:#000;}在一个页面中，使用标签选择器，会控制该页面中所有此标记显示样式。10.2 CSS基本语法2、类选择器标签选择器控制该页面中所有此标记显示样式，如果需要为此标记重新设定样式还需要使用类（class）选择器。如：.s{ font-size:14px; color:#red;}P class=”s”段落样式/p10.2 CSS基本语法3、id选择器id选择器和类选择器类似，都是针对特定属性的属性值进行匹配。id选择器定义的是某一特定的html元素，一个网页中只能有一个元素使用某一id的属性值。在一个页面中，每个id只能使用一次要有“#”在名字前面如：#fontstyle{ font-size:14px; color:#red;}10.2 CSS基本语法4、全局选择器如果想要一个页面中所有html标记使用一种样式，可以使用全局选择器，全局选择器顾名思义就是对所有html元素起作用。如：*{ font-size:14px; color:#red;}“*”表示对所有元素起作用10.2 CSS基本语法5、组合选择器将多种选择器进行搭配，可以构成一种复合选对器，也称为组合选择器，即将标签选择器、类选择器和ID选择器组合起来使用。一般的组合方式是标签选择器和类选择器组合或标签选择器和id选择器组合。这两种组合原理和效果一样。如： .s img{border:1px #000 solid;}#s p{font-size:14px; color:#red;}10.5.5 组合使用组合使用10.2 CSS基本语法6、继承选择器继承选择器则是，子标记在没有定义的情况下所有的样式是继承父标记的，当子标记重复定义了父标记已经定义过的声明时，子标记就执行后面的声明。如：div sp