首字大写
首字大写在印刷界十分常见,这能为段落加上华丽而优雅的效果,而且不必用上图片就能办到这种效果,只用CSS就够了.
首先,必须为标记源代码加上一个"样式锚点"让我们有办法调用第一段的第一个字母.我们将 "I" 用一组＜span>标签包起来并给它指定class=drop,如果我们才能在页面或整个网站里重复使用首字大写效果.
＜p>＜span class="drop">I＜/span>f you're painting with latex paints, and the job ...
在某些完全支持CSS2规范的现代浏览器中,我们可以用:first-letter伪类设定段落首字效果,而不必加上额外的标签,虽然语义上非常棒,不幸的是许多浏览器都不支持这个效果.
现在我们能完全控制第一段的 "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;
}
结合我们现在为示例内容加上的所有样式,图6是浏览器显示首字大写的效果,它完全没有用上图片,只靠简单的CSS与标记语法完成.
图6 用CSS制作的首字大写效果.
文字对齐
同样受印刷界启发,我们能以text-align属性为文字应用左右对齐效果.左右对齐之后的文字会拉开单字之间的距离,让每行的宽度变得一样长,造出紧密,界限明确的分栏效果.
body {
font-family: Georgia, Times, serif;
line-height: 1.5em;
text-align: justify;
}
图7是作为示例的文字,现在左右对齐了!
图7 以text-align属性左右对齐过的文字效果
留意文字内容在左侧以及右侧都排列成一条直线.其他text-align属性能使用的设定值有:left,right,center.
举例来说,我们也能为＜h1>标签应用text-align属性,将示例的标题居中.
h1 {
letter-spacing: 4px;
font-style: italic;
text-align: center;
}
图8是标题居中之后的效果.
图8 用textalign属性把＜h1>居中
|
