10个非常有用的CSS技巧

简介:

1. 将网页或元素居中       

center      

    
HTML:

  1. <div class="wrap">  
  2. </div><!-- end wrap -->  
 
CSS:
  1. .wrap { width:960pxmargin:0 auto;}  

 

 

2.Sticky Footer (让页脚永远停靠在页面底部,而不是根据绝对位置)
    
stickyfooter

    

  
HTML:

  1. <div id="wrap">  
  2.   
  3. <div id="main" class="clearfix">  
  4.   
  5. </div>  
  6.   
  7. </div>  
  8.   
  9. <div id="footer">  
  10.   
  11. </div>  

CSS:

  1. * { margin:0padding:0; }   
  2.   
  3. html, body, #wrap { height100%; }  
  4.   
  5. body > #wrap {heightautomin-height100%;}  
  6.   
  7. #main { padding-bottom150px; }  /* must be same height as the footer */  
  8.   
  9. #footer {  
  10.         positionrelative;  
  11.  margin-top-150px/* negative value of footer height */  
  12.  height150px;  
  13.  clear:both;}   
  14.   
  15. /* CLEAR FIX*/  
  16. .clearfix:after {content".";  
  17.  displayblock;  
  18.  height0;  
  19.  clearboth;  
  20.  visibilityhidden;}  
  21. .clearfix {display: inline-block;}  
  22. /* Hides from IE-mac */  
  23. * html .clearfix { height1%;}  
  24. .clearfix {displayblock;}  
  25. /* End hide from IE-mac */  

 

3.跨浏览器最小高度设置      
min-height

       

 CSS:

  1. .element { min-height:600pxheight:auto !importantheight:600px; }  

 

 

4.Box阴影(CSS3)
    
box-shadow

    

    
CSS:

  1. .box { box-shadow: 5px 5px 5px #666;  -moz-box-shadow: 5px 5px 5px #666;  -webkit-box-shadow: 5px 5px 5px #666; }  

 

5.文字阴影(CSS3)

    
text-shadow

        

CSS:

  1. .text { text-shadow1px 1px 1px #666; filter: Shadow(Color=#666666, Direction=135, Strength=5); }  

 

6.跨浏览器的CSS透明度
    
opac

 

CSS:

  1. .transparent {  
  2.     
  3.   /* Modern Browsers */ opacity: 0.7;  
  4.   
  5.   /* IE 8 */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";  
  6.   
  7.   /* IE 5-7 */ filter: alpha(opacity=70);  
  8.   
  9.   /* Netscape */ -moz-opacity: 0.7;  
  10.   
  11.   /* Safari 1 */ -khtml-opacity: 0.7;  
  12.     
  13. }  

 

 

7.著名的 Meyer Reset(重置)
    
reset

 

CSS:

  1.   html, body, div, span, applet, object, iframe,  
  2. h1, h2, h3, h4, h5, h6, p, blockquote, pre,  
  3. a, abbr, acronym, address, big, cite, code,  
  4. del, dfn, em, font, img, ins, kbd, q, s, samp,  
  5. small, strike, strong, sub, sup, tt, var,  
  6. dl, dt, dd, ol, ul, li,  
  7. fieldset, form, label, legend,  
  8. table, caption, tbody, tfoot, thead, tr, th, td {  
  9.  margin0;  
  10.  padding0;  
  11.  border0;  
  12.  outline0;  
  13.  font-weight: inherit;  
  14.  font-style: inherit;  
  15.  font-size100%;  
  16.  font-family: inherit;  
  17.  vertical-alignbaseline;  
  18. }  
  19. /* remember to define focus styles! */  
  20. :focus {  
  21.  outline0;  
  22. }  
  23. body {  
  24.  line-height1;  
  25.  colorblack;  
  26.  backgroundwhite;  
  27. }  
  28. ol, ul {  
  29.  list-stylenone;  
  30. }  
  31. /* tables still need 'cellspacing="0"' in the markup */  
  32. table {  
  33.  border-collapseseparate;  
  34.  border-spacing0;  
  35. }  
  36. caption, th, td {  
  37.  text-alignleft;  
  38.  font-weightnormal;  
  39. }  
  40. blockquote:before, blockquote:after,  
  41. q:before, q:after {  
  42.  content"";  
  43. }  
  44. blockquote, q {  
  45.  quotes"" "";  
  46. }  
  47.    

 

8.删除虚线轮廓      
dotted

    

CSS:

  1. a, a:active { outlinenone; }  

 

9.圆角
    
rounded

         

CSS:

  1. .element {  
  2.  -moz-border-radius: 5px;  
  3.  -webkit-border-radius: 5px;  
  4.  border-radius: 5px/* future proofing */  
  5. }  
  6. .element-top-left-corner {  
  7.  -moz-border-radius-topleft: 5px;  
  8.  -webkit-border-top-left-radius: 5px;  
  9. }  

 

10.覆盖内联的样式
import

     

 CSS:

  1. .override {  
  2.  font-size14px !important;  
  3. }  
本文转自寒意博客园博客,原文链接:http://www.cnblogs.com/hnyei/archive/2011/11/12/hnyei.html,如需转载请自行联系原作者
相关文章
|
15天前
|
XML 编解码 前端开发
CSS语言的基本内容
CSS语言的基本内容
|
前端开发 Java SEO
【CSS详解】一文掌握CSS基础用法(上)
【CSS详解】一文掌握CSS基础用法(上)
153 0
|
前端开发
【CSS详解】一文掌握CSS基础用法(下)
【CSS详解】一文掌握CSS基础用法(下)
【CSS详解】一文掌握CSS基础用法(下)
|
前端开发 容器
CSS补充
CSS补充
106 0
|
前端开发 容器
【前端三件套-CSS】Emmet语法,选择器的分类,三大属性
【前端三件套-CSS】Emmet语法,选择器的分类,三大属性
91 0
【前端三件套-CSS】Emmet语法,选择器的分类,三大属性
|
弹性计算 前端开发
技巧篇:CSS高级技巧详解
  display -- block;(转换为块元素&& 显示) none(隐藏 && 不保留原来的位置) -- 重要!   visibility -- visible(显示) hidden (隐藏 && 保留原来的位置 )   复习:overflow:hidden; 1.之前解决父子关系垂直嵌套的合并塌陷问题。2.清除浮动
116 0
|
前端开发 JavaScript
CSS-Next : CSS预处理器简单写法的替代者, 想了解下么?
借助相关的插件我们可以把新的特性降级主流浏览器可以识别的状态(比如CSS3模拟) 但里面的一些特性,折腾了下发现基本可以满足开发了(代替CSS预处理器SASS,LESS); 因为大多数人用预处理器最多的几个特性无非如下: 继承,嵌套写法, 全局变量,计算颜色 当然,这不是说sass/less 不够好,相反它们可以做更多复杂的工作,逻辑运算和条件判断这些;
202 0
|
iOS开发
css3的高级而有用且很少人知道的属性和样式
1、-webkit-mask 概属性可以给一个元素添加蒙层,蒙层可以是一个渐变或者半透明的png图片,这张png图片的 alpha 为 0 的位置会不显示元素这部分,alpha 为 1 的位置会显示元素这部分。
1157 0
|
前端开发
|
前端开发 容器 数据安全/隐私保护