4css.pptVIP

显示三个DIV 三个DIV都显示了，接下来通过visibility和display属性来隐藏div2标记，看下这两个属性有什么区别 style type=text/css #div1{ width:300px;height:100px;background-color:red} #div2{ width:100px;height:30px;background-color:#dddddd;} #div3{ width:200px;height:50px;background-color:blue;} /style div id=div1 div id=div2 /div div id=div3 /div /div 使用visibility来隐藏表记 inherit : 默认值。继承父对象的可见性 。 visible : 对象可视 。 hidden : 对象隐藏 。此属性为隐藏的对象保留其占据的物理空间。 style type=text/css #div1{width:300px;height:100px;background-color:red} #div2{ width:100px;height:30px;background-color:#dddddd; visibility:hidden} #div3{ width:200px;height:50px;background-color:blue;} /style div id=div1 div id=div2 /div div id=div3 /div /div 隐藏块看不见 使用display来隐藏标记 none : 对象隐藏 。此属性不为被隐藏的对象保留其物理空间 style type=text/css #div1{ width:300px;height:100px;background-color:red} #div2{ width:100px;height:30px;background-color:#dddddd; display:none;} #div3{ width:200px;height:50px;background-color:blue;} /style div id=div1 div id=div2 /div div id=div3 /div /div 总结 掌握css嵌入的方法 掌握css的表示方法 掌握使用css统一控制页面 掌握CSS盒模型 掌握定位 掌握隐藏标记 练习及提问时间 * * * * * 学习目标 掌握css嵌入的方法 掌握css的表示方法 掌握使用css统一控制页面 掌握CSS盒模型 掌握定位 掌握隐藏标记 CSS简介 CSS：Cascading Style Sheet层叠样式表，简称样式表 来源 网页设计最初是用HTML标记来定义页面文档及格式，但这些标记不能满足更多的文档样式需求，为了解决这个问题，在1997年W3C颁布HTML4标准的同时也公布了有关样式表的第一个标准CSS1, 自CSS1的版本之后，又在1998年5月发布了CSS2版本，样式表得到了更多的充实。 作用 能够精确控制页面元素的字体样式、背景、排列方式等 简化网页的格式代码、加快下载显示速度、减少重复的工作量 注意：CSS需要IE4.0和Netscape 4.0以上的浏览器支持，有些效果需要更高版本的浏览器支持。有些CSS效果不能写有 !DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN /TR/html4/loose.dtd 层叠样式表的添加(1/4) 内部样式表 内部样式表是把样式表放到页面head区里用style标记定义： 例：head…… style type=text/css hr {color: sienna} p {margin-left: 20px} body {background-image:url(pic1.bmp)} 或body {background:url(pic1.bmp)} /style /head 可用来对所有body中出现的同标记进行格式定义，除非此标记已另行定义了格式。 层叠样式表的添加(2/4) 内嵌样式表 内嵌样式是混合在HTML标记里使用的，用这种方法，可以简单的对某个元素单独定义样式。 内嵌样式的使用是直接将在HTML标记里加入style参数。而style参数的内容就是CSS的属性和值，如下例： p style=color: sienna; margin-left: 20px