实用的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. htmlbodydivspanappletobjectiframe,h1h2h3h4h5h6pblockquotepre,aabbr,acronym,addressbigcitecode,deldfnemfontimginskbdqssamp,smallstrikestrongsubsup,ttvar,buicenter,dldtddolulli,fieldsetformlabellegend,tablecaptiontbodytfoot,theadtrthtd {
  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. olul {
  16.     list-style: none;
  17. }
  18.  
  19. blockquoteq {
  20.     quotes: none;
  21. }
  22.  
  23. blockquote:beforeblockquote:after,
  24. q:beforeq: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', seriffont-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 ;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. #container p {
  2.                 -webkit-column-count: 3;
  3.                 -webkit-column-gap: 10px;
  4.                
  5.                 -moz-column-count: 3;
  6.                 -moz-column-gap: 10px;
  7.                
  8.                 column-count: 3;
  9.                 column-gap: 10px;
  10.             }

分成3列,间隔为10像素,效果参见demo,请勿在IE下浏览。

有以下几个参数可配置

  • column-count 列数
  • column-gap 列间的间隔
  • column-width 自定义列的宽度
  • column-rule 列边框设置

你可能感兴趣的:(CSS)