标记语言——为文字指定CSS样式(3)

首字大写

首字大写在印刷界十分常见,这能为段落加上华丽而优雅的效果,而且不必用上图片就能办到这种效果,只用CSS就够了.

首先,必须为标记源代码加上一个"样式锚点"让我们有办法调用第一段的第一个字母.我们将 "I" 用一组<span>标签包起来并给它指定class=drop,如果我们才能在页面或整个网站里重复使用首字大写效果.

<p><span class="drop">I</span>f you're painting with latex paints, and the job ...

在某些完全支持CSS2规范的现代浏览器中,我们可以用:first-letter伪类设定段落首字效果,而不必加上额外的<span>标签,虽然语义上非常棒,不幸的是许多浏览器都不支持这个效果.

现在我们能完全控制第一段的 "I" 字母了,让我们加上CSS声明,以便把字体放大,同时将它浮动到左侧(这样,其他的文字才不会包围它显示),我们也会加上装饰用的背景,边框.

.drop {

  float: left;

  font-size: 400%;

  line-height: 1em;

  margin: 4px 10px 10px 0;

  padding: 4px 10px;

  border: 2px solid #ccc;

  background: #eee;

  }

结合我们现在为示例内容加上的所有样式,图13-6是浏览器显示首字大写的效果,它完全没有用上图片,只靠简单的CSS与标记语法完成.

图13-6 用CSS制作的首字大写效果.

文字对齐

同样受印刷界启发,我们能以text-align属性为文字应用左右对齐效果.左右对齐之后的文字会拉开单字之间的距离,让每行的宽度变得一样长,造出紧密,界限明确的分栏效果.

body {

  font-family: Georgia, Times, serif;

  line-height: 1.5em;

  text-align: justify;

  }

 图13-7是作为示例的文字,现在左右对齐了!

图13-7 以text-align属性左右对齐过的文字效果

留意文字内容在左侧以及右侧都排列成一条直线.其他text-align属性能使用的设定值有:left,right,center.

举例来说,我们也能为<h1>标签应用text-align属性,将示例的标题居中.

h1 {

  letter-spacing: 4px;

  font-style: italic;

  text-align: center;

  }

图13-8是标题居中之后的效果.

图13-8 用textalign属性把<h1>居中