在html中,即使我们没有指定页面元素显示的css样式,元素也会按照默认的的标准css样式去显示。因此掌握基本的html标签可以在一定程度上精简你的css代码,现将html标签的默认属性进行一定的汇总如下:
当我们预想的css样式和默认样式一致时,我们就不必浪费不必要的css代码在那些页面元素上了,从而达到css代码的精简!
1 | li { display: list-item } |
2 | head { display: none } |
3 | table { display: table } |
4 | tr { display: table-row } |
5 | thead { display: table-header-group } |
6 | tbody { display: table-row-group } |
7 | tfoot { display: table-footer-group } |
8 | col { display: table-column } |
9 | colgroup { display: table-column-group } |
10 | td, th { display: table-cell; } |
11 | caption { display: table-caption } |
12 | th { font-weight: bolder; text-align: center } |
13 | caption { text-align: center } |
14 | body { margin: 8px; line-height: 1.12 } |
15 | html, address,blockquote,body, dd, div,dl, dt, fieldset, form,frame, frameset,h1, h2, h3, h4,h5, h6, noframes,ol, p, ul, center,dir, hr, menu, pre { display: block } |
16 | h4, p,blockquote, ul,fieldset, form,ol, dl, dir,menu { margin: 1.12em 0 } |
17 | h1 { font-size: 2em; margin: .67em 0 } |
18 | h2 { font-size: 1.5em; margin: .75em 0 } |
19 | h3 { font-size: 1.17em; margin: .83em 0 } |
20 | h5 { font-size: .83em; margin: 1.5em 0 } |
21 | h6 { font-size: .75em; margin: 1.67em 0 } |
22 | h1, h2, h3, h4,h5, h6, b,strong { font-weight: bolder } |
23 | blockquote { margin-left: 40px; margin-right: 40px } |
24 | i, cite, em, var , address { font-style: italic } |
25 | pre, tt, code, kbd, samp { font-family: monospace } |
26 | pre { white-space: pre } |
27 | button, textarea, input, object, select { display:inline-block; } |
28 | big { font-size: 1.17em } |
29 | small, sub, sup { font-size: .83em } |
30 | sub { vertical-align: sub } |
31 | sup { vertical-align: super } |
32 | table { border-spacing: 2px; } |
33 | thead, tbody, tfoot { vertical-align: middle } |
34 | td, th { vertical-align: inherit } |
35 | s, strike, del { text-decoration: line-through } |
36 | hr { border: 1px inset } |
37 | ol, ul, dir, menu, dd { margin-left: 40px } |
38 | ol { list-style-type: decimal } |
39 | ol ul, ul ol, ul ul, ol ol { margin-top: 0; margin-bottom: 0 } |
40 | u, ins { text-decoration: underline } |
41 | br:before { content: “\A” } |
42 | :before, :after { white-space: pre-line } |
43 |
44 | center { text-align: center } |
45 | abbr, acronym { font-variant: small-caps; letter-spacing: 0.1em } |
46 | :link, :visited { text-decoration: underline } |
47 | :focus { outline: thin dotted invert } |
48 |
49 | @media print { |
50 | h1 { page- break -before: always } |
51 | h1, h2, h3,h4, h5, h6 { page- break -after: avoid } |
52 | ul, ol, dl { page- break -before: avoid } |
53 | } |
54 |
55 | BDO[DIR= "ltr" ] { direction: ltr; unicode-bidi: bidi-override } |
56 | BDO[DIR= "rtl" ] { direction: rtl; unicode-bidi: bidi-override } |
57 |
58 | *[DIR= "ltr" ] { direction: ltr; unicode-bidi: embed } |
59 | *[DIR= "rtl" ] { direction: rtl; unicode-bidi: embed } |
No comments:
Post a Comment