CSS STICKER - 一个有效,易于使用的CSS粘性页脚

* {
	margin: 0;
}
html, body {
	height: 100%;
}
.wrapper {
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: 0 auto -4em; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
	height: 4em; /* .push must be the same height as .footer */
}

CSS CSS:所有浏览器的透明度

.transparent_class {
	filter:alpha(opacity=50);
	filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
	-moz-opacity:0.5;
	-khtml-opacity: 0.5;
	opacity: 0.5;
}

CSS 没有更多的IE6背景闪烁

html {
  filter: expression(document.execCommand("BackgroundImageCache", false, true));
}

CSS 防止HTML表变得太宽

table {
    table-layout:fixed;
    width:100%;
    overflow:hidden;
    border:1px solid #f00;
    word-wrap:break-word;
}

CSS 所有Joomla 1.5 CSS

/* JOOMLA SPECIFIC CSS CODE */

.article_separator{

}
.adminform{

}
.author{

}
.bannerfooter{

}
.bannergroup{

}
.bannerheader{

}
.banneritem{

}
.blog{

}
.blog_more{

}
.blogsection{

}
.breadcrumbs{

}
.button{

}
.buttonheading{

}
.clr{
	clear:both
}
.componentheading, .contentheading{

}
.content_email{

}
.content_rating{

}
.content_vote{

}
.contentdecription{

}
.contentpagetitle{

}
.contentpane{

}
.contentpaneopen{

}
.contenttoc{

}
.createdate{

}
.created-date{

}
.date{

}
.input{

}
.inputbox{

}
.intro{

}
.latestnews{

}
.loclink{

}
a.mainlevel:link, a.mainlevel:active, a.mainlevel:visited{

}
a.mainlevel:hover{

}
.message{

}
.metadata{

}
.modifydate{

}
.module{

}
.moduletable{

}
.mosimage{

}
.mosimage_caption{

}
.mostread{

}
.newsfeed{

}
.outline{

}
.pagenav{

}
.pagenav_next{

}
.pagenav_prev{

}
.pagenavbar{

}
.pagenavcounter{

}
.pathway{

}
.pollstableboarder{

}
.read{

}
.search{

}
.searchintro{

}
.sections{

}
.sectiontable_footer{

}
.sectiontableentry{

}
.sectiontablefooter{

}
.sectiontableheader{

}
.small{

}.smalldark{

}
a.sublevel:link, a.sublevel:active, a.sublevel:visited{

}
a.sublevel:hover{

}
.title{

}
.wrapper{

}

CSS CSS Rounded Corners没有图像支持Firfox,Safari,Chrome,Opera

= HTML ==================================================
<div class="roundedbox">...</div>

= CSS ===================================================
.roundedbox {
    width: 100px;
    height: 100px;
    background: #666;
    -webkit-border-radius: 5px;
    /*
    -webkit-border-top-left-radius:5px;
    -webkit-border-top-right-radius:5px;
    -webkit-border-bottom-right-radius:5px;
    -webkit-border-bottom-left-radius:5px;
    */
    -moz-border-radius: 5px;
    /*
    -moz-border-radius-topleft:5px;
    -moz-border-radius-topright:5px;
    -moz-border-radius-bottomright:5px;
    -moz-border-radius-bottomleft:5px;
    */
    border-radius: 5px;
    /*
    border-top-left-radius:5px;
    border-top-left-radius:5px;
    border-bottom-right-radius:5px;
    border-bottom-left-radius:5px;
    */
}
/*= CSS hack for Opera 9.5 Rounded Corners */
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
    .roundedbox {
        background:transparent url(shadow.svg); 
    }
}

= SVG file ==============================================
<?xml version="1.0">
<svg xmlns="http://www.w3.org/2000/svg">
  <rect x="0" y="0" width="100%" height="100%" rx="5" style="fill:#666666;" />
</svg>

CSS Wordpress CSS标头

/*
Theme Name: Your Theme Name
Theme URI: http://your-theme-homepage.com
Description: Oh what a lovely description of your theme you'll put here!
Author: Your Name
Author URI: http://your-website.com
Template: If this is a child theme, you'll set the template theme's folder name here
Version: A version number
.
Any general information, license statements, plugin requirements, or any other information you
might want to share.
.
*/

CSS Internet Explorer(IE6)CSS Hover

<attach event="ondocumentready" handler="parseStylesheets" />
<script>
/**
 *	Whatever:hover - V1.42.060206 - hover & active
 *	------------------------------------------------------------
 *	(c) 2005 - Peter Nederlof
 *	Peterned - http://www.xs4all.nl/~peterned/
 *	License  - http://creativecommons.org/licenses/LGPL/2.1/
 *
 *	Whatever:hover is free software; you can redistribute it and/or
 *	modify it under the terms of the GNU Lesser General Public
 *	License as published by the Free Software Foundation; either
 *	version 2.1 of the License, or (at your option) any later version.
 *
 *	Whatever:hover is distributed in the hope that it will be useful,
 *	but WITHOUT ANY WARRANTY; without even the implied warranty of
 *	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
 *	Lesser General Public License for more details.
 *
 *	Credits and thanks to:
 *	Arnoud Berendsen, Martin Reurings, Robert Hanson
 *
 *	howto: body { behavior:url("csshover.htc"); }
 *	------------------------------------------------------------
 */

var csshoverReg = /(^|\s)(([^a]([^ ]+)?)|(a([^#.][^ ]+)+)):(hover|active)/i,
currentSheet, doc = window.document, hoverEvents = [], activators = {
	onhover:{on:'onmouseover', off:'onmouseout'},
	onactive:{on:'onmousedown', off:'onmouseup'}
}

function parseStylesheets() {
	if(!/MSIE (5|6)/.test(navigator.userAgent)) return;
	window.attachEvent('onunload', unhookHoverEvents);
	var sheets = doc.styleSheets, l = sheets.length;
	for(var i=0; i<l; i++) 
		parseStylesheet(sheets[i]);
}
	function parseStylesheet(sheet) {
		if(sheet.imports) {
			try {
				var imports = sheet.imports, l = imports.length;
				for(var i=0; i<l; i++) parseStylesheet(sheet.imports[i]);
			} catch(securityException){}
		}

		try {
			var rules = (currentSheet = sheet).rules, l = rules.length;
			for(var j=0; j<l; j++) parseCSSRule(rules[j]);
		} catch(securityException){}
	}

	function parseCSSRule(rule) {
		var select = rule.selectorText, style = rule.style.cssText;
		if(!csshoverReg.test(select) || !style) return;

		var pseudo = select.replace(/[^:]+:([a-z-]+).*/i, 'on$1');
		var newSelect = select.replace(/(\.([a-z0-9_-]+):[a-z]+)|(:[a-z]+)/gi, '.$2' + pseudo);
		var className = (/\.([a-z0-9_-]*on(hover|active))/i).exec(newSelect)[1];
		var affected = select.replace(/:(hover|active).*$/, '');
		var elements = getElementsBySelect(affected);
		if(elements.length == 0) return;

		currentSheet.addRule(newSelect, style);
		for(var i=0; i<elements.length; i++)
			new HoverElement(elements[i], className, activators[pseudo]);
	}

function HoverElement(node, className, events) {
	if(!node.hovers) node.hovers = {};
	if(node.hovers[className]) return;
	node.hovers[className] = true;
	hookHoverEvent(node, events.on, function() { node.className += ' ' + className; });
	hookHoverEvent(node, events.off, function() { node.className = node.className.replace(new RegExp('\\s+'+className, 'g'),''); });
}
	function hookHoverEvent(node, type, handler) {
		node.attachEvent(type, handler);
		hoverEvents[hoverEvents.length] = { 
			node:node, type:type, handler:handler 
		};
	}

	function unhookHoverEvents() {
		for(var e,i=0; i<hoverEvents.length; i++) {
			e = hoverEvents[i]; 
			e.node.detachEvent(e.type, e.handler);
		}
	}

function getElementsBySelect(rule) {
	var parts, nodes = [doc];
	parts = rule.split(' ');
	for(var i=0; i<parts.length; i++) {
		nodes = getSelectedNodes(parts[i], nodes);
	}	return nodes;
}
	function getSelectedNodes(select, elements) {
		var result, node, nodes = [];
		var identify = (/\#([a-z0-9_-]+)/i).exec(select);
		if(identify) {
			var element = doc.getElementById(identify[1]);
			return element? [element]:nodes;
		}
		
		var classname = (/\.([a-z0-9_-]+)/i).exec(select);
		var tagName = select.replace(/(\.|\#|\:)[a-z0-9_-]+/i, '');
		var classReg = classname? new RegExp('\\b' + classname[1] + '\\b'):false;
		for(var i=0; i<elements.length; i++) {
			result = tagName? elements[i].all.tags(tagName):elements[i].all; 
			for(var j=0; j<result.length; j++) {
				node = result[j];
				if(classReg && !classReg.test(node.className)) continue;
				nodes[nodes.length] = node;
			}
		}	
		
		return nodes;
	}
</script>

CSS Clearfix

.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix {display: inline-table;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
* html .clearfix {
height: 1%;
}

CSS 灰度img与css crossbrowser

<!-- HTML -->
<a class="a-thumb"><img src="/img/proxy-thumb.gif" /><span> </span></a>

/* CSS */
a.a-thumb {
	border: 1px solid black;
	position: relative;}
a.a-thumb img {
	width: 60px;
	height: 60px;
	border: 0;}
a.a-thumb span {
	background-color: #000000;
	position: absolute;
	top: 0;
	left: 0;
	width: 60px;
	height: 60px;
	z-index: 100;
	filter: alpha(opacity=20);
	-moz-opacity: 0.2;
	opacity: 0.2;}