HTML标签CSS属性默认值汇总(转)
?
这个东西,在你需要还原默认值的时候,比较有用。
开始的时候 *{margin:0;padding:0;},当需要使用边距的时候,就需要还原HTML默认CSS值了。
以前一直在找这份文档,今天偶然在w3上看到了。除了inline和block的定义,主要是要注意body|h1~h6|blockquote|menu|ul|ol|dd等标签的默认样式(margin和font-size)。
?
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 }
li????????????? { display: list-item }
head??????????? { display: none }
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 }
body??????????? { margin: 8px; line-height: 1.12 }
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 }
blockquote????? { margin-left: 40px; margin-right: 40px }
i, cite, em,
var, address??? { font-style: italic }
pre, tt, code,
kbd, samp?????? { font-family: monospace }
pre???????????? { white-space: pre }
button, textarea,
input, object,
select????????? { display:inline-block; }
big???????????? { font-size: 1.17em }
small, sub, sup { font-size: .83em }
sub???????????? { vertical-align: sub }
sup???????????? { vertical-align: super }
table?????????? { border-spacing: 2px; }
thead, tbody,
tfoot?????????? { vertical-align: middle }
td, th????????? { vertical-align: inherit }
s, strike, del? { text-decoration: line-through }
hr????????????? { border: 1px inset }
ol, ul, dir,
menu, dd??????? { margin-left: 40px }
ol????????????? { list-style-type: decimal }
ol ul, ul ol,
ul ul, ol ol??? { margin-top: 0; margin-bottom: 0 }
u, ins????????? { text-decoration: underline }
br:before?????? { content: ”\A” }
:before, :after { white-space: pre-line }
center????????? { text-align: center }
abbr, acronym?? { font-variant: small-caps; letter-spacing: 0.1em }
:link, :visited { text-decoration: underline }
:focus????????? { outline: thin dotted invert }
BDO[DIR="ltr"]? { direction: ltr; unicode-bidi: bidi-override }
BDO[DIR="rtl"]? { direction: rtl; unicode-bidi: bidi-override }
*[DIR="ltr"]??? { direction: ltr; unicode-bidi: embed }
*[DIR="rtl"]??? { direction: rtl; unicode-bidi: embed }
@media print {
? h1??????????? { page-break-before: always }
? h1, h2, h3,
? h4, h5, h6??? { page-break-after: avoid }
? ul, ol, dl??? { page-break-before: avoid
--------------------------------------------
同一个页面用多个id有什么影响
?
在样式表定义一个样式的时候,可以定义id也可以定义class,例如:
ID方法:#test{color:#333333},在页面中调用
内容有网友问,id和class好象没什么区别,我在页面中用了多个id在IE中显示也正常,用多个id有什么影响吗?
回答:第一影响就是不能通过W3的校验。
在页面显示上,目前的浏览器还都允许你犯这个错误,用多个相同ID“一般情况下”也能正常显示。但是当你需要用JavaScript通过id来控制这个div,那就会出现错误。
id是一个标签,用于区分不同的结构和内容,就象你的名字,如果一个屋子有2个人同名,就会出现混淆;
class是一个样式,可以套在任何结构和内容上,就象一件衣服;
概念上说就是不一样的:
id是先找到结构/内容,再给它定义样式;class是先定义好一种样式,再套给多个结构/内容。
web标准希望大家用严格的习惯来写代码,
例如:你可以用?显示粗体,也可以用?来显示,但W3C 建议大家用,因为更有语义
浏览器默认样式