基准样式表

翻译:http://www.crucialwebhost.com/blog/master-stylesheet-the-most-useful-css-technique/

CSS的初学者常因为浏览器的默认样式表,而生产一些错误。可以设置一个基本的样式表,恢复CSS最基本的样貌。

/***** Global Settings *****/

html, body {
	border:0;
	margin:0;
	padding:0;
}
body {
	font:100%/1.25 Arial, Helvetica, sans-serif;
}
/***** Headings *****/

h1, h2, h3, h4, h5, h6 {
	margin:0;
	padding:0;
	font-weight:normal;
}
h1 {
	padding:30px 0 25px 0;
	letter-spacing:-1px;
	font-size:2em;
}
h2 {
	padding:20px 0;
	letter-spacing:-1px;
	font-size:1.5em;
}
h3 {
	font-size:1em;
	font-weight:bold;
}
/***** Common Formatting *****/

p, ul, ol {
	margin:0;
	padding:0 0 1.25em 0;
}
ul, ol {
	padding:0 0 1.25em 2.5em;
}
blockquote {
	margin:1.25em;
	padding:1.25em 1.25em 0 1.25em;
}
small {
	font-size:0.85em;
}
img {
	border:0;
}
sup {
	position:relative;
	bottom:0.3em;
	vertical-align:baseline;
}
sub {
	position:relative;
	bottom:-0.2em;
	vertical-align:baseline;
}
acronym, abbr {
	cursor:help;
	letter-spacing:1px;
	border-bottom:1px dashed;
}
/***** Links *****/

a, a:link, a:visited, a:hover {
	text-decoration:underline;
}
/***** Forms *****/

form {
	margin:0;
	padding:0;
	display:inline;
}
form input,  form select,  form textarea {
	font:1em Arial, Helvetica, sans-serif;
}
form textarea {
	width:100%;
	line-height:1.25;
}
form label {
	cursor:pointer;
}
/***** Tables *****/

table {
	border:0;
	margin:0 0 1.25em 0;
	padding:0;
}
table tr td {
	padding:2px;
}
/***** Wrapper *****/

#wrap {
	width:960px;
	margin:0 auto;
}
/***** Global Classes *****/

.clear {
	clear:both;
}
.float-left {
	float:left;
}
.float-right {
	float:right;
}
.text-left {
	text-align:left;
}
.text-right {
	text-align:right;
}
.text-center {
	text-align:center;
}
.text-justify {
	text-align:justify;
}
.bold {
	font-weight:bold;
}
.italic {
	font-style:italic;
}
.underline {
	border-bottom:1px solid;
}
.highlight {
	background:#ffc;
}
.wrap {
	width:960px;
	margin:0 auto;
}
.img-left {
	float:left;
	margin:4px 10px 4px 0;
}
.img-right {
	float:right;
	margin:4px 0 4px 10px;
}
.nopadding {
	padding:0;
}
.noindent {
	margin-left:0;
	padding-left:0;
}
.nobullet {
	list-style:none;
	list-style-image:none;
}





你可能感兴趣的:(浏览器,input,float,border,wrapper,Forms)