html标签自带样式总结

Posted 2020-09-28

一、html标签自带样式

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~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:0.67em 0; }

h2 { font-size:1.5em; margin:0.75em 0; }

h3 { font-size:1.17em; margin:0.83em 0; }

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

h5 { font-size:0.83em; margin:1.5em 0; }

h6 { font-size:0.75em; margin:1.67em 0;}

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

//表格

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:0.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; }

 

二、清除默认样式

1、清除页边距

body {

　　margin: 0;

　　paddin: 0;

}

2、清除段间距

p {

　　margin-top: 0;

　　margin-bottom: 0;

}

3、清除列表样式

ul {

　　list-style-type: none;

　　margin-left: 0;

　　padding-left: 0;

}

4、清除超链接样式

a {

　　text-decoration: none;

　　color: rgb(...);

}

a:link { color: rgb(...); }

a:hover { color: rgb(...); }

a:active { color: rgb(...); }

a:visited { color: rgb(...); }