자신의 리셋을 만듭니다.css 독서노트

현재 유행하는 것은: 현재 비교적 유행하는 것은 4Eric Meyer의 재설정 스타일 및YUI를 입력합니다.
왜 우리는 스타일 리셋을 사용해야 합니까?css는요?그것은 업무 중에 브라우저가 호환되어야 한다는 문제에 부딪혔기 때문에 우리는 가능한 한 브라우저가 호환되는 코드를 적게 원했다. 그러나 하필이면 다른 브라우저는 자신의 기본 스타일이 있다. 예를 들어 리의 Margin-top은 a 브라우저에서는 3px이고 b 브라우저에서는 2px가 될 수 있다. 이렇게 하면 a브라우저와 같은 효과가 있고 b 브라우저에서는 또 다른 효과가 있다. 어떻게 가능한 한 이런 문제를 피할 수 있겠는가.바로 자신이'스타일 리셋'을 사용하고 가능한 한 사용할 탭의 스타일을 스스로 통일시키는 것이다. 개발자가 사이트를 위해 설정한 스타일은 일반적으로 브라우저의 기본 스타일보다 우선하기 때문이다. 그래서 만약에 우리가 리의 Margin-top을 2px로 설정한다면 현재 a에서 조회하고 있다. 리의 Margin-top는 2px이고 b 브라우저에서 Margin-top인가 2px인가 하면 일부 브라우저가 호환되는 문제를 해결할 수 있지 않겠는가?물론 브라우저의 호환 문제는 이렇게 쉽게 해결할 수 있는 것은 아니지만, 적어도 우리 전방 개발자들은 신경을 덜 쓸 수 있을 것이다.
나는 유이의 리셋 스타일로
　　

/*
Copyright (c) 2010, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.com/yui/license.html
version: 3.3.0
build: 3167
*/
/*
	TODO will need to remove settings on HTML since we can't namespace it.
	TODO with the prefix, should I group by selector or property for weight savings?
*/
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;
}
/*
	TODO Figure out where this list-style rule is best set. Hedger has a request to investigate.
*/
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*/
input,
textarea,
select {
	*font-size:100%;
}
/*because legend doesn't inherit in IE */
legend {
	color:#000;
}

 1.기초
1
*
{
margin
:
0
;
padding
:
0
;
}
   
2 .기본 색: reset에서 배경색과 텍스트 색을 설정하지 마십시오.
3 .margging과padding:유이의 방법을 추천합니다.
 4. 테두리:유이 거 추천합니다.
5. 에릭 같은 외곽선(outline)
1
* remember to define focus styles! */
2
:focus
{
3
outline
:
0
;
4
 
}