CSS 额外强度CSS重置和常见HTML元素样式 - 已更新

Posted 2021-05-23

/* Reset ------------------------------------------------------------------------------------------------------- */
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-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
	background:transparent;
}
ol, ul {list-style: none;}
table {border-collapse: collapse;border-spacing: 0;}/* tables still need 'cellspacing="0"' in the markup */
table[align="left"] {clear:both;float:none;}/*tables with align="left" apply float, this fixes it */
a:active, a:focus {outline:none;}/* removes link dotted line */
*:focus {outline:none;} /*remove webkit focus outline - comment out to apply*/
blockquote:before, blockquote:after, q:before, q:after {content: "";}
blockquote, q {quotes: "" "";}
blockquote {margin:30px 20px;color:#666;font-style:italic;}
button:hover, input[type="reset"]:hover, input[type="button"]:hover, input[type="submit"]:hover, input[type="file"]:hover {cursor:pointer;}
a img, img, fieldset {border: 0;}
/* Typography -------------------------------------------------------------------------------------------------- */
em,dfn {font-style: italic;}
dfn, label, legend, strong, dl dt {font-weight: bold;}
dl, address {margin: 0 0 1.5em 0;}
dd {margin-left: 1.5em;}
sup, sub {line-height: 0;}
sup  {
	font-size:smaller;
	line-height:normal;
	vertical-align:super;
}
sub  {
	font-size:smaller;
	line-height:normal;
	vertical-align:sub;
}
address {font-style: italic;}
del {color:#666;}
pre {margin: 1.5em 0; white-space: pre;}
pre, code, tt {font: 13px "Courier New", "andale mono", "lucida console", monospace; line-height: 1.5;}
ins {text-decoration: none;}/* remember to highlight inserts somehow! */
del {text-decoration: line-through;}
thead th {background:none repeat scroll 0 0 #C3D9FF;}
th, td, caption {padding:4px 10px 4px 5px;}
th {font-weight:bold;}
tfoot {font-style:italic;}
abbr, acronym {border-bottom:1px dotted #666;cursor:help;}
fieldset {padding:1.4em; margin: 0 0 1.5em 0; border: 1px solid #ccc;}
caption {text-align: left;background:#eee;}
em {font-style:oblique;}
a {color:#0033CC;text-decoration:underline;}
a:focus, a:hover {color:#000;}
body {font: 13px/1.5em 'Lucida Grande', "Helvetica", "Helvetica Neue", Arial, sans-serif;color:#222;}
/* Headings ----------------------------------------------------------------------------------------------------*/
h1 {font-size: 25px;}
h2 {font-size: 23px;}
h3 {font-size: 21px;}
h4 {font-size: 19px;}
h5 {font-size: 17px;}
h6 {font-size: 15px;}
/* Spacing ----------------------------------------------------------------------------------------------------*/
ol {list-style: decimal;}
ul {list-style: square;}
li {margin-left: 30px;}
p,dl,hr,h1,h2,h3,h4,h5,h6,ol,ul,pre,table,address,fieldset {margin-bottom: 20px;}
hr {
	border:0px #ccc solid;
	border-top-width: 1px;
	clear: both;
	height: 0;
}
/* Classes ---------------------------------------------------------------------------------------------------- */
.left{float:left;display:inline;}
.right {float:right;display:inline;}
.clear {
	clear: both;
	display: block;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 0;
}
.clearfix:after {
	clear: both;
	content: ' ';
	display: block;
	font-size: 0;
	line-height: 0;
	visibility: hidden;
	width: 0;
	height: 0;
}
.capital {text-transform:capitalize;}
.uppercase {text-transform:uppercase;}
.lowercase {text-transform:lowercase;}
.caps {
	font-variant:small-caps;
	font-weight:bold;
	letter-spacing:1px;
	padding:0 2px;
	text-transform:lowercase;
}
.large {
	font-size:1.2em;
}
.small {
	font-size:0.8em;
}
/* Success, notice and error boxes -------------------------------------------------------------- */
.error,.notice,.success {
	padding:0.8em; 
	margin-bottom: 1em; 
	border: 2px solid #ddd;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	-o-border-radius:6px;
	border-radius:6px;
}
.error {background: #FFCECE;color:#8a1f11;border-color:#DF8F8F;}
.notice {background: #FFF6BF;color:#514721; border-color:#FFD324;}
.success {background:#E6EFC2;color:#264409;border-color:#C6D880;}
.error a {color: #8a1f11;}
.notice a {color: #514721;}
.success a {color: #264409;}
/*Form Extra Styles ---------------------------------------------------------------------------- */
select {background:#fff;padding:4px;width:25%;}
input[type="text"], input[type="password"], textarea {
	padding:6px;
	width:25%;
	background:#fff;
	background: -webkit-gradient(linear, left top, left bottom, from(#f9f9f9), to(#fff));
	background: -moz-linear-gradient(top,  #f9f9f9,  #fff);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#ffffff');
	-moz-box-shadow:0 1px 1px #ddd inset;
	-webkit-box-shadow:0 1px 1px #ddd inset;
}
input[type="text"], input[type="password"], select, textarea {
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	border-radius:4px;
	border:1px solid #D5D5D5;
	color:#333333;
	font-size:13px;
}
input[type="submit"], input[type="reset"], input[type="button"] {padding:2px 5px;}
/* General ------------------------------------------------------------------------------------- */
#wrapper {width:960px;margin:20px auto;text-align:left;}