通用CSS初始化界面

最新推荐文章于 2023-12-07 16:21:50 发布

bartidler

最新推荐文章于 2023-12-07 16:21:50 发布

阅读量2.6k

点赞数

CC 4.0 BY-SA版权

文章标签： css border input 浏览器 styles html

本文链接：https://blog.youkuaiyun.com/bartidler/article/details/4810287

几个感觉比较好的CSS初始化方法

2009年10月30日星期五 18:05

1.
charset ”utf-8″;
html {background:url(/www/pic/head_back.gif) repeat-x top #FFF}
body {width:920px;font:12px Arial;margin:0 auto;padding:0;color:#000;}
a{color:#000; text-decoration:none}
a:hover {color:#f00; text-decoration:underline}
ul,ol,p,dl{margin:0;padding:0}
ul,ol,dl{height:100%;overflow:hidden}
li{list-style:none}
img {border:none}
h1,h2,h3,h4{font:12px Verdana;margin:0;padding:0}
input {font:12px Verdana}
2.

/*为背景定义了颜色*/
/*html {
color:#000;
background:#FFF;
}*/
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td {
margin:0;
padding:0;
}
/*合并边线,边线空间至零.*/
table {
border-collapse:collapse;
border-spacing:0;
}
/*清除边线*/
fieldset, img {
border:0;
}
address, caption, cite, code, dfn, em, strong, th, var {
font-style:normal;
font-weight:normal;
}
li {
list-style:none;
}
caption, th {
text-align:left;
}
h1, h2, h3, h4, h5, h6 {
font-size:100%;
font-weight:normal;
}
/*添加空字符清除融合*/
q:before, q:after {
content:”;
}
abbr, acronym {
border:0;
font-variant:normal;
}
/* to preserve line-height and selector appearance */
sup {
vertical-align:text-top;
}
sub {
vertical-align:text-bottom;
}
input, textarea, select {
font-family:inherit;
font-size:inherit;
font-weight:inherit;
}
/*to enable resizing for IE*/
/*在ie下重定义*/
input, textarea, select {
*font-size:100%;
}
/*because legend doesn’t inherit in IE */
/*IE下legend不继承 */
legend {
color:#000;
前段时间在一个群里大家讨论CSS样式的初始化问题，有的人刚开始还有疑问，为什么要初始化CSS？我也不知道他们为什么会提出这么一个问题，也许他们平时做页面时根本就没考虑过浏览器兼容的问题。其实不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面差异。最后，大家都把自己的在设计中对CSS的初始化代码拿出来比较了以下，我自己以前最爱用的是自己认为写法简单而且实用的：
* {
padding: 0;
margin: 0;
}
这确实很简单，而且也有很多人是这么写的，认为这最简单。但是有人有疑问了。这样用个*通用符是快，但是如果网站很大，CSS文件很大，这样回减慢页面的加载速度。仔细想想也有可能。因为这样写的话他会把所以标签给初始化，如果标签很多是会影响速度。

最后不知道谁给出了Erik Meyer的Css Reset，给人感觉确实不错，着也应该是大家使用最多的：

程序代码

html, body, div, span, applet, object, iframe, table, caption, tbody, tfoot, thead, tr, th, td,
del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code,
dl, dt, dd, ol, ul, li, fieldset, form, label, legend {
vertical-align: baseline;
font-family: inherit;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
outline: 0;
padding: 0;
margin: 0;
border: 0;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
background: white;
line-height: 1;
color: black;
}
ol, ul {
list-style: none;
}
/* tables still need cellspacing="0" in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
font-weight: normal;
text-align: left;
}
/* remove possible quote marks (") from <q> & <blockquote> */
blockquote:before, blockquote:after, q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}

最后经过大家对Erik Meyer的Css Reset的讨论，认为还可以修改，最后得出了下面的结果感觉是不是又简洁了点，不过效果都一样哦：

程序代码

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6,
pre, form, fieldset, input, textarea, p, blockquote, th, td {
padding: 0;
margin: 0;
}
fieldset, img {
border: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
ol, ul {
list-style: none;
}
address, caption, cite, code, dfn, em, strong, th, var {
font-weight: normal;
font-style: normal;
}
caption, th {
text-align: left;
}
h1, h2, h3, h4, h5, h6 {
font-weight: normal;
font-size: 100%;
}
q:before, q:after {
content: '';
}
abbr, acronym {
border: 0;
}

}