CSS培训课程:CSS-P:CCS和位置设定
来源:学生作业帮助网 编辑:作业帮 时间:2024/05/08 12:06:54 CSS
而这里我只是给出你大概的轮廓使得你可以了解它们以及看懂以后 的课程. 我们会在以后的课程里再回过头来仔细讨论 CSS 的.
使用 DIV Tags
当我们使用 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
我们下面将会告诉你都有哪些 style 和如果把它们写到 DIV 里。
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 的位置是相对于它 所在的窗口. 这里主要讨论 absolute.
- left
- 相对于窗口左边的位置 (pixels)
- top
- 相对于窗口上边的位置 (pixels)
- 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 的背景图象。
CSS 的语法是用冒号来分开性质和它的值, 用半分号来分开性质:
position: absolute;left: 50px;top: 100px;width: 200px;height: 100px;clip: rect(0,200,100,0);visiblity: visible;z-index: 1;background-color:#FF0000;layer-background-color:#FF0000;background-image:URL(filename.gif);layer-background-image:URL(filename.gif);
CSS 的格式比较活。 你不必定义所有的性质。 空格可用在定义中 间使得原程序比较清楚。
Inline Example:
点这里 看上面这个例子.">
External Example:
小结
这一节我们介绍了如何定义一个 DIV tag, 也就是我们所说的 layer 或说是层次. 以及如何用 CCS 来给出它的性质。请你自己先定义 几个 DIV tag 然后展示在浏览器上, 看看到底是怎么意思。
CSS