非常有用的CSS模板

最新推荐文章于 2024-08-21 16:04:20 发布

weixin_30532987

最新推荐文章于 2024-08-21 16:04:20 发布

阅读量164

点赞数

文章标签： ruby

原文链接：http://www.cnblogs.com/fxair/archive/2012/06/20/2556337.html

版权

下面是CSS模板清单，将帮助您减少手酸，烦恼，节省您在写CSS的时间了，我希望你会发现它很有用。无论你是一个有经验的Web开发者，或刚开始使用CSS的初学者，都值得一试。

CSS Reset (CSS固定样板)

/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/
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, 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,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;

Browser-Specific CSS Hacks (浏览器特定CSSHacks)

/* IE6 and below */
* html #uno  { color: red }

/* IE7 */
*:first-child+html #dos { color: red }

/* IE7, FF, Saf, Opera   */
html>body #tres { color: red }

/* IE8, FF, Saf, Opera (Everything but IE 6,7) */
html> /**/ body #cuatro { color: red }

/* Opera 9.27 and below, safari 2 */
html:first-child #cinco { color: red }

/* Safari 2-3 */
html[xmlns*=""] body:last-child #seis { color: red }

/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1) #siete { color: red }

/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type #ocho {   color: red }

/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
#diez  { color: red  }
}

/* iPhone / mobile webkit */
@media screen and (max-device-width: 480px) {
#veintiseis { color: red  }
}

/* Safari 2 - 3.1 */
html[xmlns*=""]:root #trece  { color: red  }

/* Safari 2 - 3.1, Opera 9.25 */
*|html[xmlns*=""] #catorce { color: red  }

/* Everything but IE6-8 */
:root *> #quince { color: red  }

/* IE7 */
*+html #dieciocho {   color: red }

/* Firefox only. 1+ */
#veinticuatro,  x:-moz-any-link  { color: red }

/* Firefox 3.0+ */
#veinticinco,  x:-moz-any-link, x:default  { color: red  }

/* FF 3.5+ */
body:not(:-moz-handler-blocked) #cuarenta { color: red; }

/* IE6 */
#once { _color: blue }

/* IE6, IE7 */
#doce { *color: blue; /* or #color: blue */ }

/* Everything but IE6 */
#diecisiete { color /**/: blue }

/* IE6, IE7, IE8 */
#diecinueve { color: blue\9; }

/* IE7, IE8 */
#veinte { color /* \* */: blue\9; }

/* IE6, IE7 -- acts as an !important */
#veintesiete { color: blue !ie; } /* string after ! can be anything */

/* IE8, IE9 */
#anotherone  { color: blue\0/;} /* must go at the END of all rules */

A New Micro Clearfix Hack (清除浮动的CSS)

* For modern browsers */
.cf:before,
.cf:after {
    content: "";
    display: table;
}

.cf:after {
    clear: both;
}

/* For IE 6/7 (trigger hasLayout) */
.cf {
    zoom: 1;
}

Font Sizing (字体设置)

html { font-size: 62.5%; }
body { font-size: 14px; font-size: 1.4rem; } /* =14px */
h1 { font-size: 24px; font-size: 2.4rem; } /* =24px */

The New @Font-Face Syntax (自设字体样式)

@font-face {
    font-family: 'MyFontFamily';
    src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'),
         url('myfont-webfont.woff') format('woff'),
         url('myfont-webfont.ttf')  format('truetype'),
         url('myfont-webfont.svg#svgFontName') format('svg');
}

Target IE set (针对IE的设置)

body {
color: red; /* all browsers, of course */
color : green\9; /* IE8 and below */
*color : yellow; /* IE7 and below */
_color : orange; /* IE6 */
}

Cross-Browser Min Height (跨浏览器的最小高度)

#div {
   min-height: 500px;
   height: auto !important;
   height: 500px;
}

Font Shorthand (字体设置速写)

/* font: font-style font-variant font-weight font-size/line-height font-family; */
font: italic small-caps bold 15px/30px Helvetica, sans-serif;

IE6/7 Double Margin/Padding Bug (IE6/7双重边距错误)

ul li {
  float: left;
  margin-left: 5px;
  *display: inline; /* IE7 and below */
  _display: inline; /* IE6 and below */
}
/* this example fixes double left margin bug 左边距Bug */

Web Fonts WithGoogleFont API(Google网页字体)

/* <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Font Name"> */
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">

要使用谷歌API的字体，首先引用样式表在之间

/* CSS selector {
font-family: 'Font Name', serif;
} */
font-family: 'Tangerine', serif;