아마도 이 게시물은 CSS를 시작하는 방법에 관한 것이기 때문에 첫 번째 게시물 중 첫 번째 게시물이어야 합니다. 그런 다음 다시 말하지만, 당신이 정확히 무엇을 하고 있는지 이해할 수 있어야 합니다. 그래서 저는 이것에 너무 늦지 않았습니다.

코드에서 재설정은 모든 요소의 스타일을 일관된 기준선으로 재설정하는 간단한 규칙 세트를 제공합니다. 스타일이 브라우저 간에 일관성이 없기 때문에 필요합니다. 예를 들어 사전 스타일링과 같은 것을 원하지 않습니다. 당신이 켜져있을 때 당신을 엉망으로 만드는 테이블 요소.

관행

내가 CSS를 시작할 때 처음에는 항상 다음과 같이 작성해야 한다고 들었습니다.

 *{
    margin:0;
    padding:0;
 }

이것은 기본 CSS 재설정이었습니다.

브라우저마다 다르게 스타일이 지정되는 가장 일반적인 요소 중 일부는 하이퍼링크(), 이미지(), 제목(

~

) 및 다양한 요소에 지정된 여백입니다. 브라우저가 거의 모든 것에 일정량의 패딩을 추가한다는 것은 잘 알려진 사실입니다.

브라우저 간 체크아웃 버튼 스타일이 다른 예:



다양한 요소(제목, 링크, 범위, 코드, 인용구)의 다양한 스타일 지정 예:



모든 브라우저에는 기본 HTML 형식이 있으며 검사 모드의 "사용자 에이전트 스타일시트"에서 볼 수 있습니다. 특정 요소에 스타일이 추가되면 기본 브라우저 형식을 덮어씁니다.

스크립트 재설정

내가 가장 좋아하는 CSS 재설정 스크립트는 http://html5doctor.com의 스크립트입니다.

 html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote,  pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
     margin:0;
     padding:0;
     border:0;
     outline:0;
     font-size:100%;
     vertical-align:baseline;
     background:transparent;
 }

 body {
     line-height:1;
 }

 article,aside,details,figcaption,figure, footer,header,hgroup,menu,nav,section{ 
     display:block;
 }

 nav ul {
    list-style:none;
 }

 blockquote, q {
    quotes:none;
 }

 blockquote:before, blockquote:after, q:before, q:after {
    content:'';
    content:none;
 }

 a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
 }

 /* change colors to suit your needs */
 ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
 }

 /* change colors to suit your needs */
 mark {
    background-color:#ff9;
    color:#000; 
    font-style:italic;
    font-weight:bold;
 }

 del {
    text-decoration: line-through;
 }

 abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
 }

 table {
    border-collapse:collapse;
    border-spacing:0;
 }

 /* change border color to suit your needs */
 hr {
    display:block;
    height:1px;
    border:0;   
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
 }

 input, select {
    vertical-align:middle;
 }

정의된 스타일 중 일부는 꽤 표준적이며( 및

용 스타일) 일부는 접근성을 돕기 위해 추가되고( 및 용 스타일) 일부는 추가(

---

)됩니다.

사용할 수 있는 더 많은 재설정 스크립트 목록이 있습니다.

• 
  meyerweb ,
• 
  carrer web ,
• 
  yui library ,
• 
  Simon Harte HTML5-Reset .

CSS 재설정 대신 일부 개발자는 CSS 정규화를 사용합니다(일부는 이를 "새 재설정"이라고 함). 재설정은 모든 것을 지우고 프로젝트를 "백지"로 만드는 데 사용되지만 정규화는 브라우저 간 스타일 불일치를 중화하면서 모범 사례를 유지합니다. 앞으로 CSS 정규화에 대해 확실히 쓸 것입니다. 그때까지 확인하십시오this post .



결론



CSS를 재설정할 필요는 없지만 브라우저의 사전 스타일 지정 및 CSS 재설정 존재를 인식하기 위한 것입니다.

이 문서는 원래 Kolosek Blog에 게시되었습니다.