日期:2013-11-11  浏览次数:21047 次

四、款式表的定位

 CSS定位的"positon"属功用够使用两种方法定位HTML元素:绝对定位和绝对定位。所谓绝对定位是指允许元素在绝对于文档规划的原始位置上进行偏移;而绝对定位允许元素与原始的文档规划分离且任意定位。CSS的定位属性共有9个,分别是:

position、left、top、width、height、overflow、z-index和visibility position

positon的属性值有absolute、relative和static三个。当使用绝对定位元素absolute时,被定位元素是独立的,它与上下级元素都无关,完全独立于其他内容。当使用绝对定位relative时,该元素对于上一级元素的位置进行规划定位;通过绝对定位,使用脚本言语就能实现动画效果了。

left、top

CSS在格式化文档时,是将对象放置在一个个的容器里,再进行格式化;这个容器的左上角就是定位的参考点。left值就是容器的左上顶点到上级左边界的距离;"top"就是容器左上顶点到上级元素上边界的距离。

width、height

适用于绝对定位的元素,"width"和"height"定义了元素所占空间的大小。可用百分比或数字定义。

overflow

此属性定义了元素的内容超出容器的宽度和高度后,浏览器怎样处理。其属性值有四个,分别是:

visible:无论定义的width和height是多少,其超出部分都无条件显示。

hidden:超出定义的容器的宽度和高度部分将被剪切。

scroll:浏览器将提供一组滚屏工具。

auto:依据浏览器的不同而不同,通常会提供一组滚屏工具。

五、款式表的引入

  了解了CSS的定义方式,下面将具体引见如何在HTML中引入CSS的各种方法。

  1、使用<LINK> 链接外部款式表单;例如:

<HEAD>

<TITLE>My Stylesheet</TITLE>

<LINK REL=stylesheet HREF="mystyles.css" TYPE="text/css">

</HEAD>

使用CSS文件的一个最大好处就是,你可以在每个HTML文件中援用这个文件,从而可使整个站点的HMTL文件在风格上保持分歧,避免反复的CSS属性设置;另外,当你遇上改版或作某些严重调整要对风格进行修正时,可直接修正这个CSS文件,当然了,HTML文件不断援用最近更新的款式单,而不必每个每个HTML文件进行整,你说是不是挺方便的呀!特别提示一下,如果你想建立本人的网站,这方面不可忽视哟,如果在建站之初没有网站风格的统一规划并构成CSS文件,当前内容一多,想调整一下风格会累死你的。

  2、把定义语句放在<HEAD>和<BODY>标签之间,这种风格定义产生作用的范围也只局限于本文件,其格式如下(套用上边的CSS)

<Style Type="text/css">

 <!--

  td{ color: green; font-size: 15px; font-family: Arial }

 -->

</Style>

  3、使用CSS"@import"导入款式表单;例如:

<STYLE TYPE="text/css">

<!--

@import url(mystyles.css);

-->

</STYLE>

  4、在<BODY>内部元素中使用"STYLE"标记来定义;例如:

<p style="color: red; font-size: 20px; font-family: Arial">我的款式表</p>

5、直接插入式

  直接插入式很简单,只是在每个HTML标志后书写CSS属性就可以了。这种方式很直接,如我们想规定一个Table标志中的字为红色,字体大小为10pt,则可书写如下:

  <Table style="color:red;font-size:10pt">

  这种方式次要用于对具体的标志做具体的调整,其作用的范围只限于本标志。