CSS技巧让你的网站更上一层楼
47个CSS技巧让你的网站更上一层楼
CSS是网站的外衣，所谓人靠衣装，佛靠金装，CSS决定了你给用户的第一感觉。虽然一直在做网站的架构和后端开发，但是还是需要多揣点CSS技巧，以防万一。
01.DIV水平居中
DIV 水平居中很简单，只需要设置DIV的宽带以及让左右margins设置成auto：
div#container {width: 960px; margin: 0 auto }
02.文字垂直居中
单行文字居中，只需要将行高和容器高度设置成一样即可。比如下面的HTML代码：
<div id="container">我是一行字</div>
然后通过下面的样式就可以居中：
div#container {height: 35px; line-height: 35px;}
如何你有很多行字，只要将行高设置成容器的高度的1/N就好。
03.DIV垂直居中
比如有以下两个div，如何让包在中间的div垂直居中，这里有一篇详细的介绍文章。
<div id="f">
<div id="s">Some Things!</div>
</div>
首先，将外层容器的定位为relative。
div#f{ position:relative; height:500px; }
然后，将里面的容器定位设置成absolute，再将它的左上角沿y轴下移50%，最后将它margin-top上移本身高度的50%即可。
div#s { position: absolute; top: 50%; height: 250px; margin-top: -125px; }
使用同样的思路，也可以做出水平居中的效果。
04.自适应宽带的图片
可以通过以下样式实现只适用外层容器大小的图片:
img {max-width: 100%}
/* IE 6 hack */
<!--[if IE 6]>
img {width: 100%}
<![endif]-->
05.3D按钮
要想让按钮具有3D效果，可以将它的左上部边框设为浅色，右下部边框设为深色即可。
div#button {
background: #888;
border: 1px solid;
border-color: #999 #777 #777 #999;
}
06. CSS Font 缩写
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: normal;
font-variant: small-caps;
font-style: italic;
line-height: 150%;
}
/* 可以缩写成以下这种方式 */
body {
font: font-style font-variant font-weight font-size/line-height font-family;
}
详细介绍参见：A Primer on the CSS Font Shorthand Property
06.可以在DIV上设置多个class
<div type="text/css" href="ie-stylesheet.css" />
< ![endif]-->
<!--[if IE 6]> - targets IE6 only -->
<!--[if gt IE 6]> - targets IE7 and above -->
<!--[if lt IE 6]> - targets IE5.5 and below -->
<!--[if gte IE 6]> - targets IE6 and above -->
<!--[if lte IE 6]> - targets IE6 and below -->
12.HTML Hack for IE
IE这个杯具的浏览器可以通过以下方式进行 hack 。被hack的css只会运行在特定的浏览器上。
/* the following rules apply only to IE6 */
* html{
}
* html body{
}
* html .foo{
}
/* the following rules apply only to IE7 */
*+html .foo{
}
13.CSS的优先级
基本规则是：行内样式 > id样式 > class样式 > 标签名样式。
14.IE中min-height修正
由于IE6不支持min-height，我们可以通过以下这些方式修正：
/* 方法一 */
.element {
min-height: 500px;
height: auto !important;
height: 500px;
}
/* 方法二 */
.element {
min-height: 500px
_height: 500px /* _ 只有IE6才能读取 */
}
15.font-size 基准
/* 假设浏览器的默认的大小是 16px ， 首先将其设置为10px (font-size:10/16) */
body {font-size:10/16;}
/* 然后就可以用em做统一字体单位了 2.4em = 24px */
h1 {font-size: 2.4 em}
16.100% Height
通过内部容器将页面撑开，在IE中的min-height可以通过上面hack解决：
html, body {height: 100%}
#content {min-height: 100%}
17. CSS Drop Caps
首字母样式定义：
p:first-letter {
display: block;
float: left;
margin: 5px 5px 0 0;
color: red
font-size: 1.4em;
background: #ddd;
font-family: Helvetica;
}
18.取消link外面的框框
a {outline: none} or a {outline: 0}
19.Text-transform
p {text-transform: uppercase} /* 全部大写 */
p {text-transform: lowercase} /* 全部小写 */
p {text-transform: capitalize} /* 首字母大写 */
20.Font Variant
只对英文有效，将字体整成等高的大写字体。
p {font-variant: small-caps}
21.移除带有链接的图片的外框
a image {border: none} or a image {border: 0}
22.重置浏览器的CSS
参考 YUI 和 Eric Meyer 吧。
23.设置背景图的 Padding
/* background-position {top-value left-value} */
{background-position: 5px 5px}
24.用图片列表标志
默认情况下，浏览器是用一个黑圆圈作为列表标志，我们用图片取代它：
ul {list-style: none}
ul li {
background-image: url("dot.png");
background-repeat: none;
background-position: 0 0.5em;
}
25.透明容器
如何将容器设置成透明：
.element {
filter:alpha(opacity=50); /* for ie */
-moz-opacity:0.5; /* for ff */
-khtml-opacity: 0.5; /* for webkit as chrome */
opacity: 0.5; /* for opera */
}
26.三角形
如何使用CSS生成一个三角形？简单方案：将它四个边框中的三个边框设为透明，只剩下一个，就可以生成三角形效果：
.element {
border-color: transparent transparent green transparent;
border-style: solid;
border-width: 0px 300px 300px 300px;
height: 0px;
width: 0px;
}
27. 禁止自动换行
h1 { white-space:nowrap; }
28.用图片替换文字
为了杯具的SEO，我需要在标题栏里用图片展现，同时也要保证搜索引擎能读到标题。
h1 {
text-indent:-9999px;
background:url("h1-image.jpg") no-repeat;
width:200px;
height:50px;
}
29.突显焦点元素
input:focus { border: 2px solid green; }
30.!important
多条CSS语句冲突时，具有!important的语句将覆盖其他语句。由于IE不支持!important，所以也可以利用它区分不同的浏览器。
/* IE 显示蓝色标题，其他浏览器显示红色标题 */
h1 {
color: red !important;
color: blue;
}
31.CSS实现提示框
当鼠标移动到链接上方，会自动出现一个提示框:
<a href="#">Link<span>Tooltips</span></a>
a.tooltip {position: relative}
a.tooltip span {display:none; padding:5px; width:200px;}
a:hover {background:#fff;} /*background-color is a must for IE6*/
a.tooltip:hover span{display:inline; position:absolute;}
32.固定页头
当页面滚动的时候，页首固定在位置不变，适合导航条:
body{ margin:0;padding:100px 0 0 0;}
div#header{
position:absolute;
top:0;
left:0;
width:100%;
height:<length>;
}
@media screen{
body>div#header{position: fixed;}
}
* html body{overflow:hidden;}
* html div#content{height:100%;overflow:auto;}
