10 个有用的 css 代码

Today, I have compiled a set of 10 CSS snippets that can save you a lot of time and effort. These codes are needed frequently when developing CSS-based websites or themes. Just bookmark these codes (Ctrl + D) so that you don’t have to look for them on the Internet every time.

1. CSS Tooltips

Through this code, you can have your own tooltips using just CSS. This is the CSS code :-

a:hover {background:#ffffff; text-decoration:none;} /*BG color is a must for IE6*/
a.tooltip span {display:none; padding:2px 3px; margin-left:8px; width:130px;}
a.tooltip:hover span{display:inline; position:absolute; background:#ffffff; border:1px solid #cccccc; color:#6c6c6c;}

Now, use the tooltips like this :-

Easy <a class="tooltip" href="#">Tooltip<span>This is the crazy little Easy Tooltip Text.</span></a>.

2. Eric Meyer’s Reset Code

HTML tags on different browsers have their own formatting and styling. To reset all that and bring everything to ground zero before starting to code, just add these lines at the beginning of your CSS file.

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 {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

3. Handy CSS Debugger

This code will add different color borders around your assets depending on its level. At each level in the hierarchy the color changes so you can see when “depth” changes. You can comment it out if you don’t need it.

* { outline: 2px dotted red }
* * { outline: 2px dotted green }
* * * { outline: 2px dotted orange }
* * * * { outline: 2px dotted blue }
* * * * * { outline: 1px solid red }
* * * * * * { outline: 1px solid green }
* * * * * * * { outline: 1px solid orange }
* * * * * * * * { outline: 1px solid blue }

4. Centering a DIV of Unknown Width

You can easily center a DIV by using margin:auto; property when you have mentioned its width in your CSS. But in case you wanted to center a DIV with unknown width, here is the code to do so :-

.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]-->

5. Adding AJAX style Loading Icon to Large Images

Instead of using any kind of JavaScript to add a loading icon before your large image is loaded, you can use this simple CSS technique. Just use the following class in the same DIV where you are calling the large image. Make sure the path to the small loading.gif is correct.

.loading { background: url(loading.gif) no-repeat center center; }

6. CSS Image Preloader

In case you need to preload images before the loading of your page completes, use the following technique. Just add the images’ paths to the DIV class, and call the DIV in your HTML. The DIV will not be visible but the images will preload nicely.

div.loader{
background:url(images/hover.gif) no-repeat;
background:url(images/hover2.gif) no-repeat;
background:url(images/hover3.gif) no-repeat;
margin-left:-10000px;
}

7. CSS Opacity Hack

You can set opacity of any asset by using the following codes (to achieve transparency) :-

selector {
filter: alpha(opacity=60); /* MSIE/PC */
-moz-opacity: 0.6; /* Mozilla 1.6 and older */
opacity: 0.6;
}

8. Min-Height for IE and all other browsers

Since min-height doesn’t work in IE, this code makes up for IE’s shortcomings. The first part of the code is the correct code that works in Firefox and Safari. The second part of the code is for IE. Internet Explorer will ignore min-height and is just given a height of 8em. The IE bug automatically expands the container to fit the extra text.

/* for browsers that don't suck */
.container {
  min-height:8em;
  height:auto !important;
}

/* for Internet Explorer - which of course sucks */
/*\*/
* html .container {
  height: 8em;
}
/**/

9. Styling Links by File Type

You can easily style specific URLs by using icons. This works only with CSS3 compatible browsers and degrades nicely with non-compatible browsers. Make sure to change the icon image paths.

/* 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;
}

10. Remove Textarea Scrollbar in IE

IE has this nasty habit of showing a scrollbar in the textarea even when the content is inside the textarea. To avoid this, use the following code :-

textarea{
	overflow:auto;
}