CSS3基础教程详细.pptVIP

2021/3/27 * (1) CSS定位属性 在网页上,利用HTML基本标签进行文字和图像的定位是一件很困难的事情。即使使用表格标签,也不能保证定位的精确,因为浏览器和操作平台的不同会使显示的结果发生变化。 而利用样式表的position属性,就可以精确地设定对象的位置,还能将各对象进行叠放处理。 语法: position:absolute|relative;left:值;top:值;[width:值];[height:值];[visibility:值];[z-index:值] 2021/3/27 * 说明: 1) position属性用于对象的定位,它的参数值有absolute和relative两种。 其中absolute表示绝对定位,绝对定位能精确设定对象在网页中的独立位置,而不考虑网页中其他对象的定位设置,在绝对定位中对象的位置是相对于浏览器窗口而言的。 而relative表示相对定位。它所定位的对象的位置是相对于不使用定位设置时该对象在文档中所分配的位置。即,相对定位的关键在于被定位的对象的位置是相对于它通常应在的位置而言的。如果停止使用相对定位,则文字的显示位置将恢复正常。 2) left属性用于设定对象距浏览器窗口左边的距离;top属性用于设定对象距离浏览器窗口顶部的距离。 2021/3/27 * 3) width属性用于设定对象的宽度。因为定位后的对象在网页上显示时仍然会从左到右一直显示,利用宽度属性就可以设定对字符向右显示的限制。宽度属性只在绝对定位时使用。 4) height属性用于设定对象的高度。高度和宽度的设置类似,只不过是在垂直方向上进行的。 5) visibility属性用于设定对象是否显示。这条属性对于被定位和未定位的对象都适用。 该属性的参数有三种: ? isible:使对象可以被看见 ? hidden:使对象被隐藏 ? inherit:对象被继承母体对象的可视性设置 6) z-index属性用于在网页上重叠文字和图像。当定位多个对象并将其重叠时,可以使用z-index来设定哪一个对象应出现在最上层。z-index参数值使用整数,用于绝对定位或相对定位了的对象,也可以给图像设定属性。 2021/3/27 * div{position:absolute;left:200px;top:40px;width:150px} 浏览器执行到这项规则时,它将文字块按照规则规定的效果显示,将段落的最大水平尺寸限制在150像素。 实例: h4{visibility:hidden} 控制用H4标识的对象不可见。 当一个对象被隐藏后,它仍然1要占据浏览器窗口中的原有空间。所以,如果将文字包围在一幅被隐藏的图像周围,那么,其显示效果将是文字包围着一块空白区域。 这条属性在编写脚本和增加网页的动态性方面很有用,比如可以使某段落或图像只在鼠标滑过时才显示。 2021/3/27 * (2) CSS定位方法 通过CSS的定位属性,可用来控制任何东西在网页上或是说在窗口中的位置。 当我们使用css定位属性的时候,主要把它用在div标签。当把文字,图像或其他的对象放在div中,它可称作为“div block”,或“div element”或“css-layer”,或干脆叫“layer”。而中文我们把它称作“层次”。所以以后看到这些名词的时候,就知道它们是指一段在div中的HTML。 使用div的方法跟使用其他标签的方法一样: div this is a div tag /div 2021/3/27 * 如果单独使用div而不加任何CSS定位属性,它在网页中的效果和使用p/p是一样的。 但当我们把css定位属性用到div中去后,就可以严格设定它的位置。首先我们需要给这个可以被css定位属性控制的div一个id或说是它的名字。比如说我们给下面这个div的名字是truck。给名字的目的是我们以后可以用JavaScript来控制它,比如说移动它或改变它的一些性质等。 div id=truck this is a truck /div 给层次取什么名字是随意的,名字可以是任何英文字母和数字,但第一个必须是字母有两种把CSS定位属性应用到div的方法。 2021/3/27 * 1．行间CSS 行间css是最常用的方法,它的基本语法为: div id =truck style=……… this is a truck /div 实例: div id=namestyle=position:absol