재설정 CSS 란 무엇입니까?

reset css는 브라우저 태그의 스타일 시트를 재설정하는 reset.css를 말합니다. 그 기능은 브라우저의 기본 스타일을 모두 제거하는 것입니다. 더 정확히 말하면 브라우저에서 제공하는 기본 스타일을 재정의하여 덮어쓰는 것입니다. 태그 스타일을 잃습니다.

이 문서의 운영 환경: Windows 7 시스템, CSS3 버전, DELL G3 컴퓨터

reset.css 브라우저 태그의 스타일 시트 재설정

HTML 태그에는 브라우저의 기본 스타일이 있습니다(예: p 태그에는 위쪽 및 아래쪽 여백이 있고, Strong 태그에는 굵은 글꼴 스타일이 있으며, em 태그에는 기울임꼴 글꼴 스타일이 있습니다. 예를 들어, ul 은 기본적으로 들여쓰기 스타일을 가지고 있지만, IE에서는 들여쓰기가 패딩에 의해 이루어집니다.

페이지를 전환할 때 브라우저의 기본 스타일이 문제를 일으키고 개발 효율성에 영향을 미치는 경우가 많습니다. 따라서 해결책은 처음부터 모든 브라우저의 기본 스타일을 제거하거나 더 정확하게는 레이블 스타일을 재정의하는 것입니다. 브라우저의 CSS 기본 속성을 "재정의"합니다. 가장 간단한 방법은 브라우저에서 제공하는 기본 스타일을 덮어쓰는 것입니다! CSS 재설정입니다.

재설정 기능

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

가장 간단한 CSS 재설정 콘텐츠는 단 몇 줄로 완료할 수 있습니다:

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

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

이 방법은 모든 선택기의 패딩, 여백 및 테두리를 0으로 설정합니다. YUI의 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;
}
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

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 동영상 튜토리얼"

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