博客首页CSS2-3分类

Yahoo YUI Reset

发布时间:2016-06-29 11:57:41编辑:Mr.Co阅读(3444)

-请选择-

   现在市面上的各个终端中都会有不同的Browser,这些Browser都会有自己的默认自带的Element样式,辣么为了统一我们的样式在各个Browser中显示的方式一致。那我们就必须预先Reset所有的Element。这里我推荐YUI的Reset。

相信大家最常用的reset的方法莫过于下面这种方式,简单粗暴。

*{ padding:0; margin:0; border:0; }
但是上面这种方式太过于简单,很多element的潜在样式并没有reset到。


我们还是看看YUI的Reset源码:

html{
	color:#000;
	background:#FFF;
}
/*
	TODO remove settings on BODY since we can't namespace it.
*/
/*
	TODO test putting a class on HEAD.
	- Fails on FF.
*/
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;
}
/*
	TODO think about hanlding inheritence differently, maybe letting IE6 fail a bit...
*/
address,
caption,
cite,
code,
dfn,
em,
strong,
th,
var {
	font-style:normal;
	font-weight:normal;
}

ol,
ul {
	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;
	*font-size:100%; /*to enable resizing for IE*/
}
/*because legend doesn't inherit in IE */
legend {
	color:#000;
}

/* YUI CSS Detection Stamp */
#yui3-css-stamp.cssreset { display: none; }

YUI提供了CDN地址,将它放置到你的所有样式之上, 强烈建议放置在head中:

<link rel="stylesheet" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">

转载请注明出自:http://www.mrco.cn/article/577347356248a4cd5b5deff9.html

最新评论(0)

    我要评论

    *
    *
    *
    *
    *
    *
    验证码