div+css布局教程选读.ppt

DIV+CSS布局教程 The Tutorial of css+div div+css布局教程 目录： 1.CSS基础知识 2.网页布局常用属性 3.网页布局实例 4.Web标准化思想与网页重构 一、CSS基础知识 1.css简介 2.css语法 3.选择器 4.实用小技巧 div+css布局教程 1、css简介 CSS 指层叠样式表 (Cascading Style Sheets) CSS语言是一种标记语言,它不需要编译,可以直接由浏览器执行 样式通常存储在样式表中 外部样式表通常存储在 CSS 文件中 外部样式表可以极大提高工作效率 2、css语法 CSS 语法由三部分构成：选择器、属性和值： P{color:#ff0000; background:#000000;} 其中“p”,我们称为选择器，指明我们要给“p”定义样式； 样式声明写在一对大括号“{}”中； Color和background称为“属性”，不通属性之间用“；”分隔 “#ff0000”和“#000000”是属性的值 2、css语法 几点值得注意的地方： 1、选择器的分组 可以对选择器进行分组，这样，被分组的选择器就可以分享相同的声明。用逗号将需要分组的选择器分开。（有助于优化样式表，提高效率） 例子： h1{color: green; } h2{color: green; } h3{color: green; } 我们可以这样写：h1,h2,h3 { color: green; } 样式太臃肿了，该减肥了! 2、css语法 几点值得注意的地方： 2、继承及其问题 根据 CSS，子元素从父元素继承属性。 例子：body { font-family: Verdana, sans-serif; } 根据上面这条规则，站点的 body 元素将使用 Verdana 字体 通过 CSS 继承，子元素将继承最高级元素（在本例中是 body）所拥有的属性（这些子元素诸如 p, td, ul, ol, ul, li, dl, dt,和 dd） 如果你不希望 “Verdana, sans-serif” 字体被所有的子元素继承，又该怎么做呢？比方说，你希望段落的字体是 Times。 我们可以这样写：p { font-family: Times, Times New Roman, serif; } 2、css语法 几点值得注意的地方： 3、层叠次序 当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？ 样式表分为： 浏览器缺省设置 外部样式表 内部样式表（位于 head 标签内部） 内联样式（在 HTML 元素内部） 优先级为： 内联样式（在 HTML 元素内部）拥有最高的优先权，这意味着它将优先于以下的样式声明：head 标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省值）。 2、css语法 几点值得注意的地方： 4、高效的CSS （1）使用外联样式代替内联样式和内部样式表 不推荐使用：p style=“color:red”/p 或者是：style type=“text/css” p{color:red;}/style (2)使用组选择器 h1,h2,h3 { color: green; } (3)使用继承 不推荐使用：td{font-size:12px;} p{font-size:12px;} li{font-size:12px;}… 应该这样写 body{font-size:12px;} 2、css语法 几点值得注意的地方： （4）使用简记属性 不推荐使用： margin-top:1px; margin-left:2px; margin-right:3px; margin- bottom:4px; 应该这样写 margin:1px 3px 4px 2px; 3、选择器 1、CSS 派生选择器 ul li{ font-weight:bold;} 定义ul内li 标签的样式 P span a{font-weight:bold;} 定义段落下a标签的样式 可以使用派生选择器给一个元素内的子元素定义样式。两个元素之间用空格表示。 3、选择器 2、id 选择器 id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。 id 选择器以 “#”