（UED二区）31 CSS代码片段来让你更好的编写样式

by ·4 Comments

绝对实用的好文章，前端开发经常会使用到的一些CSS样式基本上都覆盖到了。精辟！

原文链接来自：http://ued2qu.com/css/31-css-code-snippets-to-make-you-a-better-coder.html

Comprehensive List of Browser-Specific CSS Hacks

浏览器兼容hacks

/***** Selector Hacks ******/

/* 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  }
/***** Attribute Hacks ******/
/* IE6 */
#once { _color: blue }
/* IE6, IE7 */
#doce { *color: blue; /* or #color: blue */ }
/* Everything but IE6 */
#diecisiete { color/**/: blue }
/* IE6, IE7, IE8 */
#diecinueve { color: blue9; }
/* IE7, IE8 */
#veinte { color/***/: blue9; }
/* IE6, IE7 -- acts as an !important */
#veintesiete { color: blue !ie; } /* string after ! can be anything */

(source)

Cross Browser Vertically and Horizontally Centered Images in CSS without Tables

夸浏览器垂直水平居中

<figure class=’logo’>

    <span></span>
    <img class='photo'/>
</figure>
.logo {
  display: block;
  text-align: center;
  display: block;
  text-align: center;
  vertical-align: middle;
  border: 4px solid #dddddd;
  padding: 4px;
  height: 74px;
  width: 74px; }
  .logo * {
    display: inline-block;
    height: 100%;
    vertical-align: middle; }
    .logo .photo {
    height: auto;
    width: auto;
    max-width: 100%;
    max-height: 100%; }

(source)

Cross-Browser Transparency via CSS

夸浏览器透明

selector {

	filter: alpha(opacity=50); /* internet explorer */
	-khtml-opacity: 0.5;      /* khtml, old safari */
	-moz-opacity: 0.5;       /* mozilla, netscape */
	opacity: 0.5;           /* fx, safari, opera */
	}

(source)

CSS Box Shadow

盒投影

Outer shadow

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

Inner shadow

.shadow {
   -moz-box-shadow:inset 0 0 10px #000000;
   -webkit-box-shadow:inset 0 0 10px #000000;
   box-shadow:inset 0 0 10px #000000;
}

You can see a demo at?Design Resource Box

Cross-Browser Min Height

夸浏览器最小高度

#div {

   min-height: 500px;
   height:auto !important;
   height: 500px;
}

3 Ways to Preload Images with CSS, JavaScript, or Ajax

预载入图片

3 Ways to Preload Images with CSS, JavaScript, or Ajax

CSS Fixed Footer

固定页脚

#footer {

   position:fixed;
   left:0px;
   bottom:0px;
   height:30px;
   width:100%;
   background:#999;
}
/* IE 6 */
* html #footer {
   position:absolute;
   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');
}

(source)

Clearfix CSS Hack

清除浮动

/* slightly enhanced, universal clearfix hack */

.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
     }
.clearfix { display: inline-block; }
/* start commented backslash hack */
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */

(source)

8 Definitive Web Font Stacks

通用字体

/* The Times New Roman-based serif stack: */
font-family: Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif;
/* A modern Georgia-based serif stack:*/
font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif," "Bitstream Vera Serif", "Liberation Serif", Georgia, serif;
/*A more traditional Garamond-based serif stack:*/
font-family: "Palatino Linotype", Palatino, Palladio, "URW Palladio L", "Book Antiqua", Baskerville, "Bookman Old Style", "Bitstream Charter", "Nimbus Roman No9 L", Garamond, "Apple Garamond", "ITC Garamond Narrow", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif;
/*The Helvetica/Arial-based sans serif stack:*/
font-family: Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;
/*The Verdana-based sans serif stack:*/
font-family: Corbel, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans-serif;
/*The Trebuchet-based sans serif stack:*/
font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif;
/*The heavier “Impact” sans serif stack:*/
font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", sans-serif;
/*The monospace stack:*/
font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;

(source)

Give Clickable Elements a Pointer Cursor

鼠标指针

a[href], input[type=’submit』], input[type=’image』], label[for], select, button, .pointer {

       cursor: pointer;
}

(source)

iPad Orientation CSS (Revised)

iPad固定样式

<!– css –>

@media only screen and (max-device-width: 1024px) and (orientation:portrait) {
    .landscape { display: none; }
}
@media only screen and (max-device-width: 1024px) and (orientation:landscape) {
    .portrait { display: none; }
}
<!-- example markup -->
<h1>Your device orientation is "portrait"<h1>
<h1>Your device orientation is "landscape"<h1>

(source and more info)

Wrapping Text Inside Pre Tags

height: 120px;
overflow: auto;
font-family: “Consolas”,monospace;
font-size: 9pt;
text-align:left;
background-color: #FCF7EC;
overflow-x: auto; /* Use horizontal scroller if needed; for Firefox 2, not
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
margin: 0px 0px 0px 0px;
padding:5px 5px 3px 5px;
white-space : normal; /* crucial for IE 6, maybe 7? */

(source)

Hardboiled CSS3 Media Queries

css3 Media

/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

(source and more info) –?Download the CSS file

Eric Meyer’s Reset Reloaded

重置

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: "" "";
}

(source)

Eric Meyer’s Reset Reloaded

上面这个人的重置样式

#borders {

   position:relative;
   z-index:1;
   padding:30px;
   border:5px solid #f00;
   background:#ff9600;
}

#borders:before {

   content:"";
   position:absolute;
   z-index:-1;
   top:5px;
   left:5px;
   right:5px;
   bottom:5px;
   border:5px solid #ffea00;
   background:#4aa929;
}
#borders:after {
   content:"";
   position:absolute;
   z-index:-1;
   top:15px;
   left:15px;
   right:15px;
   bottom:15px;
   border:5px solid #00b4ff;
   background:#fff;
}

(source) –?Demo

Pure CSS3 box-shadow page curl effect

Pure CSS3 box-shadow page curl effect

Stop Superscripts from Breaking Line-Heights Once and for All

sup, sub {
    vertical-align: baseline;
    position: relative;
    top: -0.4em;
}
sub { top: 0.4em; }

(source)

Remove Scrollbar from Textarea in IE

ie中去除textarea滚动条

textarea { overflow: auto; }

CSS: border-radius and -moz-border-radius

园角

CSS: border-radius and -moz-border-radius

Simple and Nice Blockquote Styling

Simple and Nice Blockquote Styling

blockquote {
background:#f9f9f9;
border-left:10px solid #ccc;
margin:1.5em 10px;
padding:.5em 10px;
quotes:"201C""201D""2018""2019";
}
blockquote:before {
color:#ccc;
content:open-quote;
font-size:4em;
line-height:.1em;
margin-right:.25em;
vertical-align:-.4em;
}
blockquote p {
display:inline;
}

(source)

:-moz-placeholder

<!doctype html>

<html>
<head>
  <title>Placeholder demo</title>
  <style type="text/css">
    input:-moz-placeholder {
      color: green;
    }
  </style>
</head>
<body>
  <input id="test" placeholder="Placeholder text!">
</body>
</html>

(source)

Sticky Footer

置顶页脚

* { 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 */
<div id="wrap">
        <div id="main">
        </div>
</div>
<div id="footer">
</div>

(source)

21 Awesome @font-face Embeddable Typefaces

字体类型

@font-face {
font-family: GraublauWeb;
src: url("path-to-the-font-file/GraublauWeb.otf") format("opentype");
}
@font-face {
font-family: GraublauWeb;
font-weight: bold;
src: url("path-to-the-font-file/GraublauWebBold.otf") format("opentype");
}

h1 {

font-family: GraublauWeb, Helvetica, Verdana, Sans-Serif;
}

Typefaces you can use with @font-face:?Graublau Sans Web,?Fertigo Pro Regular,Tallys,?Diavlo,?Fontin,?Fontin Sans,?M+ Outline Fonts,?Pykes Peak Zero,?Vollkorn,Delicious,?Junction,?Days,?Sniglet,?Chunk,?Blackout,?Gentium,?Anivers,?CA BND Bold WEB,?Axel,?Kaffeesatz,?Tagesschrift.
(source and more info)

Text Rotation with CSS

旋转文字

<div>

  <span>31</span>
  <span>July</span>
  <span>2009</span>
</div>

-webkit-transform: rotate(-90deg);

-moz-transform: rotate(-90deg);

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

(source and demo)

Background transparency

背景透明

.rgba {

  background-color: transparent;
  background-color: rgba(200,200,200,0.8);
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99dddddd,endColorstr=#99dddddd);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99dddddd,endColorstr=#99dddddd)";
}

(source)

Centering a DIV of Unknown Width

未知宽度div

.content {

	margin: 0 auto 8px;
	display: table;
	}
.content div {
	display: table-cell;
	}
<!--[if IE]>
.content {
	display: block;
	text-align: center;
	}
.content div {
	display: inline;
	zoom: 1;
}
<![endif]-->

Styling Links by File Type

文件类型链接样式

/* external links */

a[href^="http://"]
{
padding-right: 13px;
background: url(external.gif) no-repeat center right;
}
/* emails */
a[href^="mailto:"]
{
padding-right: 20px;
background: url(email.png) no-repeat center right;
}
/* pdfs */
a[href$=".pdf"]
{
padding-right: 18px;
background: url(acrobat.png) no-repeat center right;
}

Fix IE6/7 double margin/padding bug

ie双倍边距bug

ul li

{
  float: right;
  margin-right: 10px;
  *display: inline; /*Target IE7 and bellow*/
  _display: inline; /*Target IE6 and bellow*/
}
/* This example fixes the double right margin bug */

Change text selection style

更改选中文字样式

::selection
{
color: white;
background-color: red;
}
::-moz-selection  /* Firefox needs an extra attention for this */
{
color: white;
background-color: red;
}

Drop cap

下标

p:first-letter{

	    display:block;
	    margin:5px 0 0 5px;
	    float:left;
	    color:#FF3366;
	    font-size:60px;
	    font-family:Georgia;
	}

Style links depending on file format

链接样式

/* external links */

	a[href^="http://"]{
	    padding-right: 20px;
	    background: url(external.gif) no-repeat center right;
	}
	/* emails */
	a[href^="mailto:"]{
	    padding-right: 20px;
	    background: url(email.png) no-repeat center right;
	}
	/* pdfs */
	a[href$=".pdf"]{
	    padding-right: 20px;
	    background: url(pdf.png) no-repeat center right;
	}

via:?view site

發表回覆

你的電郵地址並不會被公開。 必要欄位標記為 *