爱米*阅

不是日志,不是剪切板

css 代码片段 - [技术 | Tech]

发布时间   2011-02-20 @ 13:16:00 标签    css 编辑 | 分享 0

版权声明:转载时请以超链接形式标明文章原始出处和作者信息及本声明
http://www.blogbus.com/amixyue-logs/106058346.html

利用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. body {
  11. line-height: 1;
  12. }
  13. ol, ul {
  14. list-style: none;
  15. }
  16. blockquote, q {
  17. quotes: none;
  18. }
  19. blockquote:before, blockquote:after,
  20. q:before, q:after {
  21. content: '';
  22. content: none;
  23. }
  24. /* remember to define focus styles! */
  25. :focus {
  26. outline: 0;
  27. }
  28. /* remember to highlight inserts somehow! */
  29. ins {
  30. text-decoration: none;
  31. }
  32. del {
  33. text-decoration: line-through;
  34. }
  35. /* tables still need 'cellspacing="0"' in the markup */
  36. table {
  37. border-collapse: collapse;
  38. border-spacing: 0;
  39. }
基础的css使用图片的按钮样式
  1. a {
  2. display: block;
  3. background: url(sprite.png) no-repeat;
  4. height: 30px;
  5. width: 250px;
  6. }
  7. a:hover {
  8. background-position: 0 -30px;
  9. }
谷歌的字体服务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. /* IE 7 */
  4. *+html .yourclass{ }
  5. /* IE 7 and modern browsers */
  6. html>body .yourclass { }
  7. /* Modern browsers (not IE 7) */
  8. html>/**/body .yourclass { }
  9. /* Opera 9.27 and below */
  10. html:first-child .yourclass { }
  11. /* Safari */
  12. html[xmlns*=""] body:last-child .yourclass { }
  13. /* Safari 3+, Chrome 1+, Opera 9+, Fx 3.5+ */
  14. body:nth-of-type(1) .yourclass { }
  15. /* Safari 3+, Chrome 1+, Opera 9+, Fx 3.5+ */
  16. body:first-of-type .yourclass { }
  17. /* Safari 3+, Chrome 1+ */
  18. @media screen and (-webkit-min-device-pixel-ratio:0) {
  19. .yourclass { }
  20. }
固定定位,通用于IE6
  1. #footer {
  2. position:fixed;
  3. left:0px;
  4. bottom:0px;
  5. height:30px;
  6. width:100%;
  7. background:#999;
  8. }
  9. /* IE 6 */
  10. * html #footer {
  11. position:absolute;
  12. 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');
  13. }

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. .clearfix { display: inline-block; }
  10. /* start commented backslash hack */
  11. * html .clearfix { height: 1%; }
  12. .clearfix { display: block; }
  13. /* 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. }
分享到: