网页设计中CSS的链接样式研究

第１０卷第８期　

ＳＯｆｔＷａｒｅ　ＧＵｉｄｅ　

Ｖｏｌ　ｌ０ＮＯ．８　

Ａｕｇ　２０ｌ１　

网页设计中ＣＳＳ的链接样式研究　

杨　静　

（江苏联合职业技术学院徐州财经分院，江苏徐州２２１　００８）　

摘　要：ＣＳＳ是一种设计网页样式的工具。借助ＣＳＳ强大功能，网页可以在丰富的想象力下变得十分丰富多彩，更　

加赏心悦目。介绍了ＣＳＳ的基础知识，重点总结了关于链接的样式应用技巧。　

关键词：网页设计；ＣＳＳ；链接　

中图分类号：ＴＰ３９３．０９　文献标识码：Ａ　文章编号：１６７２—７８００（２０１１）０８—０１２５　Ｏ３　

线、固定背景图像等ＨＴＭＩ　无法完成的样式表现的效果；　

可以灵活并更好地控制网页外观，从精确布局到特定的字　

体样式。　

笔者从事《网贞设计‘与制作》类课程教学多年，从学生　

的反映和自身教学的感觉来看，在教学过程中学生对于　

１．２　ＣＳＳ样式的作用　

①可以更加灵活地控制网贞中的文本字体、文本颜色、　

文本大小、文本间距、显示风格及显示位置；②可以灵活地　

ＣＳＳ尤其是链接的ＣＳＳ的理解总是不太好，应用上更是　

问题多多。为此，整理此文希望能对学习着有所帮助。　

没置一个文本块的行高、缩进；③可以为元素设计多种外观　

的边框风格；④可以制作多种多样的连接效果；⑤可以方便　

地为网页中的任何元素设置不同的背景颜色和背景冈片；　

⑥可以精确的定位网页中各元素的位置，更加规范、美观，　

１　ＣＳＳ的基本概念　

ｉ。ｌ　ＣＳＳ的定义　

轻松的控制页面的布局；⑦口『以与脚本语吉‘相结合，利用　

ＣＳＳ滤镜，使网页中的元素产生各种动态效果；⑧可以规　

范、简洁的Ｈ，ｒＭＩ　语言格式，一定程度上缩小文件大小，使　

ＣＳＳ是ｃａｓｃａｄｉｎｇ　ｓｔｙｌｅ　ｓｈｅｅｔ的缩写，译作“层叠样式　

表”，是用于（增强）控制网页样式并允许将样式信息与网　

页内容分离的一种标记性语言。使用样式表呵以弥补　

ＨＴＭＩ　语言的缺陷，实现调整字间距、行间距、取消下划　

页而下载速度加快；⑨可以快速统一多个网页的风格，使网　

页格式同时更新；⑩可以兼容不同浏览器。　

元素（如圆角按钮等）的功能，不但增加了网页制作的周期　

所示的按钮图标效果　

支持ＣＳＳ３．０标准的主流浏览器的显示效果如下　

（；ｏｏｇｌ　ｈ㈤ｍ。１　２．０＆。Ｆｉ　。Ｆｏ　４．０：　

ＩＥ９．０：　

与成本，同时不利于页面的加载速度；采用ＣＳＳ　３．０技术　

通过相关语句实现传统ＣＳＳ技术的功能，在ＩＥ浏览器技　

术允许的情况下，在ＣＳＳ中添加少许的代码就能使网页　

拥有简单的样式和较好的显示效果。　

参考文献：　

［Ｉ］　陆凌牛．Ｉ｛　ＦＭＩ　５与ＣＳＳ３权威指南ｆ　Ｍ］．北京：机械工业出版社，　

２０１Ｌ　

对于不支持ＣＳＳ３．０标准的浏览器效果如下　

ＩＥ６　８　ＩＥ７　Ｂ．ＩＥ　８：　

以上实验可以看出在支持ＣＳＳ３．０技术的浏览器下，　

按钮效果是相当的精致漂亮的，存不支持ＣＳＳ３．０标准的　

浏览器下按钮效果不能很好的表现按钮圆滑的效果。　

［２］Ｍｉｃｈａｅｌ　ｌ｛ｏｗｅ　精通ＣＳＳ与ＨＴＭＩ　设计模式［Ｍ］．北京：人民邮　

电出版社，２００８．　

ｆ责任编辑：杜能钢）　

３　结束语　

根据传统的ＣＳＳ规范必须要借助于图片来实现网贞　

作者简介：杨静（１　９７９一），女，江苏大丰人，硕士，江苏联合职业技术学院徐州财经分院讲师，研究方向为数据库技术、网站开发。　

软件导刊　２０１１正　

１．３　ＣＳＳ的工作方式　

可以用以下３种方式将样式表加入网页：　

（１）链人外部样式表文件。先建立外部样式表文件（．　

ｃｓｓ），然后使用ＨＴＭＬ的ｌｉｎｋ对象。示例如下：　

＜ｈｅａｄ＞　

＜ｔｉｔｌｅ＞文档标题＜／ｔｉｔｌｅ￣　

＜ｌｉｎｋ　ｒｅｌ—ｓｔｙｌｅｓｈｅｅｔ　ｈｒｅｆ＝’ｈｔｔｐｔｆ　ｆ　．ｄｈｔｍｌｅｔ．　

ｃｏｍ／ｄｈｔｍｌｅｔ．ＣＳＳ”ｔｙｐｅ一”ｔｅｘｔ／ｃｓｓ”＞＜／ｈｅａｄ＞　

（２）定义内部样式块对象。在ＨＴＭＩ　文档的＜　

ＨＥＡＤ＞和＜／ＨＥＡＤ＞标记之间插入一个＜ＳＴＹＩ　Ｅ　

＞．．．＜／ｓＴＹＬＥ＞块对象。示例如下：　

＜ｈｅａｄ＞　・　

＜ｔｉｔｌｅ＞内部样式表＜／ｔｉｔｌｅ＞　

＜ｓｔｙｌｅ　ｔｙｐｅ一”ｔｅｘｔ／ｃｓｓ”＞　

＜！一一　

＃Ｔｏｐ｛Ｂａｃｋｇｒｏｕｎｄ：＃００ＦＦ００；ｆｏｎｔ：１Ｏｐｔ”Ａｒｉａｌ”｝　

Ｂｏｄｙ，ｔｄ，ｉｎｐｕｔ｛ｆｏｎｔ：１５ｐｔ”Ａｒｉａｌ”；ｆｏｎｔ—ｗｅｉｇｈｔ：　

ｂｏｌｄ；ｃｏｌｏｒ：ｍａｒｏｏｎ｝　

．

ｓｔｙｌｅ１｛ｆｏｎｔ：１３ｐｔ”Ａｒｉａｌ”；ｆｏｎｔ—ｗｅｉｇｈｔ：ｂｏｌｄ；ｃｏｌ—　

ｏｒ：ｂｌｕｅ｝　

．

ｓｔｙｌｅ２｛ｆｏｎｔ：１０ｐｔ“Ａｒｉａｌ”；ｃｏｌｏｒ：ｂｌａｃｋ）　

＞　

＜／ｓｔｙｌｅ＞　

＜／ｈｅａｄ＞　

（３）内嵌样式定义。在对象的标记内使用对象的　

ｓｔｙｌｅ属性定义适用其的样式表属性。示例如下：＜ｐ　ｓｔｙｌｅ　

一

”ｆｏｎｔ：１０ｐｔ”Ａｒｉａｌ”；ｃｏｌｏｒ：ｂｌａｃｋ”＞文字＜ｐ＞　

１．４　ＣＳＳ语法　

ＣＳＳ的定义是由３个部分构成：标识符｛属性：属性　

值；属性：属性值．．．・．｝。其中，“标识符”可以使ＨＴＭＬ的　

标记，如Ｐ、ｂｏｄｙ和ａ等。“属性”是那些将要被修改的元　

素属性，如ｃｏｌｏｒ。“属性值”是给属性指定的具体值，例如　

给ｃｏｌｏｒ的值可以是ｒｅｄ，＃ＦＦＦＦＦＦ等。　

２　ＣＳＳ的应用及常见链接样式问题汇总　

那么在设计和制作网页的时候，我们该如何使用ＣＳＳ　

样式呢？下面我通过问答的方式来将平时教学过程中学　

生常问的实际需求和遇到的实际问题进行一下总结。　

问题１：ＣＳＳ在网页制作中一般有３种方式的用法，　

那么具体在使用时该采用哪种用法？　

解答：当有多个网页都要用到的相同的ＣＳＳ，一般采　

用外部样式文件的方式，这样网页的代码大大减少，修改　

起来非常方便；只在单个网页中使用的ＣＳＳ，一般采用内　

部样式的试，在网页文档头部写入ＣＳＳ；只在一个网页的　

一

、

两个地方才用到的ＣＳＳ，一般采用内嵌样式直接在行　

内插入。　

问题２：ＣＳＳ的３种用法在一个网页中可以混用吗？　

解答：３种用法可以混用，且不会造成混乱。因为它　

们在执行时有优先级顺序，从高到低依次为：内嵌样式、内　

部样式、外部样式。浏览器在显示网页时是这样处理的：　

先检查有没有行内插入的ＣＳＳ，有就执行，针对本句的其　

它ＣＳＳ就不去管它了；再检查头部方式的ＣＳＳ，有就执行；　

在前两者都没有的情况下再检查外部文件方式的ＣＳＳ。　

因此我们也叫ＣＳＳ为“层叠样式表”。　

问题３：网页中想修改链接的显示效果怎么办？　

解答：通过设置链接标签ａ的样式，就可以改变链接　

的外观。例如这样：　

ａ：ｌｉｎｋ｛ｃｏｌｏｒ：＃ＦＦ００００；｝　

ａ：ｖｉｓｉｔｅｄ｛ｃｏｌｏｒ：＃００００００；｝　

ａ：ｈｏｖｅｒ｛ｃｏｌｏｒ：＃３３９９３３；｝　

ａ：ａｃｔｉｖｅ｛ｃｏｌｏｒ：＃２Ｆ７ＤＢＥ；｝　

不过这样设置后，页面中的所有链接都将应用此样式　

效果。　

问题４：利用ａ：ｌｉｎｋ　ａ：ｖｉｓｉｔｅｄ　ａ：ｈｏｖｅｒ　ａ：ａｃｔｉｖｅ设置了　

链接的样式，但是我想把它只应用于需要的地方，而不想　

整个网页都这么用，可以吗？怎么操作？　

解决一：　

可以将链接样式加在某个类（ｃｌａｓｓ）或ＩＤ上，比如：　

．

ａｌ　ａ：ｌｉｎｋ，．ａｌ　ａ：ｖｉｓｉｔｅｄ｛ｃｏｌｏｒ：＃００００００；）　

．

ａｌ　ａ：ｈｏｖｅｒ，．ａｌ　ａ：ａｃｔｉｖｅ｛ｃｏｌｏｒ：＃００ＦＦＦＦ；｝　

然后将．ａａ应用到某个元素上，比如＜Ｐ　ｃｌａｓｓ一”ａｌ”　

＞＜ａ　ｈｒｅｒ＝”＃”＞不同的链接样式ｄ／ａ＞ｄ／ｐ＞，＜ｔｄ　

ｃｌａｓｓ一”ａｌ”＞＜ａ　ｈｒｅｒ一”＃”＞不同的链接样式＜／ａ＞　

＜／ｔｄ＞，这样的话，这个Ｐ段落或ｔｄ单元格就不会受全　

局的链接样式影响了。　

解决二：　

设置ＣＳＳ：ａ．ａ２：ｌｉｎｋ，ａ．ａ２：ｖｉｓｉｔｅｄ｛ｃｏｌｏｒ：＃ｆｆｆｆｆｆ；｝　

ａ．ａ２：ｈｏｖｅｒ，ａ．ａ２：ａｃｔｉｖｅ｛ｃｏｌｏｒ：＃ｆｆｆｆｆｆ；）　

对链接文字应用样式．ａ２，比如＜ａ　ｈｒｅｆ一”＃”ｔａｒｇｅｔ　

一

”ｂｌａｎｋ”ｃｌａｓｓ一”ａ２”＞文字＜／ａ＞。　

问题５：假设有这样一段ＨＴＭＬ：　

＜ｔａｂｌｅ　ｗｉｄｔｈ一”１００　”ｂｏｒｄｅｒ一”０”ｃｅｌｌｓｐａｃｉｎｇ一”　

０”ｃｅｌｌｐａｄｄｉｎｇ＝”０”＞　

＜ｔｒ＞＜ｔｄ＞＜ａ　ｈｒｅｆ＝”＃”ｔａｒｇｅｔ一”

一

ｂｌａｎｋ”＞文字　

＜／ａ＞＜／ｔｄ＞＜／ｔｒ＞　

＜ｔｒ＞＜ｔｄ＞＜ａ　ｈｒｅｆ＝”＃”ｔａｒｇｅｔ一”一ｂｌａｎｋ”＞文字　

ｄ／ａ＞＜／ｔｄ＞＜／ｔｒ＞　

＜ｔｒ＞＜ｔｄ＞＜ａ　ｈｒｅｆ＝”＃”ｔａｒｇｅｔ一”一ｂｌａｎｋ”＞文字　

＜／ａ＞＜／ｔｄ＞＜／ｔｒ＞　

＜ｔｒ＞＜ｔｄ＞＜ａ　ｈｒｅｆ一”＃”ｔａｒｇｅｔ一”

一

ｂｌａｎｋ”＞文字　

＜／ａ＞＜／ｔｄ＞＜／ｌｒ＞　

＜／ｔａｂｌｅ＞　

可以通过在ｔａｂｌｅ标签中设置样式，来控制该表格中　

所有链接的样式吗？这个样式应该怎么写？　

解答：可以。　

＜ｈｔｍｌ＞　

＜ｈｅａｄ＞　

第８期　杨静：网页设计中ＣＳＳ的链接样式研究　・１２７・　

＜ｓｔｙｌｅ＞　

＜ｓｐａｎ　ｃｌａｓｓ：”ａ４”＞＜ａ＞文字２＜２／ａ＞＜２／ｓｐａｎ＞　

．

ａ３　ｔｄ　ａ：１ｉｎｋ，．ａ３　ｔｄ　ａ：ｖｉｓｉｔｅｄ　

｛ＣＯＬＯＲ：＃　

＜ｄｉｖ　ｃｌａｓｓ：”ａ５”＞＜ａ＞文字３＜２／ａ＞Ｇ／ｄｉｖ＞　

３９７５９４；ＴＥＸＴ—ＤＥＣ０ＲＡＴ１０Ｎ：ｎｏｎｅ｝　

再或是加在父元素的再上级元素上都可以：　

．

ａ３　ｔｄ　ａ：ｈｏｖｅｒ，．ａ３　ｔｄ　ａ：ａｃｔｉｖｅ　

｛ＣＯＬＯＲ：＃　

＜ｕ１　ｃｌａｓｓ＝”ａ５”＞　

４２８ＥＦＦ；｝　

＜ｌｉ＞＜ａ＞文字４Ｇ／ａ＞＜／ｌｉ＞　

２＜／ｓｔｙｌｅ＞　

＜／ｕｌ＞　

＜／ｈｅａｄ＞　

要确定类给的不是ａ标签，而是ａ的父级标签。　

＜ｂｏｄｙ＞　

问题７：一个页面中想用多种链接效果该怎么办？　

＜ｔａｂｌｅ　ｗｉｄｔｈ一”１ＯＯ　”ｂｏｒｄｅｒ：”０”ｃｅｌｌｓｐａｃｉｎｇ一”　

解答：可以参考问题２一问题６，除了采用类来定义样　

０”ｃｅｌｌｐａｄｄｉｎｇ＝”０”ｃｌａｓｓ一”ａ３”＞　

式外，还可以通过ＩＤ的方式来定义样式。举例说明如下：　

Ｇｔｒ＞＜ｔｄ＞Ｇａ　ｈｒｅｆ＝”＃”ｔａｒｇｅｔ一”～ｂｌａｎｋ”＞文　

＜ｈｔｍｌ＞　

字＜２／ａ＞＜２／ｔｄ＞＜／ｔｒ＞　

＜ｈｅａｄ＞　

Ｇｔｒ＞＜ｔｄ＞＜ａ　ｈｒｅｆ＝”＃”ｔａｒｇｅｔ一”一ｂｌａｎｋ”＞文　

＜ｓｔｙｌｅ＞　

字＜／ａ＞＜／ｔｄ＞＜２／ｔｒ＞　

＃ａ６　ａ：ｌｉｎｋ，＃ａ６　ａ：ｖｉｓｉｔｅｄ｛　

＜ｔｒ＞＜２ｔｄ＞＜ａ　ｈｒｅｆ＝”＃”ｔａｒｇｅｔ一”

一

ｂｌａｎｋ”＞文　

ｃｏｌｏｒ：＃ｆｆｆｆＯ０；　

字＜／ａ＞＜／ｔｄ＞＜／ｔｒ＞　

ｔｅｘｔ—ｄｅｃｏｒａｔｉｏｎ：ｎｏｎｅ；　

２＜ｔｒ＞＜２ｔｄ＞＜ａ　ｈｒｅｆ＝”＃”ｔａｒｇｅｔ一”

ｂｌａｎｋ”＞文　

｝　

字＜／ａ＞Ｇ／ｔｄ＞＜２／ｔｒ＞　

＃ａ６　ａ：ｈｏｖｅｒ，＃ａ６　ａ：ａｃｔｉｖｅ｛　

＜／ｔａｂｌｅ＞　

ｔｅｘｔ—ｄｅｃｏｒａｔｉｏｎ：ｎｏｎｅ；　

Ｇａ　ｈｒｅｆ＝”＃”ｔａｒｇｅｔ＝”

ｂｌａｎｋ“＞这是表格外的链　

ｃｏｌｏｒ：＃０２５６００；　

接＜２／ａ＞　

｝　

２＜／ｂｏｄｙ＞　＜／ｓｔｙｌｅ＞　

＜／ｈｔｍｌ＞　

＜／ｈｅａｄ＞　

问题６：要在一个网页中定义多种链接样式，分别定　

＜ｂｏｄｙ＞　

义不同的类来进行设置。如：　

＜ｔａｂｌｅ　ｗｉｄｔｈ＝”１００　”ｂｏｒｄｅｒ＝”０”ｃｅｌｌｓｐａｃｉｎｇ　

一

．

ａ４　ａ：ｌｉｎｋ｛｝　

”０”ｃｅｌｌｐａｄｄｉｎｇ＝”０”ｉｄ＝”ａ６”＞　

．

ａ４　ａ：ｖｉｓｉｔｅｄ｛｝　

２＜ｔｒ＞＜２ｔｄ＞＜２ａ　ｈｒｅｆ＝”＃”＞文字Ｇ／ａ＞＜／　

．

ａ４　ａ：ｈｏｖｅｒ｛｝　

ｔｄ＞＜／ｔｒ＞　

．

ａ５　ａ：ｌｉｎｋ｛）　

＜ｔｒ＞＜ｔｄ＞＜ａ　ｈｒｅｆ＝”＃”＞文字Ｇ／ａ＞＜／　

．

ａ５　ａ：ｖｉｓｉｔｅｄ｛｝　

ｔｄ＞＜／ｔｒ＞　

．

ａ５　ａ：ｈｏｖｅｒ｛）　

＜ｔｒ＞Ｇｔｄ＞＜ａ　ｈｒｅｆ＝”＃”＞文字＜２／ａ＞＜／　

用的是内部样式，单纯的一个文件，什么也没有加，就　

ｔｄ＞＜／ｔｒ＞　

是试验一下多重定义好使不。应用样式后却不见效果，但　

２＜ｔｒ＞＜ｔｄ＞＜２ａ　ｈｒｅｆ＝“＃”＞文字Ｇ／ａ＞Ｇ／　

单独设置ａ：ｌｉｎｋ（｝ａ：ｖｉｓｉｔｅｄ｛｝ａ：ｈｏｖｅｒ｛｝时却有效？怎么　

ｔｄ＞＜／ｔｒ＞　

回事呢？　

＜／ｔａｂｌｅ＞　

分析：估计ｈｔｍｌ里面链接多半是这样加的ｃｌａｓｓ：＜ａ　

２＜／ｂｏｄｙ＞　

ｃｌａｓｓ＝”ａ４”＞文字＜／ａ＞　

＜／ｈｔｍｌ＞　

你定义的ｃｌａｓｓ为，．ａ４，如果是直接把ｃｌａｓｓ加在链接　此例中，将网页元素命名为ａ６，然后定义ＩＤ的样式　

２＜ａ＞上，浏览器解析方式是找到ａ４再去找ａ４下面所有　

＃ａ６　ａ：ｌｉｎｋ，＃ａ６　ａ：ｖｉｓｉｔｅｄ｛）和＃ａ６　ａ：ｈｏｖｅｒ，＃ａ６　３：ａｃ—　

是ａ（＜ａ＞）的元素，所以这个ａ４加在＜ａ＞上就会出错，　ｔｉｖｅ｛），这样的应用方式将对网页上名叫ａ６的元素中的所　

但如果外面套个父元素，浏览器找到ａ４这个父元素，再到　有链接直接起作用。　

父元素下面去找＜ａ＞就可以使用了。　

解决方法：　

参考文献　

改成下面形式，外边加个父级元素，ｃｌａｓｓ加在父级　

［１］　邵丽萍，张后扬，王英．网页编程技术［Ｍ］．ｊｂ京：清华大学出版社　

上：　

２００７．　

２＜ｐ　ｃｌａｓｓ＝”ａ４”＞＜ａ＞文字１Ｇ／ａ＞＜２／ｐ＞　

（责任编辑：杜能钢）　

或者：