Reset.css 란 무엇입니까?

reset.css는 브라우저 태그를 재설정하는 스타일 시트입니다. 해당 기능은 태그 스타일을 재정의하고 브라우저의 기본 CSS 속성을 재정의하는 것입니다. 즉, 브라우저에서 제공하는 기본 스타일을 덮어씁니다.

권장: "css 비디오 튜토리얼"

reset.css는 브라우저 태그의 스타일 시트를 재설정합니다.

HTML 태그에는 브라우저의 기본 스타일이 있습니다. 예를 들어 p 태그에는 위쪽 및 아래쪽 여백이 있고, Strong 태그에는 굵은 글꼴 스타일이 있으며, em 태그에는 기울임꼴 글꼴 스타일이 있습니다. 예를 들어, ul 은 기본적으로 들여쓰기 스타일을 가지고 있지만, IE에서는 들여쓰기가 패딩에 의해 이루어집니다. 페이지를 전환할 때 브라우저의 기본 스타일은 종종 문제를 일으키고 개발 효율성에 영향을 미칩니다.

그래서 해결 방법은 처음부터 브라우저의 기본 스타일을 모두 제거하거나 더 정확하게는 레이블 스타일을 재정의하는 것입니다. 브라우저의 CSS 기본 속성을 "재정의"합니다. 가장 간단한 방법은 브라우저에서 제공하는 기본 스타일을 덮어쓰는 것입니다! CSS 재설정입니다.

재설정 기능

브라우저 종류가 많기 때문에 각 브라우저의 기본 스타일도 다릅니다. 예를 들어 IE 브라우저, Firefox 브라우저 및 Safari 브라우저에서는 태그의 스타일이 다릅니다. 이므로 버튼 태그의 CSS 속성을 재설정한 후 균일하게 정의하면 동일한 표시 효과를 얻을 수 있습니다.

Content

가장 간단한 CSS Reset 콘텐츠는 몇 줄이면 완성할 수 있습니다:

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

(그러나 성능이 낮기 때문에 권장하지 않습니다)

이 방법은 모든 선택기의 패딩, 여백 및 테두리를 만듭니다. 0으로 설정합니다. YUI의 CSS 재설정 콘텐츠와 같은 더 많은 콘텐츠도 있습니다.

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;
}
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:'';
}
abbr,acronym { border: 0;
}
以及国外名人Eric Meyer的CSS Reset V1.0|200802内容：
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before,blockquote:after,
q:before, q:after {
content: '';
content: none;
}
/* remember to define focus styles! */
:focus {
outline: 0;}
/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}
Eric Meyer V2.0|20110126
[1] 
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6,
　　p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em,
　　img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,
　　dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption,
　　tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed,
　　figure, figcaption, footer, header, hgroup, menu, nav, output,
　　ruby, section, summary,time, mark, audio, video {
　　margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;
　　}
　　/* HTML5 display-role reset for older browsers */
　　article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
　　display: block;}body {line-height: 1;
　　}
　　ol, ul {list-style: none;
　　}blockquote, q {quotes: none;}
　　blockquote:before, blockquote:after,
　　q:before, q:after {content: '';content: none;}table {border-collapse: collapse;border-spacing: 0;}

보시다시피 이러한 콘텐츠 방법은 다르지만 기능은 유사하며 모두 재설정 역할을 하므로 CSS 재설정은 다양한 용도에 따라 사용할 수 있습니다. 개인 요구에 따라 맞춤화됩니다.

위 내용은 Reset.css 란 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!