CSS Reset(리셋) 방식 정리_경험치 교환-CSS 튜토리얼-php.cn

CSS Reset(리셋) 방식 정리_경험치 교환

PHP中文网

풀어 주다： 2016-05-16 12:04:32

원래의

1852명이 탐색했습니다.

Css Reset이 무엇인가요? 일부 동료는 이를 "css 재설정"이라고 부르고 일부는 "기본 CSS"라고 부르기도 합니다...

전체 내용을 읽고 나면 CSS Reset에 대해 새로운 이해를 가지게 될 것이라고 믿습니다. text
PS:

* { 
padding: 0; 
margin: 0; 
}

로그인 후 복사

가장 일반적으로 사용되는 CSS Reset이지만 여기에는 문제가 많습니다.

원본 기사의 첫 번째 부분에서는 CSS와 각 브라우저의 CSS 규칙의 차이점에 대해 많이 설명합니다. "Css Reset"도 "Css Reset"의 올바르고 효과적인 사용을 위해 구성되었습니다. 어느 정도 성능을 향상시킬 수 있습니다.

정리하고 요약해 주신 Perishable에게 진심으로 감사드립니다.

다음은 CSS Reset의 여러 유형에 대한 간략한 소개입니다. 일반적인 의미만 이해가 되실 뿐입니다.

Minimalistic Reset [ Version 1 ]
이 문단도 자주 보셨을 거라 믿습니다.

* { 
padding: 0; 
margin: 0; 
}

로그인 후 복사

Minimalistic Reset [ Version 2 ]
border:0 디자인이 좀 불안정하네요

* { 
padding: 0; 
margin: 0; 
border: 0; 
}

로그인 후 복사

Minimalistic Reset [ Version 3 ]
물론이죠. 권장되지 않습니다.

* { 
outline: 0; 
padding: 0; 
margin: 0; 
border: 0; 
}

로그인 후 복사

Condensed Universal Reset
이것은 작성자가 현재 선호하는 작성 방법입니다.

* { 
vertical-align: baselinebaseline; 
font-weight: inherit; 
font-family: inherit; 
font-style: inherit; 
font-size: 100%; 
border: 0 none; 
outline: 0; 
padding: 0; 
margin: 0; 
}

로그인 후 복사

Poor Man's Reset
사실 이것도 우리가 흔히 사용하는 CSS Reset의 일종입니다. 글꼴 크기를 재설정하고 이미지 링크의 테두리를 처리합니다.
일부 사이트에서도 자주 볼 수 있습니다.

html, body { 
padding: 0; 
margin: 0; 
} 
html { 
font-size: 1em; 
} 
body { 
font-size: 100%; 
} 
a img, :link img, :visited img { 
border: 0; 
}

로그인 후 복사

Shaun Inman의 전역 재설정
저자는 Shaun이 이러한 유형의 CSS 재설정을 작성하는 데 특정 목적이 있다고 믿습니다.
그리고 이러한 유형의 규칙은 일반적으로 몇 가지 중요한 목표를 가지고 있습니다.
예를 들어 IE, Firefox 등

body, p, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, 
form, fieldset, input, p, blockquote, table, th, td, embed, object { 
padding: 0; 
margin: 0; 
} 
table { 
border-collapse: collapse; 
border-spacing: 0; 
} 
fieldset, img, abbr { 
border: 0; 
} 
address, caption, cite, code, dfn, em, 
h1, h2, h3, h4, h5, h6, strong, th, var { 
font-weight: normal; 
font-style: normal; 
} 
ul { 
list-style: none; 
} 
caption, th { 
text-align: left; 
} 
h1, h2, h3, h4, h5, h6 { 
font-size: 1.0em; 
} 
q:before, q:after { 
content: &#39;&#39;; 
} 
a, ins { 
text-decoration: none; 
}

로그인 후 복사

Yahoo CSS Reset
Yahoo 직원이 작성한 Reset을 개인적으로 권장합니다

body,p,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; 
} 
table { 
border-collapse: collapse; 
border-spacing: 0; 
} 
fieldset,img { 
border: 0; 
} 
address,caption,cite,code,dfn,em,strong,th,var { 
font-weight: normal; 
font-style: normal; 
} 
ol,ul { 
list-style: none; 
} 
caption,th { 
text-align: left; 
} 
h1,h2,h3,h4,h5,h6 { 
font-weight: normal; 
font-size: 100%; 
} 
q:before,q:after { 
content:&#39;&#39;; 
} 
abbr,acronym { border: 0; 
}

로그인 후 복사

Erik Meyer의 CSS Reset
작가는 Erik Meyer의 코드를 재배치했지만 기능은 동일합니다.
업계에서 가장 많이 사용되는 CSS Reset 세트입니다.

html, body, p, 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: baselinebaseline; 
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: "" ""; 
}

로그인 후 복사

Condensed Meyer Reset
일반적으로 Erik Meyer의 Css Reset

body, p, 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: &#39;&#39;; 
} 
abbr, acronym { 
border: 0; 
}

로그인 후 복사

을 수정하고 개선한 것입니다.