CSS设计技巧详解

日期：2008年8月28日作者：查看:[大字体中字体小字体]

　　我想以一章的篇幅来讨论用CSS设定文字样式的做法是个好点子.一般处理文字内容大概是应用CSS最多的地方,就算对没有完全遵守标准的网站来说也是一样.去掉网页中反复出现的＜font>标签曾经是(现在也是)十分吸引设计者的事情,而且不难看出以CSS控制文字排印的巨大优势,也就是进一步分离内容和展示方式.

　　从先前的很多例子我们知道了CSS能处理许多情况,而设定文字样式就算对最基本的网页来说也是加上设计元素最简单的技巧.同时,以CSS为文字加上样式也能让我们避免在页面内加上不必要的图片.

　　在这一章里,我们将看到CSS如何把一段乏味普通的文字带到另一个高度(以新色彩,大小和字体).

　　如何让超文本看起来更酷?

　　指定文字样式是CSS最擅长的工作之一,就算是面对略嫌老旧,不完整支持CSS进阶功能的浏览器也是一样.在过去,设计者与开发者或许会想在设计文字达到大小,粗体之外的效果时,制作出以今日标准来看无法忍受并且难以使用的网页(曾经看过文字大多以图片表现的网页吗?但你又恰巧在使用文字浏览器的时候...)

　　为了提供你一些使用图片之外的替代技巧同时能回答上面这个问题,在这章中,会用一段尚未设定样式的文字作为开头,逐渐为它加上各种CSS规则,使它成为引人注目的设计.

　　不断改变的Times

　　开始先以浏览器的预设字体看一段即将处理的文字.以我的情形来说,预设字体是16像素的Times.并在Mac OS X上面使用Safari浏览器,因为这样,所以看到的文字会是以反锯齿方式描绘的,如果是使用Windows XP并启动了ClearType的话,也能看到类似的效果.

　　Times(或者是变体 Times New Roman)是许多浏览器的预设字体,然而,这很容易被使用者改成他们自己喜欢的字体,因此你当然不能依赖这个预设值.

　　图1显示了我们在本章里使用的尚未加上样式的文字内容:一个以＜h1>标记的简单标题,跟这是三段家居装潢的技巧说明.

　　

　　图1 浏览器显示标题,文字的预设效果

　　　　改变行高

　　最简单,最有效的文字样式效果之一,是line-height属性,在每行文字之间加上一些额外的空间,就能让文字段落更容易阅读,更吸引人,也能为你的页面带来奇妙的效果.

　　只要为＜body>标签加上以下的CSS规则就能完成这个技巧.当然也可以为其它标签加上这条规则,比如说只想改变＜p>的行高.

　　body {

　　 line-height: 1.5em;

　　 }

　　这段代码的意义是:页面上文字的行高应该是文字高度的1.5倍.我喜欢在指定line-height的时候使用em单位,因为它们会随着字体大小而改变.

　　图2显示的是加上line-height之后的效果.

　　

　　图2 预设文字加上行高之后的效果

　　看起来已经变得很棒了,小小的line-height能办到的效果实在惊人.

　　都在家族里

　　当然,我们也能改变字体,但需要留意的是可能会被使用者系统上安装的字体限制住.

　　接着以font-family属性为实例加上一组希望使用的字体.这边的概念是:指定一组字体列表,中间以逗号隔开,并且以希望使用的顺序排列.如果使用者没有安装列表中的第一个字体,浏览器会选用第二个字体,以此类推.

　　body {
[1] [2] [3] [4] 下一页
CSS设计技巧详解相关文章：
·电脑高手的140个电脑技巧
·《拳皇2002》隐藏超杀出招表 - 技巧心得
·电脑高手必备 Windows系统35招实用技巧
·我所用的140个XP高级优化技巧！
·Photoshop高手必知技巧大全
·QQ小技巧十三则
·《鬼泣3》枪手-蓄力射击的技巧(PS2) - 鬼泣3攻略秘籍 - 鬼泣3
·怎么提高与客户沟通的技巧
·市场营销技巧案例启示录：经典营销寓言故事
·渲染技巧：VR室外小教程
CSS设计技巧详解相关软件
·摄影技巧
·口才技巧
·电脑技巧大全
·XP实用技巧
·vc++编程技巧与范例
·电脑技巧精彩文章100篇-(1) ：《电脑技巧》 V2003年合订本
·黑客技巧大全1.0版
·减肥新法与技巧
·DW3图层应用技巧集锦
·Delphi技巧大全

上一篇:防范内部人员利用网络的方案

下一篇:本地交互式登录禁用的处理办法

特别声明：本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载，但请务必注明出处和原始作
者.文章版权归文章原始作者所有.对于被本站转载文章的个人和网站，我们表示深深的谢意。如果本站转
载的文章有版权问题请联系编辑人员,我们尽快予以更正. 转载请注明来源：http://www.hackhome.com

CSS设计技巧详解

精品推荐

热点TOP10

特别推荐