前端开发
by smallnest

22个必须知道的css技巧

本文是 Gredswsh的技术生活 整理的 22个必须知道的css技巧， 作为偶尔也会涉猎前端开发的我来说，特别喜欢一些前端开发的总结性的文章，文末我也附上了其它几篇关于CSS技巧的文章。

1、改变选中文字的背景和颜色

1
2
3
4
5
6
7
8
::selection{ /* Safari and Opera */
    background:#c3effd;
    color:#000;
}
::-moz-selection{ /* Firefox */
    background:#c3effd;
    color:#000;
}

2、防止火狐滚动条跳动

1
html{ overflow-y:scroll; }

3)分页打印

1
.page-break{ page-break-before:always; }

4、使用!important

1
.page { background-color:blue !important;   background-color:red;}

5、图像替换文字

1
2
3
4
5
6
.header{
    text-indent:-9999px;
    background:url('someimage.jpg') no-repeat;
    height: 100px; /*dimensions equal to image size*/
    width:500px;
}

标注：text-indent:-9999px; 是将首行左缩进到人看不到的地方

6、兼容浏览器的最小高度

1
2
3
4
5
#container{
    height:auto !important;/*all browsers except ie6 will respect the !important flag*/
    min-height:500px;
    height:500px;/*Should have the same value as the min height above*/
}

7、对新窗口打开得链接高亮显示

1
2
3
4
5
6
7
8
9
10
a[target="_blank"]:before,
a[target="new"]:before {
    margin:0 5px 0 0;
    padding:1px;
    outline:1px solid #333;
    color:#333;
    background:#ff9;
    font:12px "Zapf Dingbats";
    content: "\279C";
}

8、美化li序列号

如图：

1
2
3
4
5
6
7
8
ol {
    font: italic 1em Georgia, Times, serif;
    color: #999999;
}
ol p {
    font: normal .8em Arial, Helvetica, sans-serif;
    color: #000000;
}

9、首字下沉

如图：

1
2
3
4
5
6
7
8
p:first-letter{
display:block;
margin:5px 0 0 5px;
float:left;
color:#FF3366;
font-size:3.0em;
font-family:Georgia;
}

10、兼容浏览器的opacity

1
2
3
4
5
6
.transparent_class {  
        filter:alpha(opacity=50);  
        -moz-opacity:0.5;  
        -khtml-opacity: 0.5;  
        opacity: 0.5;  
    }

11、使用line-height实现垂直居中

1
line-height:30px;

12、居中布局

1
2
3
4
body{
    width:1000px;
    margin:0 auto;
}

13、移除ie文本域的垂直滚动条

1
2
3
textarea{
    overflow:auto;
}

14、移动超链接的虚线框

1
a:active, a:focus{ outline:none; }

15、ie下元素消失，给该元素添加

1
position:relative;

16、根据链接不一样，添加不一样的icons

1
2
3
4
a[href$='.doc'] {
    padding:0 20px 0 0;
    background:transparent url(/graphics/icons/doc.gif) no-repeat center right;
}

17、css手型点击样式

1
input[type=submit],label,select,.pointer { cursor:pointer; }

18、字母大写

1
text-transform: capitalize;

19、所有英文大写，且首字母比其他的大

1
font-variant:small-caps;

20、高亮文本框，不支持ie

1
2
3
input[type=text]:focus, input[type=password]:focus{
    border:2px solid #000;
}

21、移除img边框

1
a img{ border:none; }

22、用label实现无表格表单

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
HTML Code
<form method="post" action="#" >
<p><label for="username" >Username</label>
<input type="text" id="username" name="username" />
</p>
<p><label for="password" >Username</label>
<input type="password" id="password" name="pass" />
</p>
<p><input type="submit" value="Submit" /></p>
</form>
CSS Code
p label{
    width:100px;
    float:left;
    margin-right:10px;
    text-align:right;
}

参考：http://www.cnblogs.com/guoguo-15/archive/2011/08/24/2151859.html

其它值得阅读的CSS文章：

  1. 53 CSS-Techniques You Couldn’t Live Without
  2. The 30 CSS Selectors you Must Memorize
  3. CSS3 Techniques You Should Know
  4. 25 Incredibly Useful CSS Tricks You Should Know
  5. 你应该知道的一些事情——CSS权重
  6. 7个你可能不认识的CSS单位