实用的css代码片段集合

发布于，归属于css3。 前9个座位已被强势霸占！ 共有456人围观    

这几天明河出了趟远门，博客的更新落下了，这二天将多发几篇实用的文章\(^o^)/~

以下css代码片段都非常实用，是不可多得的css技巧。

利用text-indent隐藏文本

text-indent的主要作用在于文本缩进，但text-indent还有个妙用，先看代码：

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

text-indent:-9999px;即文本负缩进-9999像素（溢出容器），那么你在屏幕上就无法看到文本了，达到隐藏文本的作用。
那么其意义在哪呢？
主要是考虑SEO。举个典型例子，你的站点的logo部分是个图片，为了SEO，一般加title属性，但效果显然没有直接加文本来的好，而利用text-indent，你既加上了文本，同时不影响logo效果。

删除IE下文本域的滚动条
  1. textarea{
  2.     overflow:auto;
  3. }
全兼容浏览器的透明度设置
  1. .transparent{
  2.     filter:alpha(opacity=50);
  3.     -moz-opacity:0.5;
  4.     -khtml-opacity:0.5;
  5.     opacity:0.5;
  6. }

非常实用，通用大部分浏览器。-moz-opacity的作用是为了支持一些老版本的Mozilla浏览器，-khtml-opacity的作用是支持一些老版本的Safari浏览器。

Eric Meyer写的经典重置样式
  1. html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym,address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td {
  2.     margin: 0;
  3.     padding: 0;
  4.     border: 0;
  5.     outline: 0;
  6.     font-size: 100%;
  7.     vertical-align: baseline;
  8.     background: transparent;
  9. }
  10.  
  11. body {
  12.     line-height: 1;
  13. }
  14.  
  15. ol, ul {
  16.     list-style: none;
  17. }
  18.  
  19. blockquote, q {
  20.     quotes: none;
  21. }
  22.  
  23. blockquote:before, blockquote:after,
  24. q:before, q:after {
  25.     content: '';
  26.     content: none;
  27. }
  28.  
  29. /* remember to define focus styles! */
  30. :focus {
  31.     outline: 0;
  32. }
  33.  
  34. /* remember to highlight inserts somehow! */
  35. ins {
  36.     text-decoration: none;
  37. }
  38.  
  39. del {
  40.     text-decoration: line-through;
  41. }
  42.  
  43. /* tables still need 'cellspacing="0"' in the markup */
  44. table {
  45.     border-collapse: collapse;
  46.     border-spacing: 0;
  47. }
基础的css使用图片的按钮样式
  1. a {
  2. display: block;
  3. background: url(sprite.png) no-repeat;
  4. height: 30px;
  5. width: 250px;
  6. }
  7.  
  8. a:hover {
  9.     background-position: 0 -30px;
  10. }
谷歌的字体服务API
  1. <head>
  2.     Inconsolata:italic|Droid+Sans">
  3. </head>
  1. body {
  2.     font-family: 'Tangerine', 'Inconsolata', 'Droid Sans', serif; font-size: 48px;
  3. }

目前好像还没有中文的字体。

浏览器的特殊hacks
  1. /* IE 6 */
  2. * html .yourclass { }
  3.  
  4. /* IE 7 */
  5. *+html .yourclass{ }
  6.  
  7. /* IE 7 and modern browsers */
  8. html>body .yourclass { }
  9.  
  10. /* Modern browsers (not IE 7) */
  11. html>/**/body .yourclass { }
  12.  
  13. /* Opera 9.27 and below */
  14. html:first-child .yourclass { }
  15.  
  16. /* Safari */
  17. html[xmlns*=""] body:last-child .yourclass { }
  18.  
  19. /* Safari 3+, Chrome 1+, Opera 9+, Fx 3.5+ */
  20. body:nth-of-type(1) .yourclass { }
  21.  
  22. /* Safari 3+, Chrome 1+, Opera 9+, Fx 3.5+ */
  23. body:first-of-type .yourclass {  }
  24.  
  25. /* Safari 3+, Chrome 1+ */
  26. @media screen and (-webkit-min-device-pixel-ratio:0) {
  27.  .yourclass  {  }
  28. }

非常经典，明河严重推荐收藏。

固定定位，通用于IE6
  1. #footer {
  2.     position:fixed;
  3.     left:0px;
  4.     bottom:0px;
  5.     height:30px;
  6.     width:100%;
  7.     background:#999;
  8. }
  9.  
  10. /* IE 6 */
  11. * html #footer {
  12.     position:absolute;
  13.     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');
  14. }

IE 6是不支持position:fixed;的，这里使用绝对定位来模拟。代码中的expression是啥含义？请点此。

翻转图片
  1. img.flip {
  2.     -moz-transform: scaleX(-1);
  3.     -o-transform: scaleX(-1);
  4.     -webkit-transform: scaleX(-1);
  5.     transform: scaleX(-1);
  6.     filter: FlipH;
  7.     -ms-filter: "FlipH";
  8. }
清理浮动
  1. .clearfix:after {
  2.     visibility: hidden;
  3.     display: block;
  4.     font-size: 0;
  5.     content: " ";
  6.     clear: both;
  7.     height: 0;
  8. }
  9.  
  10. .clearfix { display: inline-block; }
  11.  
  12. /* start commented backslash hack */
  13. * html .clearfix { height: 1%; }
  14. .clearfix { display: block; }
  15. /* close commented backslash hack */

极度经典，明河严重推荐收藏。

圆角（不支持IE）
  1. .round{
  2.     -moz-border-radius: 10px;
  3.     -webkit-border-radius: 10px;
  4.     border-radius: 10px; /* future proofing */
  5.     -khtml-border-radius: 10px; /* for old Konqueror browsers */
  6. }
@font-face字体设置
  1. @font-face {
  2.     font-family: 'Graublau Web';
  3.     src: url('GraublauWeb.eot');
  4.     src: local('☺'),
  5.         url('GraublauWeb.woff') format('woff'), url('GraublauWeb.ttf') format('truetype');
  6. }
居中页面
  1. .wrapper {
  2.     width:960px;
  3.     margin:0&nbsp;auto;
  4. }
IE中的最小高度
  1. .box {
  2.     min-height:500px;
  3.     height:auto !important;
  4.     height:500px;
  5. }
正在读取图片的效果
  1. img {
  2.     background: url(loader.gif) no−repeat 50% 50%;
  3. }
垂直居中
  1. .container {
  2.     min-height: 10em;
  3.     display: table-cell;
  4.     vertical-align: middle;
  5. }

原文：http://www.1stwebdesigner.com/development/useful-css-snippets/

（如果您喜欢这篇教程，可以通过支付宝打赏我们1元哦，拜谢！）

跟作者说两句

:wink: :twisted: :roll: :oops: :mrgreen: :lol: :idea: :evil: :cry: :arrow: :?: :-| :-x :-o :-P :-? :) :( :!: 8-O 8)

9个座位已被强势霸占！

  1. uboomla

    报告博主：右边栏“快速注册”的用户名和邮箱输入框太长了，跑出边栏框了。
    我的上网环境：ubuntu10.04+firefox3.6.8

    怎么没有about页面呢？留言栏好像也没找到。

    明河共影回复于 2010年08月09日 8:49

    留言栏和about页，我没加上去。我在firefox3.6下测试正常，只是是win下的，不知道跟环境有没有关系

  2. DuJing

    哈哈!
    先收藏..
    快看四川省省运会直播了…

  3. 老饕

    Prefect！果然实用！！！

    明河共影回复于 2010年08月11日 2:18

    还有一些css代码片段没发上去，日后补充上去。

  4. 静静

    最后一点垂直居中display: table-cell，css2还不支持，只有css3才支持。
    另外，safari和chrome的hack，还是不理解啊 body:nth-of-type(1) body:first-of-type，怎么有2个，有什么区别呢？
    求，详解，呵呵。。

    明河共影回复于 2010年08月11日 8:19

    呵呵css2已经存在display: table-cell，只是很少人用，没办法，IE6不支持，好像IE7也不支持。
    :nth-of-type(X索引值)的作用为匹配同样式名下的同级第X个元素，而:first-of-type匹配同样式名下的同级第1个元素。二者同属于结构性伪类，而结构性伪类只在firefox3.5以上、safari、chrome（WebKit）、Opera上才支持。

  5. wmtimes

    很不错的一个收集。

  6. wmtimes

    很有用的一些css，不错。支持了。

同类