网页样式表轻松入门

雪生 
2001年 36期

　　网页样式表（CSS）能帮我们快速准确地控制网页中类各类元素，善用它将使我们制作主页更加轻松。虽然有的网页制作工具如Dreamweaver能非常直观地编辑CSS，但有时我们仍然需要直接修改，掌握它的编写就有必要了。先让我们来看两个例子：
　　　　1．把按钮的背景由灰色变成黄色，下面是代码：
　　　　< form method="POST"＞
　　　　< input type="button" value="按钮" name="B1"
　　　　style="background-color： rgb（255，255，0）"＞
　　　　< /p＞
　　　　< /form＞
　　　　“Form”就是表单的标签，下面的是说明按钮的类型，这里为普通的命令按钮；“Style”则是说明这里采用了一个样式表，而“Background-color”是用来声明按钮的背景颜色属性的；后面的RGB（255，255，0）则给了它的属性值。
　　　　2．把按钮的文字的颜色变成红色，字体变成楷体，代码如下：
　　　　< form method="POST"＞
　　　　< input type="button" value="按钮" name="B1"
　　　　style="background-color：rgb（255，0，0）；font-family：楷体＿GB2312； color： rgb（255，0，0）"＞</p＞
　　　　< /form＞
　　　　大家看一下这段代码中多了“Font-family”和“Color”两个属性。分别是字体属性和颜色属性，这里将它们的值分别设为“楷体＿GB2312”和“RGB（255，0，0）”。
　　　　怎么样？通过上面这两个例子了解了一些基础知道，现在我们进入正题。什么叫样式表呢？简单地讲，在同一个网站只需要提供一份样式表，然后在所有页都可以使用它。样式表单共分为三种：
　　　　外部样式表：它是一个以CSS为后缀名的文件，相当于一个模版，设置好以后只需要在网页内部引用它，就能够使引用的网页具有相同的格式。
　　　　内嵌式样式表：它一般在申明，它只对本网页起作用，同时如果你已经使用了外部样式表单，那么它将被内嵌式的网页样式表屏蔽。
　　　　内联式样式表：用于一段文字，一个表格，或者是一幅图形。在前面两个例子中，我们用的就是这种样式表单，请注意，它通常是接在一个我们比较熟悉的HTML标签之后，比如前文的Input标签，以Style开头，后面跟着一些属性和属性值。并且借助它们来准确地控制这个标签！属性与属性值之间以冒号隔开，属性与属性之间用分号隔开。通常结构如下：
　　　　好了，有了以上的理论知识，我们再来看看这个略为复杂的例子：
　　　　< form method="POST"＞
　　　　< input type="button" value="按钮" name="B1"
　　　　style="font-family： 隶书；font-size： 9pt； background-image： url
　　　　（’file：///D：/Inetpub/wwwroot/asp/wwwboad/IMAGES/asp400．jpg’）；border-left： medium ridge rgb（128，0，0）；border-right： medium none rgb（128，0，128）； border-top： medium none rgb（0，255，0）； border-bottom： medium ridge rgb（255，0，0）"＞</p＞
　　　　< /form＞
　　　　形式和我前面讲的是一样的，只不过多了几种属性，首先Font-family: 隶书，Font-size: 9pt，用来说明按钮文字是9PT大小的隶书，其次按钮的背景是一幅图画，用了一个Background-image属性。还用了一个“Border-left”属性说明按钮的左边框是隆起的，边框线是深红色的，厚度为中等。其余的就请大家以此类推了！
　　
　　
　　 
 