第三章css和div_任奇.pptVIP

第三章:div+css课程讲解;第3章 DIV + CSS布局基础;3.1 CSS的基本语法; CSS语法中最基本的语法是选择器的概念和选择器的声明。正确使用CSS选择器能为建立标准的XHTML页面带来很多的好处。本章还将讲述CSS的继承和层叠，理解和掌握这些概念是使用CSS样式表的重要基础。;1 选择器;（1）标签选择器;（2）类选择器;（3）ID选择器;（4）全局选择器;（5）组合选择器 ;（6）继承选择器 ;（7）伪类;2. 声明;（1）多重声明;（2）集体声明;3. CSS的层叠原理;（1）CSS样式来源;（2）选择器的优先级;（2）选择器的优先级;（3）!important语句;（4）顺序优先级;通常定义样式有4种方法： 1）、内联定义样式：内联定义样式是混合在HTML标记里使用的样式，即使用标记的Style属性定义的适用于该标记的样式，例如： TD style=“background-color:green;font-size:12px; line-height:20px;”样式实例/TD 就是定义表格的单元格背景为绿色，单元格字体大小为12px，行距为20px。 ;2）、定义内部样式块对象：定义内部样式快就是针对页面中某些公共元素的样式比较类似，如果使用内联定义方法逐个元素地定义比较繁琐，而且维护麻烦，此时就可以在网页的html和body标记之间插入一个style…/style块对象来统一定义，页面运行时会自动引用。例如： head style type=“text/css” body {color:#333333;background-mage:url(“image/bg.gif”)} /style /head;3）、导入外部样式表：导入外部样式表是指在HTML文件头部的style…/style标记之间，利用CSS的@import声明引入外部样式表。例如： head style type=text/css !--@import stylefile/style2.css;-- h2 {color:green} /style 注意：导入外部样式表必须在样式表的开始部分，即在其他内部样式表上面。 ;4）、链入外部样式表：链入外部样式表是指在HTML文件的头信息标记head…/head之间，利用link标记连接到外部样式表文件。例如： head runat=server link href=stylefile/style1.css rel=stylesheet type=text/css / /head 一个外部样式表文件可以应用于多个页面。当你改变这个样式表文件时，所有页面的样式都随之而改变。在制作大量相同样式页面的网站时，非常有用，不仅减少了重复的工作量，而且有利于以后的修改、编辑。 ;2、样式的优先级 依照后定义的优先原则，所以优先级最高的是内嵌样式，内部样式表高于导入外部样式表，链入的外部样式表和内部样式表之间是最后定义的优先级高。 ;4.实例：简单的竖型菜单;3.2 DIV+CSS布局基础;1.DIV+CSS布局的流程;2.了解盒模型;（1）div标签的盒模型例子;（2）基本盒模型;（3）边距;（4）补白;（5）边框;3. 页面元素的布局;(1) 块级元素与行内元素;(2) CSS布局方式：常规流;(3) CSS布局方式：浮动;1 两个元素的浮动应用;2 多个元素的浮动应用;3 清除浮动;（4）CSS布局方式：相对定位;1 单个元素的相对定位;2 两个元素的相对定位;（5）CSS布局方式：绝对定位;1 单个元素的绝对定位;2 两个元素的绝对定位