首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > CSS >

HTML标签CSS属性默认值集锦(转)

2012-10-25 
HTML标签CSS属性默认值汇总(转)?这个东西,在你需要还原默认值的时候,比较有用。开始的时候 *{margin:0padd

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},在页面中调用

内容
CLASS方法:.test{color:#333333},在页面中调用内容
id一个页面只可以使用一次,class可以多次引用。

有网友问,id和class好象没什么区别,我在页面中用了多个id在IE中显示也正常,用多个id有什么影响吗?

回答:第一影响就是不能通过W3的校验。

在页面显示上,目前的浏览器还都允许你犯这个错误,用多个相同ID“一般情况下”也能正常显示。但是当你需要用JavaScript通过id来控制这个div,那就会出现错误。

id是一个标签,用于区分不同的结构和内容,就象你的名字,如果一个屋子有2个人同名,就会出现混淆;
class是一个样式,可以套在任何结构和内容上,就象一件衣服;
概念上说就是不一样的:
id是先找到结构/内容,再给它定义样式;class是先定义好一种样式,再套给多个结构/内容。

web标准希望大家用严格的习惯来写代码,

例如:你可以用?显示粗体,也可以用?来显示,但W3C 建议大家用,因为更有语义

浏览器默认样式

1.页边距
IE默认为10px,通过body的margin属性设置
FF默认为8px,通过body的padding属性设置
要清除页边距一定要清除这两个属性值
body {
?? margin:0;
?? padding:0;
}

2.段间距
IE默认为19px,通过p的margin-top属性设置
FF默认为1.12em,通过p的margin-bottom属性设
p默认为块状显示,要清除段间距,一般可以设置
p {
?? margin-top:0;
?? margin-bottom:0;
}

3.标题样式
h1~h6默认加粗显示:font-weight:bold;。
默认大小请参上表
还有是这样的写的
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;}
个大浏览器默认字体大小为16px,即等于medium,h1~h6元素默认以块状显示字体显示为粗体,
要清除标题样式,一般可以设置
hx {
?? font-weight:normal;
?? font-size:value;
}

4.列表样式
IE默认为40px,通过ul、ol的margin属性设置
FF默认为40px,通过ul、ol的padding属性设置
dl无缩进,但起内部的说明元素dd默认缩进40px,而名称元素dt没有缩进。
要清除列表样式,一般可以设置
ul, ol, dd {
?? list-style-type:none;/*清楚列表样式符*/
?? margin-left:0;/*清楚IE左缩进*/
?? padding-left:0;/*清楚非IE左缩进*/
}

5.元素居中
IE默认为text-align:center;
FF默认为margin-left:auto;margin-right:auto;

6.超链接样式
a 样式默认带有下划线,显示颜色为蓝色,被访问过的超链接变紫色,要清除链接样式,一般可以设置
a {
?? text-decoration:none;
?? color:#colorname;
}

7 鼠标样式
IE默认为cursor:hand;
FF默认为cursor:pointer;。该声明在IE中也有效

8 图片链接样式
IE默认为紫色2px的边框线
FF默认为蓝色2px的边框线
要清除图片链接样式,一般可以设置
img {
?? border:0;
}

原文地址http://www.cnblogs.com/dragontappi/archive/2011/04/08/2009991.html

热点排行