html默认样式总结

我们都知道，一些html标签通常都带有默认css样式，我们在写网页时，这些默认的样式就会时不时的跳出来捣一下乱，搞得我们很是无奈。

所以成手在写css样式时，一般都会在开头写一段初始化程序，来去掉这些默认样式，最简单的方法就是使用*{margin：0;padding：0;}。

但是通常我们很少使用这种方法，因为通配符*的效率极低。

所以我们要先熟悉标签的默认样式，再来研究怎么对付他们。

001

//块级元素

002

003	html, body,  div,ol, p, ul,  h1, h2,h3,h4,h5, h6,

004

005	address,blockquote, form,

006

007	dd,dl, dt, fieldset, frame, frameset,noframes,center, dir, hr, menu, pre

008

009	{ display: block }

010

011

012

013

//列表元素类

014

015	li{ display:list-item }

016

017	ol{list-style-type: decimal }

018

019	ol ul, ul ol,ul ul, ol ol  { margin-top: 0; margin-bottom: 0 }

020

021	ol, ul{ margin-left: 40px }

022

023

024

025

//预格式文本类

026

027	i, cite, em,var, address{ font-style: italic }

028

029	big{ font-size:1.17em }

030

031	small, sub, sup{ font-size: .83em }

032

033	sub{ vertical-align:sub }

034

035	sup{ vertical-align:super }

036

037	s, strike, del{ text-decoration: line-through }

038

039	u, ins{ text-decoration:underline }

040

041

042

043

//标题类

044

045	h1{ font-size:2em; margin: .67em 0 }

046

047	h2{ font-size:1.5em; margin: .75em 0 }

048

049	h3{ font-size:1.17em; margin: .83em 0 }

050

051	h4, p,blockquote, ul,fieldset, form,ol, dl, dir,menu { margin: 1.12em 0}

052

053	h5 { font-size:.83em; margin: 1.5em 0 }

054

055	h6{ font-size:.75em; margin: 1.67em 0 }

056

057	h1, h2, h3, h4,h5, h6, b,strong  { font-weight: bolder }

058

059

060

061

062

063

//伪类

064

065	br:before{ content: ”\A” }

066

067	:before, :after{ white-space: pre-line }

068

069	:link, :visited { text-decoration: underline }

070

071	:focus{ outline: thin dotted invert }

072

073

074

075

//表格类

076

077	table{ display: table }

078

079	tr{ display:table-row }

080

081	thead{ display:table-header-group }

082

083	tbody{ display:table-row-group }

084

085	tfoot{ display:table-footer-group }

086

087	col{ display:table-column }

088

089	colgroup{ display:table-column-group }

090

091	td, th{ display: table-cell;}

092

093	caption{ display: table-caption }

094

095	th{font-weight: bolder; text-align: center }

096

097	caption{ text-align: center }

098

099	table{ border-spacing: 2px;}

100

101	thead, tbody,tfoot { vertical-align:middle }

102

103	td, th { vertical-align:inherit }

104

105

106

107

//其它元素

108

109	head{ display: none }

110

111	body{ margin: 8px;line-height: 1.12 }

112

113	button, textarea,input, object,select  { display:inline-block;}

114

115	blockquote{ margin-left: 40px;margin-right: 40px }

116

117	pre, tt, code,kbd, samp  { font-family: monospace }

118

119	pre{ white-space: pre}

120

121	hr{ border: 1px inset }

122

123	center{ text-align: center }

124

125	abbr, acronym{ font-variant: small-caps; letter-spacing:0.1em }

126

127

128

129	BDO[DIR="ltr"]  { direction: ltr; unicode-bidi:bidi-override }

130

131	BDO[DIR="rtl"]  { direction: rtl; unicode-bidi:bidi-override }

132

133	/*定义BDO元素当其属性为DIR="ltr/rtl"时的默认文本读写显示顺序*/

134

135	*[DIR="ltr"]{ direction: ltr;unicode-bidi: embed }

136

137	*[DIR="rtl"] { direction: rtl;unicode-bidi: embed }

138

139	/*定义任何元素当其属性为DIR="rtl/rtl"时的默认文本读写显示顺序*/

140

141	@media print {

142

143	h1{page-break-before: always }

144

145	h1, h2, h3,h4, h5, h6    { page-break-after: avoid }

146

147	ul, ol, dl{ page-break-before: avoid }

148

149	} /*定义标题和列表默认的打印样式*/

我认为我们可以把能用的样式留着，不能用的就通过常用标签选择器给初始化一下，这样才能提高效率