CSS样式源码（案列）---------------------------持续更新，欢迎大家补充分享

1、宽度居中实例(box块居中）

        body{text-align:center}
.box{ margin:0 auto; width:500px; height:100px; border:1px solid #00F;text-align:left;}

2、使用text-indent来隐藏文本

这个常用在图片替换文本中，最常见的就是使用使用图片来替换Logo，这个是非常有用的，使用“text-indent”我们可以达到图片替换文本的效果，而且方便搜索引擎的优化，还能支持阅读器阅读网页内容：

h1 {
text-indent:-9999px;
margin:0 auto;
width:400px;
height:100px;
background:transparent url("images/logo.jpg") no-repeat scroll;
}

3、根据文件格式设置链接图标

这个技巧主要是针对用户体验，让用户能很清楚点击的链接是有关于什么方面的内容，比如说，点击某个链接会到跳到站外。换句话说使用属性选择器器，给不同的链接设置不同的图标，让用户很轻松的明白相应的链接是有关于什么方面的内容：

a[href^="http:"] {
display:inline-block;
padding-right:14px;
background:transparent url(/Images/ExternalLink.gif) center right no-repeat;
}
a[href^="mailto:"] {
display:inline-block;
padding-left:20px;
line-height:18px;
background:transparent url(/Images/MailTo.gif) center left no-repeat;
}
a[href$='.pdf'] {
display:inline-block;
padding-left:20px;
line-height:18px;
background:transparent url(/Images/PDFIcon.gif) center left no-repeat;
}
a[href$='.swf'], a[href$='.fla'], a[href$='.swd'] {
display:inline-block;
padding-left:20px;
line-height:18px;
background:transparent url(/Images/FlashIcon.gif) center left no-repeat;
}
a[href$='.xls'], a[href$='.csv'], a[href$='.xlt'], a[href$='.xlw'] {
display:inline-block;
padding-left:20px;
line-height:18px;
background:transparent url(/Images/ExcelIcon.gif) center left no-repeat;
}
a[href$='.ppt'], a[href$='.pps'] {
display:inline-block;
padding-left:20px;
line-height:18px;
background:transparent url(/Images/PowerPointIcon.gif) center left no-repeat;
}
a[href$='.doc'], a[href$='.rtf'], a[href$='.txt'], a[href$='.wps'] {
display:inline-block;
padding-left:20px;
line-height:18px;
background:transparent url(/Images/WordDocIcon.gif) center left no-repeat;
}
a[href$='.zip'], a[href$='.gzip'], a[href$='.rar'] {
display:inline-block;
padding-left:20px;
line-height:18px;
background:transparent url(/Images/ZIPIcon.gif) center left no-repeat;
}

4、在IE浏览器中删除textarea的滚动条
IE浏览器中textarea默认就有滚动条出现，为了达到所有浏览器默认下一致的效果，其实我们可以使用代码让他达到一致的效果：
textarea{
overflow:auto;
}
5、段落首字下沉
有杂志排版中我们常看到第一个段落的首字下沉的效果，其实这种效果实现是相当的容易：
p:first-letter{
display:block;
margin:5px 0 0 5px;
float:left;
color:#FF3366;
font-size:60px;
font-family:Georgia;
}

6、所有浏览器下的CSS透明度

元素透明度时常是个恼人的问题，下面这种方式可以实现所有浏览器下的透明度设置：
.transparent {
      zoom: 1;
      filter: alpha(opacity=50);
      opacity: 0.5;
}
但是使用opacity会影响其后代元素的透明度，我们可以考虑使用：

.transparent {
/* Fallback for web browsers that doesn't support RGBa */
background: rgb(0, 0, 0);
/* RGBa with 0.6 opacity */
background: rgba(0, 0, 0, 0.6);
/* For IE 5.5 - 7*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
/* For IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}

7、图片预加载有时是非常有用的，这样当某个元素需要时，他就已经被加载了，此时就不会有任何延误或闪烁的现像：

#preloader {
/* Images you want to preload*/
background-image: url(image1.jpg);
background-image: url(image2.jpg);
background-image: url(image3.jpg);
width: 0px;
height: 0px;
display: inline;
}

8、基本的CSS Sprite按钮

CSS Sprite我想大家一定是非常熟悉，我们时常在按钮或链接中使用CSS Sprites,用来提搞用户的体验。比如说，我们有一个按钮，当用户鼠标在按钮上时需要显示另一种背景，那么我们就可以使用这样的技术：


a {
display: block;
background: url(sprite.png) no-repeat;
height: 30px;
width: 250px;
}


a:hover {
background-position: 0 -30px;

}

9、固定页脚

固定页脚在屏幕的底部，在现代浏览器来说是一件非常容易的事情，但是在IE6下还是需要特殊的处理：


#footer {
position:fixed;
left:0px;
bottom:0px;
height:30px;
width:100%;
background:#999;
}


/* IE 6 */
* html #footer {
position:absolute;
top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
}

10、翻转图片


翻转图像随着CSS3的transform越来越实用，不需要重新加载图片，就可以实现一个图片的旋转。常见的是一个三角型效果，我们想让他在不同状态展示不同的风格：


img.flip {
-moz-transform: scaleX(-1);           //webkit引擎支持-webkit-transform私有属性，mozilla Gecko引擎支持-moz-transform私有属性，Presto引擎支持-o-transform私有属性，IE浏览器暂时不支持transform属性，也没有定义transform的私有属性，不过可以通过IE滤镜实现。
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}

11、圆角

随着CSS3的属性的出现，我们制作圆角效果就不需要在像以前那样的辛苦了，可以使用CSS3的border-radius来实现，只是在IE-6-8下无法实现，我们来看现代浏览器下如何制作圆角：
.round{
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px; /* for old Konqueror browsers */
border-radius: 10px; /* future proofing */
}

12、clearfix

clearfix主要是使用他来清除浮动，只需要添加这个类名无需加上任何HTML标记，就可以达到清除浮动的效果：

.clearfix:before,
.clearfix:after {
content: " ";
display:table;
}


.clearfix:after {
clear:both;
overflow:hidden;
}
.clearfix { 
zoom: 1;
}

13、圆角


随着CSS3的属性的出现，我们制作圆角效果就不需要在像以前那样的辛苦了，可以使用CSS3的border-radius来实现，只是在IE-6-8下无法实现，我们来看现代浏览器下如何制作圆角：


.round{
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px; /* for old Konqueror browsers */
border-radius: 10px; /* future proofing */
}

14、!important


!important有时可以帮我们做很多事，他可以覆盖任何相同的样式，换句话说他可以改为样式的权重：


p{
font-size:20px !important;
}

15、@font-face
@font-face也是CSS3的属性之一，他能在所有浏览器下运行。最大的作用就是让用户没有字体的浏览下也能支持网页字体，具体使用：


@font-face {
font-family: 'Graublau Web';
src: url('GraublauWeb.eot');
src: local('☺'),
url('GraublauWeb.woff') format('woff'), url('GraublauWeb.ttf') format('truetype');
}
h2 {
font-family:'Graublau Web';
}

15、::selection

有很多朋友肯定不知道这个属性的作用。它可以改变选择的文本的背景色和前景色，突出你的浏览器中的选择文本效果：
//本属性的意思是，对于选中的部分，改变样式。（较少使用）

::selection {
color: #000000;
background-color: #FF0000;
}
::-moz-selection {
color: #000000;
background: #FF0000;
}

16、处理溢出的问题

<!DOCTYPE html>
<html>
<head>
<style> 
div.test
{
white-space:nowrap; 
width:12em; 
overflow:hidden; 
border:1px solid #000000;
}
</style>
</head>
<body>


<p>下面两个 div 包含无法在框中容纳的长文本。正如您所见，文本被修剪了。</p>


<p>这个 div 使用 "text-overflow:ellipsis" ：</p>


<div class="test" style="text-overflow:ellipsis;">This is some long text that will not fit in the box</div>


<p>这个 div 使用 "text-overflow:clip"：</p>


<div class="test" style="text-overflow:clip;">This is some long text that will not fit in the box</div>


</body>
</html>

17、处理hr的默认阴影更改问题；

html中水平衡线hr默认高度是两个像素，其中border-top高1px，且颜色为黑，border-bottom高1px颜色为灰，这时看着是阴影效果 

去掉阴影效果很简单，只需在css里把border-bottom或border-top属性设置一个为none即可

.hrtest{
border-top:1px solid red;
border-bottom:none;
} 
18、文字特效立体与凹体效果
    #test{
text-shadow:-1px -1px white,
    1px  1px #333;
}
     #test{
test-shadow:1px  1px   white,
   -1px -1px  #444;
}
19、防止表格的th标题行被顶开

#test{
word-break：keep-all；
word-wrap：normal；
white-space：nowrap;
}
另外，为th添加属性 <th nowrap="nowrap">姓名</th>
20、实现文本换行
#test{
word-wrap：break-word；
overflow：hidden；
}
21、实现遮罩的灯箱效果


demo代码


div{
position:absolute;
}
.bg{
width:100%;
height:100%;
background:#000;
opacity:0.7;
filter:alpha(opacity:70);
}
.lightbox{
left:50px;
top:50px;
}

</style>
<body>
<div class="web"><img src="images/web_1.jpg width="1259" height="630" /></div>
    <div class="bg"></div>
    <div class="lightbox"><img src="images/web_1.jpg" width="80%"></div>
</body>