22个必须知道的css技巧

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

::selection{ /* Safari and Opera */
        background:#c3effd;
        color:#000;
}
::-moz-selection{ /* Firefox */
        background:#c3effd;
        color:#000;
}

2、防止火狐滚动条跳动　html{ overflow-y:scroll; }

3、分页打印 page-break{ page-break-before:always; }

4、使用!important

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

 5、图像替换文字

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

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

#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、对新窗口打开得链接高亮显示

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序列号

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

9、首字下沉

p:first-letter{
     
display:block;
margin:5px 0 0 5px;
float:left;
color:#FF3366;
font-size:3.0em;
font-family:Georgia;
}

10、兼容浏览器的opacity

.transparent_class {
      
filter:alpha(opacity=50); 
-moz-opacity:0.5; 
-khtml-opacity: 0.5; 
opacity: 0.5; 
}

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

line-height:30px;

12、居中布局

body{
     
width:1000px;
margin:0 auto;
}

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

textarea{
     
overflow:auto;
}

14、移动超链接的虚线框

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

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

position:relative;

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

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

17、css手型点击样式

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

18、字母大写

text-transform: capitalize;

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

font-variant:small-caps;

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

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

21、移除img边框

a img{
      border:none; }

22、用label实现无表格表单

Username


Username




p label{
     
width:100px;
float:left;
margin-right:10px;
text-align:right;
}

本文来自web前端：http://www.webqdjs.com/?p=220

 

 

转载于:https://www.cnblogs.com/shangjuelian/archive/2013/05/15/3079830.html