[翻译]标记语言和样式手册 Chapter 13 为文字指定样式

作者:zhaozy 来源:3user.com 时间:2008-02-15 16:08:00 

阅读上一章:Css布局

Chapter 13 为文字指定样式

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

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

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

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

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

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

不断改变的Times

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

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

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


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

改变行高

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

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

body {
  line-height: 1.5em;
  }

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

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


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

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

标签:文字,样式,标记,css,手册
0
投稿

猜你喜欢

  • python实现canny边缘检测

    2022-03-05 00:24:08
  • Python基于requests实现模拟上传文件

    2023-09-30 01:42:05
  • SQL Server错误代码大全及解释(留着备用)

    2024-01-14 07:08:44
  • 十行Python3代码实现把情书写到图片中

    2023-10-15 22:03:44
  • 原型方法的不同写法居然会影响调试的解决方法

    2024-04-17 10:02:32
  • python+tkinter编写电脑桌面放大镜程序实例代码

    2023-08-02 17:10:43
  • 详解pyenv下使用python matplotlib模块的问题解决

    2023-08-08 20:25:01
  • Python实现名片管理系统

    2022-01-11 21:45:12
  • Python 20行简单实现有道在线翻译的详解

    2022-02-12 22:19:29
  • Python 图片视频模糊化实现案例

    2023-05-28 11:50:52
  • 关于python的第三方库下载与更改方式

    2021-02-28 10:32:55
  • Python中使用haystack实现django全文检索搜索引擎功能

    2023-06-30 07:21:03
  • Python处理文本文件中控制字符的方法

    2022-02-24 09:16:05
  • Vue router安装及使用方法解析

    2023-07-02 16:50:00
  • 纯JS实现动态时间显示代码

    2024-05-02 17:31:34
  • MySQL为数据表建立索引的原则详解

    2024-01-13 14:46:18
  • GoFrame glist 基础使用和自定义遍历

    2024-05-28 15:23:26
  • mysql实现按照某个时间段分组统计

    2024-01-14 21:18:36
  • jupyter notebook更换皮肤主题的实现

    2023-04-13 07:31:38
  • Python加pyGame实现的简单拼图游戏实例

    2021-12-20 04:31:45
  • asp之家 网络编程 m.aspxhome.com