In HTML, the default style for understanding individual labels, helpful in understanding the performance of the code, but also help streamline the code. (1 • ₃ • 1)
head{ display: none }
body{ margin: 8px;line-height: 1.12 }
button, textarea,input, object,select { display:inline-block;}
ol, ul, dir,menu, dd{ margin-left: 40px }
i, cite, em,var, address{ font-style: italic }
//块级元素
html, body, div,ol, p, ul, h1, h2,h3,h4,h5, h6,
address,blockquote, form,
dd,dl, dt, fieldset, frame, frameset,noframes,center, dir, hr, menu, pre
{ display: block }
//列表元素
li{ display:list-item }
ol{list-style-type: decimal }
ol ul, ul ol,ul ul, ol ol { margin-top: 0; margin-bottom: 0 }
//标题
h1{ font-size:2em; margin: .67em 0 }
h2{ font-size:1.5em; margin: .75em 0 }
h3{ font-size:1.17em; margin: .83em 0 }
h4, p,blockquote, ul,fieldset, form,ol, dl, dir,menu { margin: 1.12em 0}
h5 { font-size:.83em; margin: 1.5em 0 }
h6{ font-size:.75em; margin: 1.67em 0 }
h1, h2, h3, h4,h5, h6, b,strong { font-weight: bolder }
//伪类
br:before{ content: ”\A” }
:before, :after{ white-space: pre-line }
:link, :visited { text-decoration: underline }
:focus{ outline: thin dotted invert }
//表格
table{ display: table }
tr{ display:table-row }
thead{ display:table-header-group }
tbody{ display:table-row-group }
tfoot{ display:table-footer-group }
col{ display:table-column }
colgroup{ display:table-column-group }
td, th{ display: table-cell;}
caption{ display: table-caption }
th{font-weight: bolder; text-align: center }
caption{ text-align: center }
table{ border-spacing: 2px;}
thead, tbody,tfoot { vertical-align:middle }
td, th { vertical-align:inherit }
//其它元素
blockquote{ margin-left: 40px;margin-right: 40px }
pre, tt, code,kbd, samp { font-family: monospace }
pre{ white-space: pre}
big{ font-size:1.17em }
small, sub, sup{ font-size: .83em }
sub{ vertical-align:sub }
sup{ vertical-align:super }
s, strike, del{ text-decoration: line-through }
hr{ border: 1px inset }
u, ins{ text-decoration:underline }
center{ text-align: center }
abbr, acronym{ font-variant: small-caps; letter-spacing:0.1em }
BDO[DIR="ltr"] { direction: ltr; unicode-bidi:bidi-override }
BDO[DIR="rtl"] { direction: rtl; unicode-bidi:bidi-override }
/*定义BDO元素当其属性为DIR="ltr/rtl"时的默认文本读写显示顺序*/
*[DIR="ltr"]{ direction: ltr;unicode-bidi: embed }
*[DIR="rtl"] { direction: rtl;unicode-bidi: embed }
/*定义任何元素当其属性为DIR="rtl/rtl"时的默认文本读写显示顺序*/
@media print {
h1{page-break-before: always }
h1, h2, h3,h4, h5, h6 { page-break-after: avoid }
ul, ol, dl{ page-break-before: avoid }
} /*定义标题和列表默认的打印样式*/
The browser's default style
1, margins
IE 10px default, by the property of the body margin
default 8px FF, by padding the property of the body
to clear margins must clear the two attribute values
body {
margin:0;
padding:0;
}
2, paragraph spacing
IE 19px default, by margin-top property of p
default 1.12em FF, by margin-bottom property provided p
p default display block, to clear the pitch period typically may be provided
p {
margin-top:0;
margin-bottom:0;
}
3, heading styles
h1 ~ h6 default bold: font-weight: bold ;.
The default size Refer to the table
there is a written
h1 {font-size:xx-large;}
h2 {font-size:x-large;}
h3 {font-size:large;}
h4 {font-size:medium;}
h5 {font-size:small;}
h6 {font-size:x-small;}
Big browser's default font size is 16px, which is equal to medium, h1 ~ h6 elements to the default display shown in bold block font,
you want to clear the title style, you can set the general
hx {
font-weight:normal;
font-size:value;
}
4, the list style
IE 40px default, by ul, ol margin property set
FF 40px default, by ul, ol the padding property
dl No indentation, but the description of the internal elements from indentation 40px dd default, the name of the element dt is not indented.
To clear the list of styles, you can set the general
ul, ol, dd {
list-style-type:none;
margin-left:0;
padding-left:0;
}
元素居中
IE默认为text-align:center;
FF默认为margin-left:auto;margin-right:auto;
5, Hyperlink style
a style defaults underlined, display color is blue, is visited hyperlinks to purple, to clear link styles, you can set the general
a {
text-decoration:none;
color:#colorname;
}
6, mouse style
IE default Cursor: Hand;
the FF default cursor: pointer; this statement is also effective in IE
7, image links style
IE default purple 2px border line
FF defaults to the border line of blue 2px
To clear the picture link styles, you can set the general
img {
border:0;
}