网页样式表轻松入门

Author: 雪生 Date: 2001年 36期

?牐犕逞奖恚–SS)能帮我们快速准确地控制网页中类各类元素,善用它将使我们制作主页更加轻松。虽然有的网页制作工具如Dreamweaver能非常直观地编辑CSS,但有时我们仍然需要直接修改,掌握它的编写就有必要了。先让我们来看两个例子:
  ?牐?1.把按钮的背景由灰色变成黄色,下面是代码:
  ?牐?< form method="POST">
  ?牐?< input type="button" value="按钮" name="B1"
  ?牐爏tyle="background-color: rgb(255,255,0)">
  ?牐?< /p>
  ?牐?< /form>
  ?牐牎癋orm”就是表单的标签,下面的是说明按钮的类型,这里为普通的命令按钮;“Style”则是说明这里采用了一个样式表,而“Background-color”是用来声明按钮的背景颜色属性的;后面的RGB(255,255,0)则给了它的属性值。
  ?牐?2.把按钮的文字的颜色变成红色,字体变成楷体,代码如下:
  ?牐?< form method="POST">
  ?牐?< input type="button" value="按钮" name="B1"
  ?牐爏tyle="background-color:rgb(255,0,0);font-family:楷体_GB2312; color: rgb(255,0,0)"></p>
  ?牐?< /form>
  ?牐牬蠹铱匆幌抡舛未胫卸嗔恕癋ont-family”和“Color”两个属性。分别是字体属性和颜色属性,这里将它们的值分别设为“楷体_GB2312”和“RGB(255,0,0)”。
  ?牐犜趺囱客ü厦嬲饬礁隼恿私饬艘恍┗≈溃衷谖颐墙胝狻J裁唇醒奖砟兀考虻サ亟玻谕桓鐾局恍枰峁┮环菅奖恚缓笤谒幸扯伎梢允褂盟Q奖淼ス卜治郑?
  ?牐犕獠垦奖恚核且桓鲆訡SS为后缀名的文件,相当于一个模版,设置好以后只需要在网页内部引用它,就能够使引用的网页具有相同的格式。
  ?牐犇谇妒窖奖恚核话阍谏昝鳎欢员就称鹱饔茫比绻阋丫褂昧送獠垦奖淼ィ敲此荒谇妒降耐逞奖砥帘巍?
  ?牐犇诹窖奖恚河糜谝欢挝淖郑桓霰砀瘢蛘呤且环夹巍T谇懊媪礁隼又校颐怯玫木褪钦庵盅奖淼ィ胱⒁猓ǔJ墙釉谝桓鑫颐潜冉鲜煜さ腍TML标签之后,比如前文的Input标签,以Style开头,后面跟着一些属性和属性值。并且借助它们来准确地控制这个标签!属性与属性值之间以冒号隔开,属性与属性之间用分号隔开。通常结构如下:
  ?牐牶昧耍辛艘陨系睦砺壑叮颐窃倮纯纯凑飧雎晕丛拥睦樱?
  ?牐?< form method="POST">
  ?牐?< input type="button" value="按钮" name="B1"
  ?牐爏tyle="font-family: 隶书?牐籪ont-size: 9pt; background-image: url
  ?牐牐ā痜ile:///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>
  ?牐犘问胶臀仪懊娼驳氖且谎模徊还嗔思钢质粜裕紫菷ont-family: 隶书,Font-size: 9pt,用来说明按钮文字是9PT大小的隶书,其次按钮的背景是一幅图画,用了一个Background-image属性。还用了一个“Border-left”属性说明按钮的左边框是隆起的,边框线是深红色的,厚度为中等。其余的就请大家以此类推了!