Css 使用小技巧

Contents

为链接文本添加边框
小号大写字母
为链接添加图标
居中显示
文本居中
块结构居中

用 Muse 写笔记，输出为 html 的时候自然是希望自己的页面漂亮一点，于是抽 时间看了一点 css ，不过看官方的文档确实很枯燥，图书馆借到的书又大都是 讲 IE 专有 css 属性的，最后发现一个最佳的学习 css 的方案：平时在网上逛， 要是看到漂亮的页面，再打开他的 css 对照着官方文档来看，就能学到自己最 感兴趣的内容了！ :D 下面介绍一些我知道的小技巧。

为链接文本添加边框

在有些网站上看到链接是这样的：你把鼠标放到上面的时候文本周围会出现方框， 我觉得很好看，可是我用

a.hover { border: 1px solid }

的时候，每次鼠标移动到链接上面，方框出现了，可是因为方框的出现导致文字 的宽度改变，一整行的文字都要``抖动''一下，感觉很不好！后来我发现原来边 框的颜色可以做成透明的，于是先做个隐藏边框：

a { border: 1px solid transparent }

等到鼠标移动到这儿的时候再显示出颜色来：

a.hover { border: 1px solid black }

就不会因为新出现的边框而改变大小导致一行的文本抖动了！另外还有一个办法 是指定 outline 属性，例如：

a.hover { outline: 1px solid black }

因为 outline 的绘制不会影响到元素的位置和大小等属性，所以也不会引起抖 动。

小号大写字母

在 EmacsWiki 上面看到那些小标题很漂亮，虽然全部是大写字母，但是单词的 第一个字母比其他字母要高一点，其他字母就成了``小号大写字母''。后来发现 css 里面有个属性 font-variant 可以产生这种效果，例如：

h1
{
  font-variant: small-caps;
}

就可以在 h1 标题里面产生这种效果了。目前这个属性还只有 small-caps 和 none 两个选项，可能随着 css 的发展以后会有更多漂亮的选项哟！

为链接添加图标

比如在每一个链接的后面添加一个``链接''的图标，其实只要计算好图标的大小 就好了：

a
{
  background: url(image/external.png) center right no-repeat;
  padding-right: 13px;
}

居中显示

文本居中

文本居中只需要指定 text-align 属性为 center 即可。例如：

P { text-align: center }

块结构居中

一个块结构，可以通过设定 margin-left 和 margin-right 的办法来让他居中 显示，如果页面大小是变动的，可以设定为百分比，另外，如果块结构的宽度是 固定的，可以把他们都设定为 auto ，例如，表格的宽度可以看作是固定的(也 可以使用 width 属性手工指定宽度)：

table
{
  margin-left: auto;
  margin-right: auto;
}

这样就可以居中显示了。

对于图片，可以让它强制为一个块结构，例如：

IMG.displayed
{
  display: block;
  margin-left: auto;
  margin-right: auto;
}