html中div标签的使用方法_html/css_WEB-ITnose

程序员文章站 2022-03-29 19:10:16

...

CSS是DHTML的基础，CSS用于设定HTML元素在页面上的显示风格，而CSS-P则是CSS的一个扩展，它可用来控制HTML元素在网页上或者说在窗口的位置。下面的两个链接提供了CSS和CSS－P详尽的技术手册：

　　 W3C CSS-Positioning

　　 Builder.com's CSS Guide

　　在本课程中，将会反复地对CSS进行介绍。

　　 使用DIV标签

　　使用CSS－P，主要依靠标签来实现，当你把HTML内容放在标签里时，可以称它为:“DIV块”, “DIV 元素”, “CSS-layer”,或者简单的称之为“layer”。

　　使用DIV标签的方法和其他标签没有什么两样：

　　HTML内容

　　纯粹使用标签而不加任何CSS内容，其效果与用是一样的。

　　但当把CSS放进DIV标签中以后，我们就可以指定HMTL元素显示在屏幕上的具体位置，可以在某一位置上画出方形或线，或者指定文字在某一个块中如何显示。首先要做的，是给这个DIV元素（即层）加上一个唯一的ID标识（ID的作用类似于为这个层起个名字）。

　　加一个ID号

　　层的ID可以随意设定，可由字母、数字和下划线组成，但必须以字母起头。

　　你可以用以下两种方法来实现CSS：

　　嵌入式CSS:

　　嵌入式是最常用的方法，

　　内嵌式CSS

　　外部样式表：

　　使用外部引入方法的结果是一样的，只不过它在书写上要相应的复杂一点。

#abc {this is style}

　　-- >

　　引用外部样式表

　　跨浏览器CSS属性：

　　我们的目标是使Netscape和IE两者都能对所写出的DHTML顺利工作，我们对书写的CSS属性有些限制。一般来说，以下属性是由W3C进行过定义的标准。

　　 position

　　定义如何放置DIV，"relative"是指DIV与其他HTML元素的相对位置；"absolute"则是指DIV在窗口中的绝对定位。这一课中我们主要是讲“absolute”。

　　 left

　　左边距（相对于窗口的像素宽）

　　 top

　　顶部边距

　　 width

　　层宽

　　 height

　　层高

　　所有DIV中的HTML元素都在这个限定的宽与高里面。

　　 clip

　　为DIV定义可见部份，格式为：clip(top,right,bottom,left)

　　 visibility

　　隐藏或显示DIV块，它的值为"visible", "hidden", "inherit"（默认值）。

　　 z-index

　　 DIV在页面上显示的层次。

　　 background-color

　　 DIV的背景色。在Netscape中该属性显示为文字的背景色。

　　 layer-background-color

　　 Netscape浏览器中DIV的背景色。

　　 background-image

　　 DIV的背景图，在Netscape中该属性显示为文字下面的背景图像。

　　 layer-background-image

　　 Netscape中DIV的背景图像。

　　 CSS的语法与HTML有所不同，使用“：”来分离属性和值，用“；”来分开各种不同的属性。

　　position: absolute;

left: 50px;

top: 100px;

width: 200px;

height: 100px;

clip: rect(0px 200px 100px 0px);

visiblity: visible;

z-index: 1;

background-color:#FF0000;

layer-background-color:#FF0000;

background-image:URL(filename.gif);

layer-background-image:URL(filename.gif);

　　在设置CSS属性时你有较大的灵活性。你不必定义所有的CSS属性，你可以把所要定义的属性写在一行里，也可以分开几行来写，或是在每个属性之间空开一段距离。大小的值为pixel（像素），在CSS中可以简写为“px”。

　　内部CSS例子：

　　　　　　　　　　　left:50px; top:100px; width:200px; height:100px;

　　　　　　　　　　　clip:rect(0px 200px 100px 0px);

　　　　　　　　　　　visiblity:visible;

　　　　　　　　　　　z-index:1;" >

　　外部CSS例子：

#abc { position: absolute;

　　　left:50px; top:100px; width:200px; height:100px;

　　　 clip:rect(0px 200px 100px 0px);

　　　 visiblity:visible;

　　　 z-index:1;}

-- >

;*******************************************　

称为区隔标记。作用：设定字、画、表格等的摆放位置。当你把文字，图象，或其他的放在 DIV 中，它可称作为“DIV block”，或“DIV element”或“CSS-layer”，或干脆叫“layer”。而中文我们把它称作“层次”。所以当你以后看到这些名词的时候，你就知道它们是指一段在 DIV 中的 HTML。

应用于 Style Sheet（式样表）方面会更显威力，它最终目的是给设计者另一种组织能力，有 Class ; Style ; title ; ID 等属性，将会于【Style Sheet】一节才作详述，这处只介绍一个属性设定。

以

为例：

align="center"

可选值：center ; left ; right 。决定字、画、表格等居中、靠左或靠右。

的作用和居中标记一样，前者是由 HTML3.0 开始的标准，后者是通用己久的标示法。

CSS单元的位置和层次-div标签

　　我们都知道，在网页上利用HTML定位文字和图象是一件“令人心痛”的事情。我们必须使用表格标签和隐式GIF图象，即使这样也不能保证定位的精确，因为浏览器和操作平台的不同会使显示的结果发生变化。

　　而CSS能使你看到希望的曙光。利用今天我们即将学到的CSS属性，你可以精确地设定要素的位置，还能将定位的要素叠放在彼此之上，还有...还有......你自己慢慢看吧！

　　Cascading Style Sheets（CSS）是 DHTML 的基础。CSS 用来设定你网页上的元素是如何展示的。Cascading Style Sheets Positioning（CSS-P）是 CSS 的一个扩展，它可用来控制任何东西在网页上或是说在窗口中的位置。请你记住这两个名词：CSS 和 CSS－P。下面四个英文网址提供了详细的关于 CSS 和 CSS-P 的文件和解释。

　● 1．使用 DIV 标签（div）

　　当我们使用 CSS-P 的时候，我们主要把它用在 DIV（division）tag 上。当你把文字，图象，或其他的放在 DIV 中，它可称作为“DIV block”，或“DIV element”或“CSS-layer”，或干脆叫“layer”。而中文我们把它称作“层次”。所以当你以后看到这些名词的时候，你就知道它们是指一段在 DIV 中的 HTML。

　　使用 DIV 的方法跟使用其他 tag 的方法一样：

This is a DIV tag .

　　如果单独使用 DIV 而不加任何 CSS-P, 那么它在网页中的效果和使用

是一样的。

　　但当我们把 CSS-P 用到 DIV 中去以后，我么就可以严格设定它的位置。首先我们需要给这个可以被 CSS-P 控制的 DIV 一个 ID 或说是它的名字。比如说我们给下面这个 DIV 的名字是 truck。给名字的目的是我们以后可用JavaScript 来控制它，比如说移动它或改变它的一些性质等等。

　　　　This is a truck

　　给层次取什么名字是随意的，名字可以是任何英文字母和数字，但第一个必须是字母。有两种把 CSS-P 应用到 DIV 的方法。

　　Inline CSS：Inline 是最常用的方法。

　　　　This is a truck .

　　External STYLE tag：使用 External 方法的结果是一样的。我们会在以后的课程里再详细解释这种方法。现在我们主要讨论Inline 方法。请注意在 External 方法里，在 STYLE 里的 ID 和 DIV 里的关系。

This is a truck .

　　Cross-Browser CSS 性质：

　　我们这个课程的主要目的是让你写出的网页在 NS4 和 IE4 上都能工作，所以我们主要讨论那些对俩者都通用的性质。下面这些性质符合由 W3C 给出的标准。

position　决定 DIV tag 是如何放置的。“relative”意思是DIV的位置是相对于其他 tag 的，而“absolute”是说 DIV tag 的位置是相对于它所在的窗口。

left　相对于窗口左边的位置

top　相对于窗口上边的位置

width　DIV tag 的宽度。所有在 DIV 里的文字或html都在里面。

height　DIV tag 的高度。这个性质很少用除非你想 Clip 层次。

clip　给出 layer 的 clipping（可看的见的）部分。Clip 可使得 DIV 显示为一个可以定义的很准确的方块。你可以用以下的四个值来给出这个方块的在 DIV 位置和大小。

clip:rect(top,right,bottom,left);

visibility　隐蔽或展现DIV 根据它的值“visible”，“hidden”，“inherit”。

z-index　DIV tag 的立体位置。值越大 DIV 的位置越高。

background-color　DIV 背景的颜色。

layer-background-color　Netscape 的 DIV 背景颜色。

background-image　DIV 的背景图象。

layer-background-image　Netscape 的 DIV 的背景图象。

　● 2．绝对定位和相对定位（position）

　　绝对定位：

　　定位属性将是网虫们打开幸福之门的钥匙：

　　H4 { position: absolute; left: 100px; top: 43px }

　　这项CSS规则让浏览器将

的起始位置精确地定在距离浏览器左边100象素，距离其顶部43象素的位置。注意这里唯一设置了的是左边和顶部，也就说，文字将从左到右，从上到下载入浏览窗口。

　　左边和顶部属性很直观，左边（left）设定要素距浏览器窗口左边的距离，顶部（top）设定距离浏览器窗口顶部的距离。设定这些距离时，你可以使用所学过的各种度单位或比例值。使用比例值时，比例值的是相对于母体要素的尺寸。

　　你可以定位什么呢？任何东西！段落、单词、GIF和JPEG图象、QUICKTIME电影等等。

　　相对定位：

　　绝对定位使你能精确地定位要素在页面的独立位置，而不考虑页面其它要素的定位设置。相对定位指你所定位的要素的位置相对于在文件中所分配的位置。例：

　　I { position: relative; left: 40px; top: 10px }

　　相对定位的关键在于定位了的要素的位置是相对于它通常应在的位置进行定位。相对定位单元出现在普通的静态定位单元的行间，定位时没有把自己和静态定位单元完全分开。如果你停止使用相对定位，则文字的显示位置将恢复正常。使用相对定位时要小心，否则容易将页面弄得非常乱。

　　除了相对定位和绝对定位，你还可以使用static（静止）参数值。Static 是 position 特性的缺省值。它的使用方法同普通HTML中的定位方法，不能附加特殊的定位设置。也就是说，除了边距特性，或通过使用 float 特性来浮动单元可影响单元的定位外，其它均不可以。

　● 3．定位单元的控制（width、height、visiblility）

　　除了控制定位单元的左上角位置，你还可以控制单元的宽度和高度，及单元在页面的可视性。

　　宽度：定位了的要素在页面上显示时仍然会从左到右一直显示。利用宽度属性就可以设定字符向右流动的限制，即设定要素的宽度。

　　DIV { position: absolute; left: 200px; top: 40px; width: 150px }

　　浏览器接到这项规则时，它将文字按照规则规定的效果显示，还将段落的最大水平尺寸限制在150象素。

　　宽度属性只适用于绝对定位的要素。你可以使用我们学过的任何一种长度单位，或使用比例值设定宽度，比例值指相对于母体要素的比例。IE 4中，这项属性还可用于图象。你可以通过宽度设置人为地拉宽或压缩图象。

　　高度：理论上讲，高度应该和宽度的设置类似，只不过是在垂直方向上：

　　DIV { position: absolute; left: 200px; top: 40px; height: 150px }

　　这里我用了“理论上讲”，因为有些浏览器不支持高度属性。

　　可视性：利用CSS，你可以隐藏要素，使其在页面上看不见。这条属性对于定位了的和未定位的要素都适用。

　　H4 { visibility: hidden }

　　选项：

visible 使要素可以被看见

hidden 使要素被隐藏

inherit 指它将继承母体要素的可视性设置。

　　值 inherit 为缺省值。这使单元继承父单元的可见性。所以，如果某一段是隐藏的，则它包含的任何行间单元也都被隐藏。这一继承性可被明确指定的可见性取代。例如，段内的 EM 单元被指定为可见，这时如果该段被隐藏，则段内的所有其它内容都将消失，而唯有 EM 单元中的文本是可见的。

;***************************************************

三、样式表的放置

作者 : 阿文

　　样式表放在不同的地方，产生作用的范围也不同。大致来说，样式表分为内联样式表和外联样式表，即有页面内放置、外部引用、外部导入三种方式。

　　 1 、内联样式表

　　我们前一课所举的例子，实际上就是一个内联样式表，把样式表规则放在和的中间，从而使样式表对整个当前 HTML 页面产生作用。

　　内联样式表还包括一种直接插入方式，即单独指定 HMTL 页面中某一个标志，规定其风格样式，可以写为：

　　定义该表格内的字符大小为 10pt ，颜色为蓝色。

　　 2 、外部样式表

　　编制一个网站的分类页面，其风格往往是相同的或说是类似的，每次都在和中插入相同的繁琐复杂的样式表规则，显然不是我们的愿望。

　　写一个样式表，以期实现于各风格相同的不同页面，这一点即可借助于引入外部样式表来实现。并且当外部样式表被更改时，各引用该样式表的 HTML 页面风格也随之发生变化，而不需要手工一个个去更改。

　　外部样式表是指建立一个完全独立的文本文件，其扩展名为 .css ，文件内容则输入样式表信息，除去任何相关的 HTML 语言。

例如在外部样式表中输入：

body { line-height: 130pt}

H1,H2,H3,H4,H5,H6 {

color: red;

text-decoration: underline;

font-family: " 黑体 "

b {

font-style: italic;

color: #FF3333;

text-decoration: underline

　　我们看到，只是少了和注释标记，其余书写外部样式表没有任何改变。输入完毕，保存它为 example.css 。

　　有两种办法可以实现引用外部样式表。

　　（一）使用标记链接外部样式表

　　用以下语句来实现外部样式表的链接：

　　 HREF 中应包含路径信息，这里所指是该样式表文件与 HTML 文档在同一目录下。

　　一个 HTML 文档中可以引用多个外部样式表，例如：

　　首先链接的 example.css 作为该文档缺省样式表，当样式定义产生冲突时，应当首先满足前者。

　　（二）使用 @IMPORT 导入样式表信息

　　使用 @import 命令用以把外部样式表信息导入页面中，它是存在于在和标记中的。例如：

@import "example.css";

@import "style/other.css";

　　显然，这个方法也可以同时引用多个外部样式表信息，样式表产生作用的优先级按照导入的先后顺序来设定。

　　这三种方法可以混合使用，即能够在一个页面中，同时使用这三种方法，不过，当样式表信息规则一多，就比较容易产生冲突。比如在引用的数个样式表信息中都有关于对 H1 标题的设定，那么以哪一个为主呢？这时就看哪一个样式表被引用在前，它就是具有第一优先权的。因此我们在处理复杂的样式表信息时，要充分考虑到样式表冲突这一可能性，较好的解决矛盾，使之相互协调匹配。