css默认值汇总

HTML标签CSS属性默认值汇总 mark一下zhq[1]

这个东西，在你需要还原默认值的时候，比较有用。

开始的时候 *{margin:0;padding:0;}，当需要使用边距的时候，就需要还原HTML默认CSS值了。这里如果你要清除padding值，那你只需要body,ul, ol, dd{padding:0}，如果用*去初始化就会增加页面渲染负荷，当然一般项目根本并不在乎这点。所以你写全局样式时可以按需并按它默认值去写全局样式。

以前一直在找这份文档，今天偶然在w3上看到了。除了inline和block的定义，主要是要注意body|h1~h6|blockquote|menu|ul|ol|dd等标签的默认样式（margin和font-size）。

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

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} 
/* 以上按照block显示，没有规定的则按照默认的inline显示 */
 
li { display: list-item} 
/* 程序猿常用的display值是：inline/block/inline-block，很少用到 list-item
list-item到底是什么样的显示效果，可以通过例子验证。。。。
第一，你可以不用ul-li，而用其他标签实现list-item的效果
第二，要意识到，浏览器对待html只是把它当作一个dom树，至于显示成什么效果，是通过浏览器默认的css实现的，即样式全部通过css设计，和html无关 */
 
head { display: none} 
table { display: table } 
/* display:table 和 block 最大的区别在于：包裹性。 提到包裹性，就不得不提一下float和absolute*/
 
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; } 
/* 与table相关的其他display值，研究的意义不大，但是table-cell值得一说。
table-cell是多列布局的最新解决方案，比使用float更加有效（不兼容IE6、7）
实际上table-cell是要依赖其他table相关的display，但是浏览器会为我们做这些工作，不必手动填写 */
 
caption{ display: table-caption} 
th { font-weight: bolder; text-align: center} 
/* 标题默认设置了粗体和文字居中 */
 
caption{ text-align: center} 
body { margin: 8px; line-height: 1.12} 
/* 不同浏览器的margin不一样，所以要设置【 *{margin:0} 】 
line-height:1.12 针对英文没问题，但是中文看起来很别扭
另外，1.12是一个相对值（即1.12em），与文字有关的距离设置最好用相对值*/
 
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} 
/* em是相对单位，1em就是一单位，浏览器默认的一单位是16px，
可以通过 body{font-size:20px} 来修改一单位的值
p的字体大小是1em，h1是2em，h2是1.5em，等等
另外，与文字相关的距离值，最好用相对单位，例如 line-height:1.4; margin:.5em等等，这样做的好处就是当自定义了1em的绝对px时，line-height也会跟着变 */
 
/* 注意，如果我们自己写css【 * {margin:0} 】，可以把p、h1、h2等标签的margin覆盖掉
我们都知道，*选择器的权重是最低的，但是它却能覆盖掉标签选择器，说明浏览器已经在这里面做了手脚
浏览器没有让默认样式和用户自定义样式“公平竞争”，而是优先用户自定义样式 */
 
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; } 
/* 不知道inline-block是什么样子的？或者不知道inline-block有什么特性？
在这里看看哪些标签是inline-block，就知道inline-block的用处了
具体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} 
/* 为什么<hr/>默认是那么个难看的样子，特别是IE下，这就是罪魁祸首 */
 
ol, ul, dir, 
menu, dd { margin-left: 40px} 
ol {list-style-type: decimal} 
/* ul 和 ol 在默认情况下都会有一篇左边的间距，在这里可以看到为何会有间距，以及间距的具体大小是多少。
 */
 
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 } 
/* <br/>为何能实现换行？浏览器得到html的br标签，只会解析成一个dom节点而已，
而“换行”这一功能是通过这里实现的？ */
 
center{text-align: center} 
abbr, acronym { font-variant: small-caps; letter-spacing: 0.1em} 
:link, :visited { text-decoration: underline} 
:focus {outline: thindottedinvert} 
 
/* Begin bidirectionality settings (do not change) */
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，都能覆盖默认的标签选择器 */
 
浏览器默认样式

　摘：http://www.cnblogs.com/wangfupeng1988/p/4280801.html　

--------------------------------------------------------------------------------

浏览器默认样式

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的边框线

摘：http://www.w3cfuns.com/topic-12.html

要清除图片链接样式，一般可以设置

img {

border:0;

}

posted @ 2015-12-21 15:11 诸葛正当年阅读(613) 评论(0) 收藏举报

努力加载评论中...

刷新页面返回顶部

诸葛正当年

css默认值汇总

公告