`

10个有用的CSS

阅读更多

The top 10 most useful css snippets of today.

I have noticed myself to use a few different code snippets on a daily basis so I thought some of you might find them useful. So here we go.

     
  1.    
    center     
    Centering a website (or other elements)
       
    The HTML
    1. <DIV class=wrap>  
    2. </DIV>  
    3.   
    4. <!-- end wrap -->  
    <!-- end wrap -->

    The CSS

     

    1. .wrap { width:960pxmargin:0 auto;}  
      .wrap { width:960px; margin:0 auto;}
    

     

    This is an oldie, but apperantly it is not as obvious as you would think.

     

     


  2.    
    stickyfooter

       
    Sticky Footer (make footer always be on bottom without absolute positioning)

     
    The HTML

     

    1. <DIV id=wrap>  
    2. <DIV class=clearfix id=main>  
    3. </DIV>  
    4. </DIV>  
    5. <DIV id=footer>  
    6. </DIV>  

    The CSS

     

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

     

    As of recently i have had to use this over 50 times… i think this is one of the most important tricks you will learn today.

     

     


  3.    
    min-height

       
    Cross-Browser Min Height

     
    The CSS

     

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

     

    You can replace the min-height and heigth with 12em or another value that works for you.

     

     


  4.    
    box-shadow

       
    Box Shadow (CSS3)

     
    The CSS

     

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

     

    As you can see since this is a CSS3 property you will need all the three commands to make it cross browser(except for ie of course). The first 2 measurements are for horizontal offset and the vertical offset. The third number is for the blur radius. And the last is the color of the shadow.

     

     


  5.    
    text-shadow

       
    Text Shadow (CSS3) with IE hack

     
    The CSS

     

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

     

    This technique is great for all modern browsers, the IE fix works but it is not amazing quality.

     

     


  6.    
    opac

       
    Cross Browser CSS Opacity

     
    The CSS

     

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

     

    Opacity can be used for plenty of elements, it adds a certain new age style we all strive for. Notice that in some browsers transperancy is inherited by all child elements!

     

     


  7.    
    reset

       
    The Famous Meyer Reset

     
    The 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. margin: 0;   
    10. padding: 0;   
    11. border: 0;   
    12. outline: 0;   
    13. font-weight: inherit;   
    14. font-style: inherit;   
    15. font-size: 100%;   
    16. font-family: inherit;   
    17. vertical-alignbaselinebaseline;   
    18. }   
    19. /* remember to define focus styles! */  
    20. :focus {   
    21. outline: 0;   
    22. }   
    23. body {   
    24. line-height: 1;   
    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-spacing: 0;   
    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. }  
      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,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
    }
    /* remember to define focus styles! */
    :focus {
    outline: 0;
    }
    body {
    line-height: 1;
    color: black;
    background: white;
    }
    ol, ul {
    list-style: none;
    }
    /* tables still need 'cellspacing="0"' in the markup */
    table {
    border-collapse: separate;
    border-spacing: 0;
    }
    caption, th, td {
    text-align: left;
    font-weight: normal;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
    content: "";
    }
    blockquote, q {
    quotes: "" "";
    }
    

     

    This is the most useful css reset out there, i use it for almost everything I work on (even the 52framework, coming soon).

     

     


  8.    
    dotted

       
    Removing the dotted outlines

     
    The CSS

     

    1. a, a:active { outlinenone; }  
      a, a:active { outline: none; }
    

     

    I find myself getting very annoyed with the dotted outline (especially for text-indented elements that are off the page).

     

     


  9.    
    rounded

       
    Rounded Corners (non ie)

     
    The 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. }  
      .element {
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px; /* future proofing */
    }
    .element-top-left-corner {
    -moz-border-radius-topleft: 5px;
    -webkit-border-top-left-radius: 5px;
    }
    

     

    Love rounded corners? Don’t want to slave over images and elements to get the effect? This is your solution, and elements still look fine in ie.

     

     


  10.    
    import

       
    Override Inline Styles

     
    The CSS

     

    1.   .override {   
    2. font-size14px !important;   
    3. }  
      .override {
    font-size: 14px !important;
    }
    

     

分享到:
评论

相关推荐

    10 个有用免费 CSS3 强大工具

    本篇文章将详细介绍10个免费且强大的CSS3工具,这些工具能够帮助开发者更高效地设计和优化网站。 1. **CSS3 Generator**:这个在线工具允许用户快速生成CSS3属性,如渐变、阴影、边框半径等,大大简化了代码编写...

    10个Web前端开发中免费且非常有用CSS代码共2页.pd

    这份"10个Web前端开发中免费且非常有用CSS代码共2页.pdf.zip"压缩包文件包含了10个实用且免费的CSS代码片段,这些代码可以帮助开发者提高工作效率,实现各种复杂的网页设计效果。以下是对这些知识点的详细解释: 1....

    CSS速成教程 10分钟学会

    【CSS速成教程 10分钟学会】 CSS(Cascading Style Sheets)是网页设计中的核心技术,用于定义页面布局、颜色、字体等视觉效果。它让网页内容与表现分离,提高了网页的可维护性和可扩展性。在大型网站中,CSS的应用...

    纯CSS一个DIV悬浮并且FF圆角

    标题中的“纯CSS一个DIV悬浮并且FF圆角”是指如何仅使用CSS来实现一个浮动的div元素,并在Firefox浏览器下保持圆角效果。这个话题涵盖了CSS布局、定位以及浏览器兼容性方面的知识。以下是对这些知识点的详细解释: ...

    CSS3.rar_css_css线条的旋转

    下面将详细讨论CSS3中的线条旋转以及如何实现多个线条的loading加载动画。 首先,CSS3中的`transform`属性允许我们对元素进行旋转、缩放、平移和倾斜等变换。对于线条的旋转,我们主要使用`rotate()`函数,其语法为...

    CSS40个布局实例

    随着技术的发展,虽然我们通常所说的CSS3已经成为现代前端开发的标准,但"CSS40个布局实例"这个主题可能指的是利用CSS3的高级特性来实现的40种不同的布局解决方案。这些实例旨在帮助开发者掌握各种复杂的网页布局...

    css实战手册源代码

    10. **伪类与伪元素**:如`:hover`、`:active`、`:focus`、`:first-child`等伪类和`::before`、`::after`等伪元素在创建交互效果和增强视觉反馈时非常有用。 通过深入研究`CSS2e_MM_TUTORIALS`中的源代码,你不仅...

    最好的CSS目录

    CSS4Free是一个免费提供CSS设计资源的网站,它不仅包含了各种高质量的设计案例,还提供了一些实用的设计工具和技术指南,对于初学者来说尤其有用。 #### 18. CSSGalaxy CSSGalaxy是一个汇集了大量优秀CSS设计作品的...

    关于CSS的3本有用的书

    10. **浏览器兼容性**:尽管CSS3标准已经相当成熟,但各浏览器对某些特性的支持程度不一,因此了解和使用工具如Can I Use来检查兼容性是必要的。 以上就是关于CSS的一些关键知识点,通过深入学习和实践,你可以掌握...

    总结的超级有用的基础CSS样式类

    10. **CSS层叠**:CSS的层叠规则决定了哪些样式会覆盖其他样式。理解权重计算(内联样式 &gt; ID选择器 &gt; 类选择器 &gt; 标签选择器)是解决样式冲突的关键。 11. **CSS重置**:为了消除浏览器之间的默认样式差异,通常会...

    10-23-css3手风琴.zip

    标题中的“10-23-css3手风琴”指的是一个使用CSS3实现的手风琴效果的示例项目。在网页设计中,手风琴效果通常用于在一个有限的空间内展示可展开和折叠的内容块,这在展示多个相关但不都需要同时显示的信息时非常有用...

    CSS3图片画廊效果

    在描述中提到的链接是一个CSDN博客文章,作者分享了如何使用CSS3创建一个图片画廊。这种效果通常包含以下几个关键知识点: 1. **响应式设计**:CSS3中的媒体查询(Media Queries)允许我们根据设备屏幕大小调整布局...

    常见非常有用CSS兼容

    本篇文章将深入探讨“常见非常有用CSS兼容”这一主题,基于你提供的信息,我们将分享一些实用的技巧和解决方案,帮助你应对各种浏览器之间的差异。 1. **CSS前缀**: 许多新的CSS特性在初期并未被所有浏览器广泛支持...

    10个Web前端开发中免费且非常有用CSS代码.docx

    下面详细介绍的是10个在Web前端开发中免费且非常有用的CSS代码。 #### 1. Loaders.css - **概述**:Loaders.css 是一款专为性能优化而设计的CSS框架,旨在通过简单的CSS样式实现各种加载动画效果。 - **特点**: -...

    react-React组件的css选择器

    每个CSS文件都会被转换为一个JavaScript对象,其中类名被自动转换为唯一字符串,确保组件的样式只对其自身生效。 2. **CSS-in-JS** CSS-in-JS是一种将CSS写在JavaScript代码中的风格,比如使用styled-components库...

    一个有关CSS3学习的餐厅练习.rar

    10. **颜色和透明度**:除了更多的颜色关键字和十六进制颜色,CSS3还引入了rgba()函数,允许设置颜色的透明度,以及hsl()和hsla()颜色模式,以色调、饱和度和亮度来定义颜色。 在这个"餐厅练习"中,可能涉及创建一...

    十天学会DIV CSS教程完整版完美整理 完整代码.pdf

    完整的DIV+CSS教程,网站设计是做软件的入门,也是最简单,而且最为实用的设计需求。这么多年软件做下来,其实基本上软件设计的原理都有那么一些继承和发展。这篇文章对于初学网站前端设计的朋友很有用。学了这个,...

    css标签自动生成器

    这样的工具对于初学者或者需要提高工作效率的专业人士来说,尤其有用,因为它简化了编写HTML和CSS的流程,避免了手动编写时可能犯的错误。 在HTML中,标签是用来定义网页内容和结构的关键元素,如`&lt;div&gt;`、`&lt;p&gt;`、`...

Global site tag (gtag.js) - Google Analytics