网页设计教程:CSS文字排版技巧大全

1
2
3
4
5

text-decoration: normal;
text-decoration: underline;
text-decoration: overline;
text-decoration: line-through;
text-decoration: blink;

预览

1. text-decoration设置为normal
2. text-decoration设置为underline
3. text-decoration设置为overline
4. text-decoration设置为line-through
5. text-decoration设置为blink (只有Firefox 和Opera 支持)

Font-Variant

font-variant属性允许你制作小型大写字母效果，也就是将小写字母变成大写并减小字体型号

1
2
3

font-variant: normal;
font-variant: small-caps;
font-variant: inherit;

预览

1. Font Variant 设置为 normal
2. Font Variant 设置为 small-caps
3. Font variant 设置为 inherit

Letter-Spacing 和 word-spacing

这两个属性都用来添加他们对应的元素中的空白。letter-spacing添加字母之间的空白，而word-spacing添加每个单词之间的空白。请注意，word-spacing对中文无效。

1
2
3

letter-spacing: normal;
letter-spacing: 2px;
letter-spacing: inherit;

预览

1. Letter spacing 设置为 normal
2. Letter spacing 设置为 2px
3. Letter spacing设置为 inherit

font缩写

上面的font属性可以缩写，这样可以大大的提高你的css的效率。

1

font:font-style font-variant font-weight font-size[/line-height] font-family

请注意上面的缩写的书写顺序。另外，如果这里不设置line-height，元素的line-height将会被设置为默认的1，而不会从父级元素或body元素继承。使用缩写的时候，font-size和font-family是必须的，其它几项可根据情况不写。

制作有吸引力的段落

对于更有吸引力的段落排版，可以采用Robert Bringhurst的方法，它约定：用你的文字大小乘以30就可以得到段落的宽度。

比如如果你的文字大

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!