编程学习

自从 Dreamweaver MX 2004 发布以来,我曾经无数次向 Dreamweaver de新老用户演示它de新特征和新功能.每次进行产品演示,我很快就会极力称赞 Dreamweaver MX 2004 设计和呈现 CSS(或层叠样式表)de新功能.本篇详细\全面了解CSS.

然而最近某位新用户问了一个问题,说实话,这个问题一下子让我张口结舌.这位用户只是问:“我为什么要使用 CSS?”当时我意识到,尽管我这些每天与 HTML 和 CSS 打交道de人非常了解 CSS de优点,但仍有很多人并不了解.或者说并不完全了解 CSS 所能提供de所有优点.本文是我对上面那位新用户de书面回答.
CSS 起源
回顾 CSS de优点之前,我要先介绍一下它de历史.Web 管理组织 W3C 在 1996 年 11 月推荐使用 CSS,并批准了 CSS 1 级规范.CSS 1 级规范说明了用于 HTML 页面de属性.这些属性代替了传统de字体标签和其他“样式”标记,例如颜色和边距.1998 年 5 月,W3C 批准了 CSS 2 级规范,将一些附加功能添加到 1 级规范,并引进了定位属性.这些属性代替了表格标签普遍(但是错误)de用法,用来设计页面元素de表示.CSS 规范de最新版本是 CSS 2.1,它改进了某些属性,并删除了在当前浏览器里没有作用或作用很小de属性.
不幸de是,就像很多新技术一样,CSS 经历了漫长de过程才被广泛采纳.其中de重要原因在于浏览器,以及为这些浏览器建立站点de Web 设计者们.CSS 批准期间,Netscape Navigator (NN) 仍然是主导浏览器,而该浏览器基本上不支持 CSS.Microsoft 在其第 3 版浏览器中添加了对 CSS 非常有限de支持,但当时大多数de Web 设计者(本人在内)仍然将 NN 作为首选平台进行页面编码.
很多年来,每发行一个新版本,浏 览器制作者们都扩展了对 CSS de支持.今天,Internet Explorer 6、Netscape Navigator 7、Mozilla、Opera 和 Safari 都全面支持 CSS.但这并不意味着我作为 Web 设计者和开发者de生涯不存在问题.尽管上述所有浏览器都支持 CSS Level 2,它们de兼容程度仍然各不相同.而且在某些情况下,特定属性仍然会带给您很多麻烦.也就是说,您仍然需要遵守老de信条“测试再测试”.但如果您坚持使用 CSS 规范de核心属性,您将能够正确地呈现页面.
但是为什么 W3C 认为需要创建 CSS 规范呢？当我创建基于 HTML de Web 站点和应用程序时,这一切对我又意味着什么呢？我认为,我需要使用 CSS de理由以及它带来de优势可以分为以下三个主要方面:灵活性、呈现性和可访问性
灵活性
我 确定几乎每个 Web 设计者和开发者都经历过这样de痛苦时刻:当您小心地布置好页面,完成所有嵌套de表格后,客户要求进行一点“小小de”更改.这小小de更改可能只是“能不能把 那个图形稍稍往左移动一点？”,也可能非常富有戏剧性:“我不喜欢这些标题,能把它们de字体弄大一点吗？改字体de时候,顺便把颜色也改了,怎么样？”如果 只需要处理有限de几个页面,您可以深吸一口气,花上大半个小时做那些让人恼火de改动.但如果涉及到较大de站点(而这已经很常见),一个简单de更改无论如何 也简单不了.
这样de情形为什么会如此痛苦呢？因为定义页面外观de标记本身就是页面de一部分.要看到实例,您只需到任何站点de任何页面上去 数一下 font 和 table 标签de数量.只要您能够从实际页面de流程(或相关代码)中删除这些标记,或者采用更好de办法,即将其外置,您就可以进行集中更改.而这就是 CSS 所能做de.
如果使用一个或多个外部样式表,通过修改样式表然后将修改后de版本上载,您就可以将更改应用到站点.
想象一 下,在传统de基于表格de布局中,将站点浏览从页面左侧移到页面右侧将有多么困难.这需要几个小时重复而乏味de工作.但是,如果您选择使用 CSS de定位属性(通常称作 CSS-P)来设计页面,只需更改外部样式表中de“浮动”或“位置”属性,即可更新页面.而且还有以下附加优势:您更新了站点中使用该样式de所有页面.
呈现性
由 于宽带de广泛使用,很多开发者已经不再考虑在浏览器中呈现页面所花费de时间.但是,您们应该记住,很多目标用户仍然在使用拨号连接.传统de基于表格de布局 是页面下载速度慢de主要原因.因为浏览器从服务器接收页面时,必须首先检查并“理解”一系列复杂de镶嵌式表格.它必须先找到镶嵌在最里面de内容,然后小心 地逐步处理相关代码,直至到达最外层de容器,即 body 标签.完成以上所有过程后,浏览器才能开始在屏幕上呈现内容.
如果使用 CSS,浏览器从服务器接收内容后,立刻就可以开始呈现过程,因为页面中没有或只有很少de显示标记.
使用外部样式表还有一个潜在de呈现方面de好处.在传统de基于表格de方法中,浏览器必须检索、分析并单独呈现每个页面.也就是说,浏览器在您de站点上显示第 30 页时耗费de工作和显示第 1 页时一样多.
但是,如果使用外部样式表进行显示,站点de第一页将提示浏览器将页面使用de已链接样式表文件缓存起来.这意味着站点中所有使用上述样式表de后继页面下载速度会更快,因为浏览器已经缓存了样式表.
最 后一个与呈现有关de优点让我想起电影《莫扎特》.电影中,莫扎特问国王对自己de歌剧有什么看法.国王说很好,但是很沉闷.莫扎特一再追问,国王解释说,问 题就在于“音符太多”.Web 设计也可能有同样de问题,当然这里de音符指de是实际 HTML 相关代码.相关代码越多,浏览器理解页面所花de时间就越长.
大家也许都听说过有关官方应用程序de传言,它们编写了非常糟糕de相关代码,满是复杂de信息,然而文档页面却无法呈现.作为 Dreamweaver de用户,您们不会遇到这样de问题,但是如果编写了太多相关代码,您们也会感到内疚.典型de基于表格de设计就是一个很好de例子.
在设计中使用 CSS 后,您将减少客户需要下载de相关代码de数量.仅仅减少某些页面中de字体标签就可以大大减少相关代码de数量.在很多情况下,如果完全使用 CSS-P 进行设计,相关代码de数量最多可以减少 50% 甚至更多.相关代码减少就意味着页面下载de速度加快.
可访问性
如 今我经常听到人们谈论可访问性.大多数开发者知道自己必须考虑建立更多可访问站点de问题,但在更大de程度上,只有为政府或教育机构建立站点de开发人员才被 迫真正做到了这一点.考虑到可访问性de问题时,大多数开发人员认为这仅仅意味着需要将 alt 属性添加到图形中.但实际上,提高可访问性有很多工作可做,CSS 使您可以轻松建立可访问站点.
可访问性de主要问题(也是使用 CSS 能够解决de问题)在于辅助技术(例如屏幕阅读器)怎样“阅读”页面.传统de基于表格de环境下,屏幕阅读器面临一个巨大de挑战,那就是决定怎样阅读页面.想 想吧,当屏幕阅读器遇到镶嵌很深de表格时该有多么困惑,它应该阅读内容,还是跳过内容？跳过内容后,以后怎样返回内容？
当您点击页面时,您会很快看到页面中自己感兴趣de内容,而忽略页面顶部de导航和其他内容.视力不太好de人却做不到这一点.他必须等待屏幕阅读器分析完页面顶部和他感兴趣de内容之间所有复杂de信息.
当 然,有de技术能够使屏幕阅读器跳过导航,但这需要在导航条或其他内容de图像中添加链接.这些技术de运行可能会造成混乱,而且访问站点de其他人也能够看到它 们.使用 CSS,您能够在页面中完整定义不可视元素(对于其他站点访问人员和您de鼠标不可视).屏幕阅读器可以使用这些元素快速导航,有效处理文档.
由于 CSS 没有显示标记,屏幕阅读器所遇到de唯一问题就是实际内容.另外,当您使用 CSS-P 进行设计时,您将专注于内容de实际“流”.您开始考虑它在页面上de逻辑顺序.
当您阅读本文档时,您理解了信息“流”.但在镶嵌型表格de示例中,如果您使用多栏布局,本段落将很可能位于页面de右上角.那样,屏幕阅读器无法知道它应该在文章末尾阅读本段落.
使用 CSS-P 后,浏览器可能仍将本段落显示在浏览器窗口de右上角,但当您查看文档de源相关代码时,段落在文档de html 中仍然是您现在所看到de位置.这使页面更容易访问.
总结和计划
以 上就是我de答案.我希望我解释了使用 CSS 进行 Web 设计de独特优势.显然,要学习de内容很多.因此,我鼓励您阅读 Macromedia 开发者中心关于 CSS de其他文章*,它们将帮助您更好地了解 CSS de优点,并教会您在设计中使用 CSS de整个过程.以后de几个星期以及几个月当中,我将带回来更多de CSS 教程.就写到这里,希望您愉快使用我de样式.

关于作者
Greg Rewis 是 Macromedia Web 技术最主要de宣传者. Greg 是 Macromedia de公众代言人,代言 Web 上发行de Macromedia 软件套件和 Web 应用程序开发服务器,同时他又代表公司成千上万顾客de利益,与产品开发部门进行沟通.Greg 十分了解 Macromedia 客户de想法,　因为每年他有 200 天都“在路上”,他与客户交谈,在商品展览会、研讨会和各种会议中进行产品展示,组织高级培训会议专门介绍 Macromedia 生产线.Greg 总是在世界各地飞来飞去,但工作之余他在 Arizona 沙漠中享受生活,打高尔夫球,教他de两个儿子“在游泳池中放松身心”de艺术.

文总结了我开始使用CSS布局方法以来所有de技巧和兼容方案,我愿意把这些与您分享,我会重点解释一些新手容易犯de错误(包括我自己也犯过de),如果您已经是CSS高手,这些经验技巧可能已经都知道,如果您有更多de,希望可以帮我补充.

翻译:阿捷

原文作者:Roger Johansson

作者简介:住在瑞典哥德堡,1994年开始接触和参与web设计,456 Berea Street是他de住址,因此采用这个名字作为他de个人主页域名

最近,经常有朋友问我一些工作中遇到deCSS问题.他们总是不能很好de控制CSS,影响CSSde效率发挥.我来分析总结一下错误所在,帮助大家更加容易使用CSS.

一.使用css缩写

使用缩写可以帮助减少您CSS文件de大小,更加容易阅读.css缩写de主要规则请参看《常用css缩写语法总结》,这里就不展开描述.

二.明确定义单位,除非值为0

忘 记定义尺寸de单位是CSS新手普遍de错误.在HTML中您可以只写width=”100″,但是在CSS中,您必须给一个准确de单位,比如:width: 100px width:100em.只有两个例外情况可以不定义单位:行高和0值.除此以外,其他值都必须紧跟单位,注意,不要在数值和单位之间加空格.

三.区分大小写

当在XHTML中使用CSS,CSS里定义de元素名称是区分大小写de.为了避免这种错误,我建议所有de定义名称都采用小写.

class和idde值在HTML和XHTML中也是区分大小写de,如果您一定要大小写混合写,请仔细确认您在CSSde定义和XHTML里de标签是一致de.

四.取消class和id前de元素限定

当您写给一个元素定义class或者id,您可以省略前面de元素限定,因为ID在一个页面里是唯一de,而clas s可以在页面中多次使用.您限定某个元素毫无意义.例如:

div#content { /* declarations */ }

fieldset.details { /* declarations */ }

可以写成

#content { /* declarations */ }

.details { /* declarations */ }

这样可以节省一些字节.

五.默认值

通常paddingde默认值为0,background-colorde默认值是transparent.但是在不同de浏览器默认值可能不同.如果怕有冲突,可以在样式表一开始就先定义所有元素demargin和padding值都为0,象这样:

* {

margin:0;

padding:0;

}

六.不需要重复定义可继承de值

CSS中,子元素自动继承父元素de属性值,象颜色、字体等,已经在父元素中定义过de,在子元素中可以直接继承,不需要重复定义.但是要注意,浏览器可能用一些默认值覆盖您de定义.

七.最近优先原则

如果对同一个元素de定义有多种,以最接近(最小一级)de定义为最优先,例如有这么一段相关代码

Update: Lorem ipsum dolor set

在CSS文件中,您已经定义了元素p,又定义了一个class”update”

p {

margin:1em 0;

font-size:1em;

color:#333;

}

.update {

font-weight:bold;

color:#600;

}

这两个定义中,class=”update”将被使用,因为class比p更近.您可以查阅W3Cde《 Calculating a selector’s specificity》 了解更多.

八.多重class定义

一个标签可以同时定义多个class.例如:我先定义两个样式,第一个样式背景为#666;第二个样式有10 pxde边框.

.one{width:200px;background:#666;}

.two{border:10px solid #F00;}

在页面相关代码中,我可以这样调用

<div class=”one two”></div>

这样最终de显示效果是这个div既有#666de背景,也有10pxde边框.是de,这样做是可以de,您可以尝试一下.
九.使用子选择器(descendant selectors)

CSS初学者不知道使用子选择器是影响他们效率de原因之一.子选择器可以帮助您节约大量declass定义.我来看下面这段相关代码:

<div id=”subnav”>

<ul>

<li class=”subnavitem”> <a href=”#” class=”subnavitem”>Item 1</a></li>>

<li class=”subnavitemselected”> <a href=”#” class=”subnavitemselected”> Item 1</a> </li>

<li class=”subnavitem”> <a href=”#” class=”subnavitem”> Item 1</a> </li>

</ul>

</div>

这段相关代码deCSS定义是:

div#subnav ul { /* Some styling */ }

div#subnav ul li.subnavitem { /* Some styling */ }

div#subnav ul li.subnavitem a.subnavitem { /* Some styling */ }

div#subnav ul li.subnavitemselected { /* Some styling */ }

div#subnav ul li.subnavitemselected a.subnavitemselected { /* Some styling */ }

您可以用下面de方法替代上面de相关代码

<ul id=”subnav”>

<li> <a href=”#”> Item 1</a> </li>

<li class=”sel”> <a href=”#”> Item 1</a> </li>

<li> <a href=”#”> Item 1</a> </li>

</ul>

样式定义是:

#subnav { /* Some styling */ }

#subnav li { /* Some styling */ }

#subnav a { /* Some styling */ }

#subnav .sel { /* Some styling */ }

#subnav .sel a { /* Some styling */ }

用子选择器可以使您de相关代码和CSS更加简洁、更加容易阅读.

十.不需要给背景图片路径加引号

为了节省字节,我建议不要给背景图片路径加引号,因为引号不是必须de.例如:

background:url(”images/***.gif”) #333;

可以写为

background:url(images/***.gif) #333;

如果您加了引号,反而会引起一些浏览器de错误.

十一.组选择器(Group selectors)

当一些元素类型、class或者id都有共同de一些属性,您就可以使用组选择器来避免多次de重复定义.这可以节省不少字节.

例如:定义所有标题de字体、颜色和margin,您可以这样写:

h1,h2,h3,h4,h5,h6 {

font-family:”Lucida Grande”,Lucida,Arial,Helvetica,sans-serif;

color:#333;

margin:1em 0;

}

如果在使用时,有个别元素需要定义独立样式,您可以再加上新de定义,可以覆盖老de定义,例如:

h1 { font-size:2em; }

h2 { font-size:1.6em; }

十二.用正确de顺序指定链接de样式

当 您用CSS来定义链接de多个状态样式时,要注意它们书写de顺序,正确de顺序是::link :visited :hover :active.抽取第一个字母是”LVHA”,您可以记忆成”LoVe HAte”(喜欢讨厌).为什么这么定义,可以参考Eric Meyerde《Link Specificity》.

如果您de用户需要用键盘来控 制,需要知道当前链接de焦点,您还可以定义:focus属性.:focus属性de效果也取决与您书写de位置,如果您希望聚焦元素显示:hover效果,您 就把:focus写在:hover前面;如果您希望聚焦效果替代:hover效果,您就把:focus放在:hover后面.

十三.清除浮动

一个非常常见deCSS问题,定位使用浮动de时候,下面de层被浮动de层所覆盖,或者层里嵌套de子层超出了外层de范围.

通 常de解决办法是在浮动层后面添加一个额外元素,例如一个div或者一个br,并且定义它de样式为clear: both.这个办法有一点牵强,幸运de是还有一个好办法可以解决,参看这篇文章《How To Clear Floats Without Structural Markup》(注:本站将尽快翻译此文).

上面2种方法可 以很好解决浮动超出de问题,但是如果当您真de需要对层或者层里de对象进行clearde时候怎么办?一种简单de方法就是用overflow属性,这个方法最 初de发表在《Simple Clearing of Floats》,又在《Clearance》和《Super simple clearing floats》中被广泛讨论.

上面那一种clear方法更适合您,要看具体de情况,这里不再展开论述.另外关于floatde应用,一些优秀de文章已经说得很清楚,推荐您阅读:《Floatutorial》、《Containing Floats》和《Float Layouts》

十四.横向居中(centering)

这是一个简单de技巧,但是值得再说一遍,因为我看见太多de新手问题都是问这个:CSS如何横向居中?您需要定义元素de宽,并且定义横向demargin,如果您de布局包含在一个层(容器)中,就象这样:

您可以这样定义使它横向居中:

#wrap {

width:760px; /* 修改为您de层de宽度 */

margin:0 auto;

}

但是IE5/Win不能正确显示这个定义,我采用一个非常有用de技巧来解决:用text-align属性.就象这样:

body {

text-align:center;

}

#wrap {

width:760px; /* 修改为您de层de宽度 */

margin:0 auto;

text-align:left;

}

第一个bodydetext-align:center; 规则定义IE5/Win中bodyde所有元素居中(其他浏览器只是将文字居中) ,第二个text-align:left;是将#warp中de文字居左.

十五.导入(Import)和隐藏CSS

因为老版本浏览器不支持CSS,一个通常de做法是使用@import技巧来把CSS隐藏起来.例如:

@import url(”main.css”);

然而,这个方法对IE4不起作用,这让我很是头疼了一阵子.后来我用这样de写法:

@import “main.css”;

这样就可以在IE4中也隐藏CSS了,呵呵,还节省了5个字节呢.想了解@import语法de详细说明,可以看这里《centricle’s css filter chart》

十六.针对IEde优化

有些时候,您需要对IE浏览器debug定义一些特别de规则,这里有太多deCSS技巧(hacks),我只使用其中de两种方法,不管微软在即将发布deIE7 beta版里是否更好de支持CSS,这两种方法都是最安全de.

1.注释de方法

(a)在IE中隐藏一个CSS定义,您可以使用子选择器(child selector):

html>body p {

/* 定义内容 */

}

(b)下面这个写法只有IE浏览器可以理解(对其他浏览器都隐藏)

* html p {

/* declarations */

}

(c)还有些时候,您希望IE/Win有效而IE/Mac隐藏,您可以使用”反斜线”技巧:

/* \*/

* html p {

declarations

}

/* */

2.条件注释(conditional comments)de方法

另外一种方法,我认为比CSSHacks更加经得起考验就是采用微软de私有属性条件注释(conditional comments).用这个方法您可以给IE单独定义一些样式,而不影响主样式表de定义.就象这样:

<!–[if IE]>

<link rel=”stylesheet” type=”text/css” href=”ie.css” />

<![endif]–>

十七.调试技巧:层有多大?

当 调试CSS发生错误,您就要象排版工人,逐行分析CSS相关代码.我通常在出问题de层上定义一个背景颜色,这样就能很明显看到层占据多大空间.有些人建议用 border,一般情况也是可以de,但问题是,有时候border 会增加元素de尺寸,border-top和boeder-bottom会破坏纵向marginde值,所以使用background更加安全些.

另外一个经常出问题de属性是outline.outline看起来象boeder,但不会影响元素de尺寸或者位置.只有少数浏览器支持outline属性,我所知道de只有Safari、OmniWeb、和Opera.

十八.CSS相关代码书写样式

在写CSS相关代码de时候,对于缩进、断行、空格,每个人有每个人de书写习惯.在经过不断实践后,我决定采用下面这样de书写样式:

selector1,

selector2 {

property:value;

}

当使用联合定义时,我通常将每个选择器单独写一行,这样方便在CSS文件中找到它们.在最后一个选择器和大括号{之间加一个空格,每个定义也单独写一行,分号直接在属性值后,不要加空格.

我习惯在每个属性值后面都加分号,虽然规则上允许最后一个属性值后面可以不写分号,但是如果您要加新样式时容易忘记补上分号而产生错误,所以还是都加比较好.

最后,关闭de大括号}单独写一行.

空格和换行有助与阅读.

字体de处理在网页设计中无论怎么强调也不为过,毕竟网页使用来传递信息de,而最经典最直接de信息传递方式就是文字,所以,了解一点字体de基本知识对于设计来说还是非常重要de.

　　 中文和英文de最大区别就是中文是方块字,英文是拼音文字,这对字体de处理de影响是巨大de.看看下面de图示就会发现,英文字体里de那些变化在中文字体里都弱化了.

　　 作为中文de读者,习惯性de接受方块形状做为阅读de单元,其实对于眼睛来说,这是一种容易疲劳de方式,阅读de时候您de视线实际上是跟随整行文字de外形.看看这个例子.
　　 NOW I”VE TRIED TO TALK TO YOU AND MAKE YOU UNDERSTAND
　　 Now I”ve tried to talk to you and make you understand
　　 哪一行更容易读呢？
　 　第一行和中文de情形有些类似,不同de是,每个中文单字就好比一幅画,其变化要比26个英文字母丰富de多,对于我来说,我接受了这个特点,但是设计时 还是有一些问题需要考虑,我不是设计师,如果说de不对,请在下面留言讨论.这些内容在我教授Typographyde时候是作为一般原则来提出de.我也告诉 学生一句话:“The purpose of rule is to break the rule.” 设计原则本身就是为了打破原则,这也是所谓decreativityde表现.问题是您需要先知道原则,并且顺从原则进行练习,只有在您熟悉原则之后才有可能 打破原则显现您de创造性,打破原则不意味着原则de缺陷和错误,只是您对这些原则de别出心裁de使用,您打破了一些,同时也对您所破坏de部分做一定de补偿,似 乎很有点哲学de味道.
　　 我个人以为比较重要de几个原则是(适用于英文de情形):
　　 字体de选用要考虑该文字de用途,是做标题呢,还是段落文字？
通 常来说 san serif 字体适合作为标题使用,例如 Arial；serif 字体适合作为段落文字使用,例如Time New Roman.对于网页设计来说,有几个字体是我强烈推荐de,verdana, tahoma, georgia.事实上,像 Verdana 这个字体是由世界上顶级de字体设计师花了差不多两年时间设计出来de,Microsoft负责买单, 然后免费提供给用户,这个字体是IE安装de一部分,如果您安装了IE 4以上de版本,您de电脑里就一定有这个字体,所以您不必担心用户是否有这个字体.它de设计考虑了字体在屏幕上显示de可能面对de问题,而且提供了近乎完美de 答案.唯一de麻烦是它de近乎完美造成了我使用de时候没有了个性,因为每个人都使用它.
　　 字号de大小？
　　 论坛里很多讨论,关于pixle 好还是point好？ 我就不重复了,在这里我想提出de是字号de大小在CSS里,有很多不同de单位,大致上有三类:
　　 绝对大小:mm, cm, in, pt, pc
　　 相对大小:em, ex
　　 相对于设备:px
　　 可能要多说几句de是 em 和 ex,em 在 css 里代表就是字体字号de大小,例如对于12 ptde字体来说, 1 em 就等于12 pt 例子:
p {
font-size: 10pt;
text-indent: 1em
}
　　 也许您会说我可以用text-indent: 10pt来实现同样de效果啊,但那只是在理想de情形下,如果用户觉得他de浏览器设置字体大小为14pt更好de时候,您所设计de比例就失去了,所以相对尺寸对于网页de可伸缩性设计是非常有利de.
　　 ex 和 em 类似,但不尽相同, 回到上面de图示,x-height 对于每一种字体来说是不同de,ex 是根据字体de x-height 来定义字体de大小.
　　 对齐方式？
　　 最好使用左对齐,尤其要避免使用左右对齐,除非您有一个特殊de设计目de,左对齐时右侧de不对齐正是为了阅读de方便,右侧de变化对您de视力是一个帮助,它借助变化告诉您de眼睛可以换行了.
　　 行间距？
　 　行间距取决于字体de大小,一般来说,小de字号需要大一点de行间距来便于阅读,中文字体在网页上如果没有行间距de设定,对于阅读大段文字来说是读者de灾 难,所以适当设定line-height是非常必要de.一般地, line-height 在网页设计中应该是字体大小de1.5倍到2倍.Word 和其它de文本编辑软件里, 一般设定字体de120%作为缺省de行间距.css里de line- height 设定,是均分后加在每一行de上下,也就是说,如果 line-height 设定为 20px de话,那么每一行文字de上下各有10pxde间距.
　　 字间距和字符间距？
　　 很特殊de用途,对中文来说这两者应该是相同de.这个设定de本身就是为了解决某些字体设计上缺陷,来增加文字de可读性.
　　 每次写专栏de文章都有这种感觉,越写越不知道怎么结尾, 这可能就是随笔方式de弊病吧.请留言讨论,我这个就算是抛砖了.

本篇详细介绍了用CSS动态控制文本属性de文章主题,利用CSSde属性值可动态改变de特点,定义文本de多种属性值,再用一个事件来触发,一旦事件发生,则改变文本属性值,从而达到预期目de.
用CSS可以很方便地动态改变文本de属性,从而可制作出动态地使文字变大、缩小、改变文字颜色、改变文本de背景、字间距、行间距等等网页特效,一切都在您de掌握之中.是不是有点玄？事实就是如此.那一定很复杂吧？不!看完本文,您就会明白,原来这么简单.
请看下面de示例:
一、动态改变文字大小
这个例子de效果是:一段文本,当鼠标在这段文本上,文字变大,鼠标离开时又恢复原样.
制作方法:
1、在Dreamweaver3中,用CSS面板定义两个CSSdeclass,一个取名为“style1”定义为大号字(18px)；另一个取名为“style2”,定义为小号字(12px).获得deCSS相关代码如下:
<style type=”text/css”>
<!–
.style1 { font-size:18px}
.style2 { font-size:12px}
–>
</style>
不使用Dreamweaverde网友可把上述相关代码直接复制到网页相关代码de<head>与</head>之间.
2、 在这段文字de<P>标记中加入这段相关代码:onmouseover=”this.className=’’style1”” onmouseout= “this.className=’’style2””.至此,制作完成,能产生效果de那段文字de源相关代码是这样de:
<p onmouseover=”this.className=’’style1”” onmouseout=”this.className=’’style2””><font color=”#FF0000″>鼠标在这段文字上,文字变大,鼠标离开时变小.</font></p>
不使用Dreamweaverde网友只要把相关代码改成上面这样就行了,预览一下就可看到实际效果了.
二、同时动态地改变文字de大小、颜色、加粗
这个例子de效果是:鼠标在文字上,文字de大小、颜色发生改变且加粗,鼠标离开时恢复原样.
这个例子de制作方法与例一相同,不同de只是在CSS中定义了不同de文字属性,所以制作方法不再重复.在<head>与</head>之间增加deCSS相关代码为:
<style type=”text/css”>
<!–
.style1 { font: bold 16px ; color: #0000FF}
.style2 { font-size:12px; color:#00ff00}
–>
</style>
制作完成,能产生效果de那段文字de源相关代码是这样de:
<p class=”style4″ onmouseover=”this.className=’’style1”” onmouseout=”this.className=’’style2””>鼠标在这段文字上,改变文字de大小、颜色、加粗,鼠标离开时恢复原 样.</p>
三、动态改变部分文本de背景
这个例子de效果是:当鼠标移到某行文本上,这行一部分文本de背景改变了,而本行de另一段背景却不变.
这个例子与上面de例子在制作方法上有点改变,上面de例子都是对整段文本de属性进行改变,所以把触发事件加载在“P”标记上；而本例是只改变一段文本de一部分de背景颜色,所以应先用”Span”标记把要改变背景de文本括起来,然后把触发事件加载到“Span”标记上.
本例在<head>与</head>之间增加deCSS相关代码为:
<style type=”text/css”>
<!–
.style1 { background: #99CCFF}
.style2 { background: #FFFFFF}
–>
</style>
制作完成,能产生效果de那段文字de源相关代码是这样de:
<p><span class=”style6″ onmouseover=”this.className=’’style1”” onmouseout=”this.className=’’style1””>当鼠标移到这段文本上,背景改变了,</span>而本 行de另一段背景却不变.</p>
四、给超级链接动态加图标
这个例子de效果是:当鼠标移到某个超级链接上,它de左边会出现一个图象,鼠标移开,图象消失.
本例在制作方法上与上例相同,都是改变文本de背景,但在制作时要注意几点:
1、在设置CSSde背景时是选择图象背景,并在设置图象背景de“repeat”参数时要选择“no-repeat”(不平铺)；
2、在设置超级链接时,在其左边要预留出图象de位置；
3、触发事件要加载在超级链接上.
本例在<head>与</head>之间增加deCSS相关代码为:
<style type=”text/css”>
<!–　　
.style1 { background: url(image/dot.gif) no-repeat; }
.style2 { background: #FFFFFF}
–>
</style>
制作完成,能产生效果de那个超级链接de源相关代码是这样de:
<a href=”#” onmouseover=”this.className=’’style1”” onmouseout=”this.className=’’style2””>将鼠标移动过来</a>
通过动态改变文本deCSS属性,还可以做出许多特效,但方法基本相同,不再一一例举了,掌握了方法,您就可以发挥想象力去创作了.

本文特意为您找来了一款CSS编辑利器——Topstyle,利用它您能轻松做出更有风格de网页来!

精彩、漂亮是每一个设计者在制作网页时de不懈追求,而网页de精彩几乎都离不开CSSde强力“支撑”；CSS是一种为超文本标签语言提供增强补充服务de技 术,可对每一个htmlde标签做精雕细刻de修饰.活用CSS,将会使网页更加生动活泼.不过,普通de网页编辑工具在CSS方面,表现难能让人满意；为了充 分发挥CSS潜能,设计出更加美丽de网页.

　　最新版本:3.11
　　文件大小:3836KB
　　 软件性质:共享
　　 使用平台:Win9x/Me/NT/2000/XP

　　软件功能
　 　该程序是一款功能强大deCSS编辑设计工具,功能相当多,不但您可以轻松创建各种样式de文件,而且方便对已有de样式进行编辑,其内置deCSS码检查功 能,可以让您减少写错de机会.特别是它deHELP文件中详细de各种CSS指令介绍,很适合用作参考文件和初次接触CSSde用户学习使用.

　　下载安装
　 　Topstyle是一款专门用来让设计和编辑样式de工具,它de大小已经达到4M左右,可以说该软件是那种“强壮剽悍”型de,不过身材庞大也意味着该软件 实现de功能是比较新颖、实用和强大de.利用该软件,我可以随心所欲地创建各种样式表文件,并且能为网页轻松设计出各种令您感到非常满意de视觉效果.从网 上下载下来deTopstyle是一个扩展名为exede可执行文件,大家在进行安装之前,可以直接用鼠标双击它,这样系统就能自动打开一个标准de windows程序安装界面,我只要按照界面de提示,一路单击next按钮就能顺利完成安装了.该程序在没有注册de情况下,可以在同一台计算机中使用 20次；随Topstyle一起安装到系统中de还有一个名为Topstyle litede程序,该程序在使用次数上没有什么限制,不过在功能方面肯定会有所限制,但对于普通个人用户来说,它提供de功能已经足够了!

图1

　 　安装完成后,程序在默认状态下会自动在系统de开始菜单中添加一个Topstyle程序运行菜单项.此时,我要是想运行Topstyle程序de话,可以 用鼠标依次单击“开始”/“程序”/“Topstyle 3”,屏幕上首先会出现一个样式定义向导窗口,在初次使用该程序时,可以先一路单击“next”按钮,这样就能打开一个如图1所示de程序主操作界面了.为 防止日后用户暂时不需要该软件时,该程序会占用de系统资源可能较多,我可以在控制面板窗口中,利用添加删除程序来将Topstyle程序de所有组件彻底 从系统中清除,因此从这个意义上来说,该软件还可以称得上是一款绿色软件.一旦运行该程序后,该界面就是一种完全deXP风格,让人感到亲切、柔和!

　　创建新de样式
　 　Topstyle程序为我提供了几种创建新样式文件de方法,其中比较简单de一种就是使用向导功能来创建样式文件；在使用这种方法时,可以先用鼠标单击 主界面中de“file”菜单项,从打开de下拉菜单中执行“New style sheet wizard”命令,这样就能打开一个如图2所示de向导设置界面；用鼠标单击“next”按钮,在接下来出现de界面中,您就能对网页中de文字颜色以及背景 颜色进行合适de设置；设置完成后,继续单击“next”,接着为网页中文字选择一种合适de字体,需要哪种字体时,可以在对应字体前面de方框中打上勾号；完 成了这步设置后,下面您还可以设置网页中文字de大小,文字de加粗属性,网页中超级链接de正常显示颜色以及单击后de颜色变化,完成所有相关参数de设置后,向 导设置框还会打开一个如图3所示de预览界面；要是对设置de效果感到满意de话,可以继续用鼠标单击“next”来完成最后de样式创建任务.倘若对设置de效果 不满意de话,还能在这里单击“previous”按钮,来返回到前面de设置页面中,重新调整网页de样式属性,直到自己满意为止.最后,我可以为上面创建 de样式文件起一个名称,同时选择好文件保存de位置,并单击向导界面中de“finish”按钮结束样式文件de创建工作.

图2

图3

　　 编辑已有样式
　 　除了创建新de样式外,我还能对目前已经存在de样式文件进行编辑和调整.编辑调整时,可以在主界面中依次执行“file”/“open”命令,来将已有 de样式文件打开,任何在Topstyle程序界面中,利用工具栏中de各种工具按钮,来对样式文件进行任意修改；要是自己非常熟悉网页源相关代码de话,可以选择 在源相关代码窗口中来进行修改(如图4所示),倘若对源相关代码比较“感冒”de话,我还能在Topstyle程序界面右上角de“Style Inspector”子窗口中来修改,这样可以更直接一点,而且在这里我几乎也能修改样式中de任意参数,比方说网页文字de大小、字体、颜色,网页de背景 颜色、超级链接de颜色等.此外,执行菜单栏中de“file”/“open from web”命令,在随后打开de窗口中直接输入某网站de网址,我就能对指定网站上de网页样式进行修改和编辑了.

图4

　　检查样式错误
　 　在编辑修改样式de过程中,可能会因操作不慎,出现这样或者那样de错误,此时您大可不必担心,因为Topstyle程序为我提供了CSS码de错误检查功 能,这样我在修改过程中,产生de任何错误Topstyle程序都不会忽略.我对样式de任何一步修改和创建工作,都在Topstyle程序de“监控”之 下,一旦修改出错de话,程序会马上弹出一个对话框,如图5所示,来提醒我当前样式中出现了错误；同时在主界面de源相关代码编辑子窗口中,我会发现程序在出 错de地方以红颜色来突出显示；而在“Style Inspector”子窗口中,程序会以蓝颜色将出错de地方突出显示出来；一旦我将错误调整过来后,对应位置处de突出显示颜色也会自动消失.

图5

　　预览样式效果

　 　Topstyle程序还为我提供了即时预览功能,利用该功能,我对样式参数每一步de修改效果都能被即时显示出来.主界面中de“Output”子窗口 就是用来即时预览样式效果de,在该子窗口中,我发现它包含了五个标签页面,用鼠标单击“preview”标签,就会看到具体de样式预览效果了；由于 Topstyle程序支持各个版本deIE浏览器、Netscape浏览器以及Opera浏览器,因此我可以对各种样式进行边修改边预览,从而保证了样式 编辑de效率.此外,在“Style checker”标签页面中,我能很清楚地看到当前样式文件中,有哪些语法上de错误,用鼠标单击其中de某一错误内容后,Topstyle程序还能弹出一 个信息提示,来知道我该如何正确改正语法错误.在其他de标签页面中,我还可以了解到当前样式表de一些注释和统计信息,例如样式文件中包含了多少行内容 等.

　　辅助学习功能
　　 Topstyle程序特别为那些刚刚接触CSSde菜鸟用户 们,提供详细de帮助功能.利用该功能,用户可以从该程序内置dehelp文件中,查询到与CSS相关de各种指令de详细用法介绍,以及编写CSS原相关代码de一些 小技巧,菜鸟完全可以将它作为一个很好deCSS资料来学习使用.
　　 此外,与Topstyle程序一起安装deTopstyle Lite版本,相对来说,功能更简洁明了,我可以在Topstyle程序de安装目录中运行这个简装版程序；该程序只为我提供了简单de样式文件de编辑、 创建以及预览功能,而没有向导创建功能、CSS码检查错误功能等,不过这些功能对菜鸟用户来说,已经是绰绰有余了!
　　 总之,Topstyle程序de整体性能很不错,是一款不可多得、不可不用de样式表编辑工具.有了Topstyle程序de帮助,相信您一定会成为一位出色deCSS编辑和设计专家.

用过Wordde人都知道Word 有一个“项目符号和编号”de功能,用起来很方便.Dreamweaver3de属性面板也有一个类似有de“项目符号和编号”de图标按钮,产生自动列表功能, 但它只有两种形式,即方块和阿拉伯数字.不过我可以利用Dreamweaver3deCSS定义功能去重新定义“列表符号de格式”.下面以定义一个“大写 罗马数字项目列表符号”为例来说明其使用方法:

1、按F7(或点击快速启动栏里那个象“八卦图”似de图标),调出CSS面板,选择 “none”,再点击面板下部de编辑图标,在弹出de“Edit Style Sheet”对话框上按“New”按钮,在弹出de“New Style”对话框中选择“Redifine HTML TAG(重定义HTML标记)”后,在下面de“Tag”选择框中选择“ol”,按OK,立即弹出“Style Definition for ol”对话框,如下图所示:

在“Style Definition for ol”对话框左边de选择窗口中选择“list”,在右边de面板上我只要定义“Type”就行了,点一下右边那个三角形按钮,可看到如下图所示de列表:

2、我来解释一下上图中这个列表中各项de含义:

disc:实心圆；

circle:空心圆；

square:实心方块；

decimal:十进制数字；

lower-roman:小写罗马数字；

upper-roman:大写罗马数字；

lower-alpha:小写英文字母；

upper-alpha:大写英文字母；

none:不显示项目符号和编号.

很显然,在本例中要选择“upper-roman”,然后按OK返回(要注意 “Bullet”属性现在不要选,否则有可能就不是预期de结果了).在“Edit Style Sheet”对话框上按“Done”按钮结束.在网页源相关代码de〈head〉与〈/head〉之间见到deCSS相关代码是这样de:

〈style type=”text/css”〉

〈!–

ol { list-style-type: upper-romancircle}

–〉

〈/style〉

对于不是使用Dreamweaver3de网友,直接把上述相关代码复制在〈head〉与〈/head〉之间,产生de效果相同.

3、这样当我在设计网页时,在属性面板上点击项目编号图标

就能获得大写罗马数字de列表了,但在编辑时看到de还是十进制编号,只有在浏览时才显示其本来面目.若需要其它格式de编号,只要在第二步中选择列表中de其它样式就行了.

若是要使按下

图标后,项目符号前面那个图形(默认de是实心方块)也改变为数字编号,只要在第一步中选择“Tag”标记时不要选“ol”而改为选“ul”,其它操作完全相同.如要把它改成用大写罗马数字项目符号,则得到deCSS相关代码是这样de:

〈style type=”text/css”〉

〈!–

ul { list-style-type: upper-romancircle}

–〉

〈/style〉

从这里可以看,这两个图标所起de作用基本相同,只是标记不同而已.

IE5及其以后版本支持在CSS中使用expression,用来把CSS属性和Javas?cript表达式关联起 来,这里deCSS属性可以是元素固有de属性,也可以是自定义属性.

　CSS属性后面可以是一段Javas?cript表达式,CSS属性de值等于 Javas?cript表达式计算de结果.?在表达式中可以直接引用元素自身de属性和方法,也可以使用其他浏览器对象.这个表达式就好像是在这个元素de一 个成员函数中一样.

　　给元素固有属性赋值

　　例如,您可以依照浏览器de大小来安置一个元素de位置.

#myDiv?{
position:?absolute;
width:?100px;
height:?100px;
left:?expression(document.body.offsetWidth?-?110? ?”px”);
top:?expression(document.body.offsetHeight?-?110? ?”px”);
background:?red;
}

　　给元素自定义属性赋值

　　例如,消除页面上de链接虚线框.?通常de做法是:

<a?href=”link1.htm”?onfocus=”this.blur()”>link1</a>
<a?href=”link2.htm”?onfocus=”this.blur()”>link2</a>
<a?href=”link3.htm”?onfocus=”this.blur()”>link3</a>?

　　粗看或许还体现不出采用expressionde优势,但如果您de页面上有几十甚至上百个链接,这时de您难道还会机械式地Ctrl C,Ctrl V么,何况两者一比较,哪个产生de冗余相关代码更多呢？

　　采用expressionde做法如下:?

<style?type=”text/css”>
a?{star?:?expression(onfocus=this.blur)}
</style>
<a?href=”link1.htm”>link1</a>
<a?href=”link2.htm”>link2</a>
<a?href=”link3.htm”>link3</a>?

　 　说明:里面destar就是自己任意定义de属性,您可以随自己喜好另外定义,接着包含在expression()里de语句就是JS脚本,在自定义属性与 expression之间可别忘了还有一个引号,因为实质还是CSS,所以放在style标签内,而非s?cript内.OK,这样就很容易地用一句话实 现了页面中de链接虚线框de消除.不过您先别得意,如果触发de特效是CSSde属性变化,那么出来de结果会跟您de本意有差别.例如您想随鼠标de移进移出而改变 页面中de文本框颜色更改,您可能想当然de会认为应该写为?

<style?type=”text/css”>
input?
{star?:?expression(onmouseover=this.style.backgroundColor=”#FF0000″;
onmouseout=this.style.backgroundColor=”#FFFFFF”)}
</style>
<style?type=”text/css”>
input?{star?:?expression(onmouseover=this.style.backgroundColor=”#FF0000″;
onmouseout=this.style.backgroundColor=”#FFFFFF”)}
</style>
<input?type=”text”>
<input?type=”text”>
<input?type=”text”>

　　可结果却是出现脚本出错,正确de写法应该把CSS样式de定义写进函数内,如下所示:

<style?type=”text/css”>
input?{star?:?expression(onmouseover=function()
{this.style.backgroundColor=”#FF0000″},
onmouseout=function(){this.style.backgroundColor=”#FFFFFF”})?}
</style>
<input?type=”text”>
<input?type=”text”>
<input?type=”text”>?

　　注意

　　不是非常需要,一般不建议使用expression,因为expression对浏览器资源要求比较高.

不少网站开始采用韩式风格来建站.一般人都会想到用Photoshop等软件来完成这样de效果,但如果网页上这类图片太多,或是较大时,会给访问带来一定de困难.这里就给大家讲一讲如何用CSS来做这样de风格,因为用CSS只是对颜色de定义,少了图片de应用,所以基本不会影响速度.
这种风格de特点是色彩变化丰富、应用Flash动画合理、结构新颖,最明显de特点就是表格或标题栏常会加上一条横或竖de色带,如图中圈起来de地方就是这样:
　

　　
　　 首先,在Dreamweaver MX 2004中为页面添加一个CSS效果类,具体设置如图.

　　 点击OK后,会弹出具体de效果设置,打开其中deborder标签,进行如图de设置.

　　 然后将Background标签中deBackground Color设置为“#BAEE66”,在您要应用这种风格de表格上添加这个CSS效果就OK了.
　　 应用这种方法,大家可以做出各式各样美观且访问速度很快de表格来,下图是笔者试做de几种风格,大家可以根据borderde设定再结合表格de设计来做出各式各样de效果来.

本篇详细介绍如何利用CSS能方便地控制对象de“显示”和“隐藏”属性原理,制作一个树状目录,用CSS制作这样de树状目录,方法简单,相关代码也比较少,所以把它写出来,给网友们共亨,以便在需要de时候也可动手做一个.

索易电子杂志大多采用树状目录,当鼠标点击主目录时,展开子目录；当再次点击主目录时,则关闭子目录.显得简捷明快,朴实无华.
制作这种树状目录de方法较多,最近我先看下面de示例:当用鼠标在主目录上点一下,就下拉出相应de子目录,再点一下,又恢复原状,其效果与索易电子杂志上de目录效果完全一致.

　　 制作方法:
　　 我先把产生这种效果de相关代码复制如下,然后结合相关代码讲制作方法:
〈div id=”main1″ style=”color:blue” onclick=”document.all.child1.style.display=(document.all.child1.style.display ==”none”)?””:”none”” 〉
主目录1〈/div〉
〈div id=”child1″ style=”display:none”〉
〈a href=”#”〉- 子目录1〈/a〉 〈br〉
〈a href=”#”〉- 子目录2〈/a〉 〈br〉
〈a href=”#”〉- 子目录3〈/a〉 〈br〉
〈a href=”#”〉- 子目录4〈/a〉
〈/div〉
〈div id=”main2″ style=”color:blue” onclick=”document.all.child2.style.display=(document.all.child2.style.display ==”none”)?””:”none”” 〉
主目录2 〈/div〉
〈div id=”child2″ style=”display:none”〉
〈a href=”#”〉- 子目录1〈/a〉 〈br〉
〈a href=”#”〉- 子目录2〈/a〉 〈br〉
〈a href=”#”〉- 子目录3〈/a〉
〈/div〉
　　 注:“ ”表示一个字符空格
　 　1、先定义两个DIV,一个用于主目录,取名为:main1；另一个用于相应de子目录,取名为:child1.　　2、在main1deDIV中写上“ 主目录1”,并在它de上面加载一个鼠标单击事件:onclick 和一小段Javascript程序:document.all.child1.style.display= (document.all.child1.style.display ==”none”)?””:”none”.这段程序de作用是,当鼠标在main1deDIV上(也就是在“ 主目录1”上)单击时,如果child1deDIV是隐藏de,让它显示；若是显示de,则让它隐藏.
　　 3、在child1deDIV上写上子目录,并 把它设置成超级链接,我在上面de示例中是设置了空链接,实际制作时把它改为实链接,以让它指向链接目标.在child1deDIV定义中加上一个CSS: style=”display:none”,其目de是使子目录开始时处于隐藏状态.
　　 其它目录de制作只是重复上面de三步而已.按F12就可看到 效果了.这种方法主要是利用了CSSde显示属性:display,它有一个特点就是当对象被隐藏后,对象所占据de页面空间将自动让出.我知道CSS还一 个属性:visibility也具有显示和隐藏de对象de功能,但不能用来制作上面de树状目录.因为Visibility在隐藏对象后,对象所占据de空间并 不释放,也就是当隐藏子目录时,子目录de位置只是一片空白而已位置并没有让出来,因此另一个主目录也就无法靠拢.所以它只能用于那些需要固定页面元素位置 de地方.

CSS本身没有直接提供变换HTML链接下划线de功能,但只要运用一些技巧,我还是可以让单调de网页链接下划线变得丰富多彩.

　　一、基本原理

　　首先,自定义HTML链接下划线de第一步是创建一个图形,在水平方向重复放置这个图形即形成下划线效果.如果要显示出下划线背后de网页背景,可以使用透明de.gif图形.

　　其次,如果下划线图形de高度较大,则必须适当增加文本de高度,使得一行文本de底部与下一行文本de顶部之间有较大de空间,例如p { line-height: 1.5; }.

自定义链接下划线示例

　　第三,为显示出自定义de下划线,必须隐藏默认de下划线,即a { text-decoration: none; }.

　　第四,为链接元素设置下划线图形,构造出自定义de下划线.假设下划线图形是underline.gif,则设置下划线图形deCSS相关代码为a { background-image: url(underline.gif); }.

　　第五,我要让下划线图形在水平方向反复出现,但不能在垂直方向重复出现,否则它将被隐藏到文本de背后.要求下划线只在水平方向重复出现de相关代码为:a { background-repeat: repeat-x; }.

　　第六,为保证图形出现在链接文字de下方(不管字体de大小),用background-position属性将图形放在链接元素de底部.对于箭头之类de下划线图形,可能还要考虑图形在水平方向de对齐方向.假设要将下划线图形放在右下角,CSS相关代码为:a { background-position: 100% 100%; }.

　　第七,为了在链接文本de下方给自定义图形留出空间,必须加入适当de空白.下划线图形相对于链接文字de具体位置与文字de大小有关,但一般而言,可以先让底部空白等于下划线图形de高度,必要时再作调整.例如:a { padding-bottom: 4px; }.

　　第八,由于下划线图形放在链接元素de底部,必须保证链接不折行(如允许链接跨越多个行,则只有下面一行de链接文本下面会有自定义de下划线).用CSSdewhite-space属性可以防止链接文字折行,即a { white-space: nowrap; }.

　　综上所述,为链接元素定义CSS样式属性de完整例子如:

　　a {

　　　

text-decoration: none;

　　　

background: url(underline.gif) repeat-x 100% 100%;

　　　

padding-bottom: 4px;

　　　

white-space: nowrap;

　　

}

　　如果要让自定义下划线只在鼠标停留时出现,只要把原来直接设置在链接元素上deCSS background属性改到:hover ,例如:

　　a {

　　　

text-decoration: none;

　　　

padding-bottom: 4px;

　　　

white-space: nowrap;

　　

}

　　a:hover {

　　　

background: url(underline.gif) repeat-x 100% 100%;

　　

}

　　二、实例欣赏

　　假设有两个下划线图形diagonal.gif(波纹线)、flower.gif(花朵)前者de高、宽是3、9,后者de高、宽是11、15.下面是一个设置两种下划线de完整实例:

自定义链接下划线举例

　　网页源相关代码如下:

　　

注:diagonal.gif　和　flower.gif已经先拷贝到网页所在de同一目录下.

　　<html>

　　

<head>

　　

<title>ex</title>

　　<style type="text/css">

　　a#example1a {

　　

text-decoration: none;

　　

background: url(diagonal.gif) repeat-x 100% 100%;

　　

white-space: nowrap;

　　

padding-bottom: 2px;

　　

}

　　a#example1b {

　　

text-decoration: none;

　　

white-space: nowrap;

　　

padding-bottom: 2px;

　　

}

　　a#example1b:hover {

　　

background: url(diagonal.gif) repeat-x 100% 100%;

　　

}

　　a#example2a {

　　

text-decoration: none;

　　

background: url(flower.gif) repeat-x 100% 100%;

　　

white-space: nowrap;

　　

padding-bottom: 10px;

　　

}

　　a#example2b {

　　

text-decoration: none;

　　

white-space: nowrap;

　　

padding-bottom: 10px;

　　

}

　　a#example2b:hover {

　　

background: url(flower.gif) repeat-x 100% 100%;

　　

}

　　–>

　　

</style>

　　

</head>

　　<body>

　　<p>实例:</p>

　　

<p> <a href="#" id="example1a">波纹线静态下划线</a>,

　　

<a href="#" id="example1b">鼠标停留时出现de波纹线</a>.</p>

　　

<p> <a href="#" id="example2a">花朵静态下划线</a>,

　　

<a href="#" id="example2b">鼠标停留时出现de花朵下划线</a>.</p>

　　</body>

　　

</html>