이 기사는 CSS 길들이기에 관한 시리즈의 첫 번째 기사입니다. 오늘은 기술에 대해 알아보겠습니다 CSS 재설정.

이것이 필요한 이유는 무엇입니까?

각 브라우저는 다양한 HTML 요소에 대해 고유한 기본 스타일 값을 설정합니다. 에서 CSS 사용재설정하면 브라우저 간 스타일을 보장하기 위해 이 차이를 평준화할 수 있습니다.

예를 들어 요소를 사용하고 있습니다. ㅏ문서에서. 대부분의 브라우저는 인터넷 익스플로러및 Firefox, 링크 추가 블루 컬러그리고 밑줄. 그러나 5년 후 누군가가 새 브라우저(UltraBrowser라고 합시다). 브라우저 개발자는 파란색이 마음에 들지 않고 밑줄이 거슬려서 링크를 강조 표시하기로 결정했습니다. 빨간색으로그리고 굵게. 이를 바탕으로 요소의 기본 스타일 값을 설정하면 ㅏ, 그러면 UltraBrowser 개발자가 선호하는 표시 방식이 아니라 원하는 방식으로 보장됩니다.

그러나 이제 개별 단락 사이를 포함하여 들여쓰기가 전혀 없습니다! 무엇을 할까요? 거짓말을하지 말고 두려워하지 마십시오. 재설정 아래에서 필요한 규칙을 설명합니다. 할 수 있다 다른 방법들: 단락 아래 또는 위에 들여쓰기를 지정하고 백분율, 픽셀 또는 em으로 지정합니다.

가장 중요한 것은 브라우저가 이제 우리의 규칙이 아니라 우리의 규칙에 따라 작동한다는 것입니다. 나는 다음과 같이 하기로 결정했다.

* ( 여백: 0; 패딩: 0; ) p ( 여백: 5px 0 10px 0; )

결과적으로 세 번째 예에서 볼 수 있는 것을 얻었습니다.

프로젝트의 특정 문제를 해결하는 경우 고유한 재설정 스타일을 만들 수 있습니다. 그럼에도 불구하고 없다. 연습나만의 CSS 재설정을 만들 수 있습니다. 자신의 원칙과 스타일에 의존하십시오.

올바른 선택을 하는 데 도움이 되는 몇 가지 링크가 더 있습니다.

1. Less is more - 내가 선택한 CSS 재설정(Ed Elliot).

2. CSS 재설정은 브라우저에서 가장 먼저 확인해야 하는 항목입니다.

요소에 대한 고유한 스타일을 설정한 후 스타일을 재설정하는 것은 올바른 접근 방식이 아닙니다. 이 경우 브라우저의 표시에서 좋은 결과를 기대해서는 안 됩니다. 항상 CSS 재설정을 먼저 포함하고 다른 모든 스타일을 포함해야 함을 기억하십시오.

네, 우스꽝스럽게 들렸다는 것을 이해하지만 이것은 남녀노소 개발자의 주요 실수 중 하나입니다. 많은 사람들이 단순히 그것을 잊어 버립니다.

일부는 논리적인 질문을 할 수 있습니다. 왜 이런 일이 발생합니까? 대답은 간단합니다. CSS 파일에 기록된 규칙(그리고 문서의 순서대로)이 이전에 선언된 규칙을 덮어씁니다.

주제에서 너무 벗어나지 말고 계속합시다. Eric Meyer의 스타일을 예제에 적용해 보겠습니다. ~ 후에예 4와 같이 당사 속성에 대한 설명입니다. 수학자들은 다음과 같이 말할 것입니다. "그것이 증명되어야 하는 것입니다."

3. CSS 재설정을 위해 별도의 CSS 문서 사용

나는 이 조언을 언급해야 합니다. CSS 재설정을 위해 별도의 파일을 사용하는 것은 다음에서 지원하는 일반적인 방법입니다. 큰 숫자개발자.

사실 나는 창조하는 입장을 취한다. 하나의 큰 CSS 파일이 접근 방식의 더 높은 성능 때문입니다. 그러나 이 문제에 대해서는 대부분의 의견에 동의하는 경향이 있습니다. CSS 재설정은 별도의 파일(보통 reset.css라고 함)로 옮겨야 합니다. 이 경우 다른 CSS 규칙과 분리하지 않고도 다른 프로젝트에서 사용할 수 있습니다.

4. 유니버설 선택기를 사용하지 마십시오.

이 개념은 작동하지만 일부 브라우저와의 비호환성으로 인해 사용이 바람직하지 않은 경우가 많습니다(예: Internet Explorer에서 이 선택기가 잘못 처리됨). 이 기술은 단순하고 작고 정적이며 예측 가능한 페이지에만 사용해야 합니다(필요한 경우).

이 팁은 CMS 테마와 같은 솔루션을 개발할 때 특히 중요합니다. 어떻게 사용되고 어떻게 수정될지 미리 예측할 수 없습니다. 이를 위해 예측할 수 없는(더 작지만) 범용 선택기 메커니즘을 사용하는 것보다 모든 요소에 대한 기본 CSS 규칙을 설명하는 것이 좋습니다.

5. CSS 재설정을 사용할 때 중복되는 속성 설명 피하기

별도의 CSS 재설정 파일이 마음에 들지 않는 또 다른 이유는 후속 CSS 속성 선언이 중복될 가능성이 있기 때문입니다. 전체 CSS 파일 세트에서 개별 스타일을 반복하는 것은 좋지 않은 방식이므로 피해야 합니다. 물론 때로는 너무 게으르게 일련의 스타일을 고심하고 일부를 결합하기도 하지만 최소한 시도는 해야 합니다!

Eric의 CSS 재설정으로 돌아가 보겠습니다. 요소의 선 높이, 색상 및 배경에 대한 기본값을 설정합니다. 신체다음과 같은 방법으로:

body ( line-height: 1; color: black; background: white; )

요소가 어떻게 생겼는지 이미 알고 있다고 가정해 보겠습니다. 신체:

1. 배경색: #cccccc;
2. 색상: #996633;
3. 특정 배경 이미지를 가로로 반복하고 싶습니다.

이 경우 속성을 설명하기 위해 새 선택기를 만들 필요가 없습니다. CSS 재설정에 포함하기만 하면 됩니다. 해보자:

body ( line-height: 1; color: #996633; background:#ccc url(tiled-image.gif) repeat-x top left; )

CSS 재설정 자체를 수정하는 것을 두려워하지 마십시오.당신을 위해 그것을 사용자 정의하고 당신을 위해 일하게하십시오. 특정 경우에 필요에 따라 수정, 재구축, 제거 및 추가하십시오.

Eric Meyer는 이에 대해 "모든 사람이 변경 없이 CSS Reset을 사용해야 하는 경우는 아닙니다."라고 말했습니다.

기본적으로 모든 HTML 페이지 요소에는 고유한 정의된 값이 있습니다. 불행히도 다른 브라우저에서 동등하게 취급되지 않습니다. 결과적으로 사이트 디자인이 손상되고 브라우저(인터넷 브라우저)를 변경하면 디자인이 변경됩니다. 스타일 재설정 절차의 목적은 줄 높이, 여백, 제목 글꼴 크기 등과 같은 브라우저의 불일치를 줄이는 것입니다.

CSS 재설정 스크립트 예

자존심이 강한 모든 웹마스터는 자신의 CSS 재설정 코드를 작성해야 한다는 의견이 있습니다. 그러나 나는 다른 접근 방식을 지지하고 기성품 솔루션을 취하고 이해하고 필요하면 수정합니다.

에릭 마이어 CSS 재설정

저자 자신에 따르면 Eric Meyer의 재설정 스크립트는 의도적으로 매우 일반적입니다. 예를 들어 body 요소의 기본 배경색을 설정하지 않습니다. 따라서 필요에 맞게 수정, 편집, 확장 및 사용자 지정해야 합니다. 페이지, 링크 등에 원하는 색상을 추가합니다.

/* http://meyerweb.com/eric/tools/css/reset/v2.0 | 20110126 라이선스: 없음(공개 도메인) */ html, body, div, span, 애플릿, 객체, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, 두문자어, 주소, 큰, 인용, 코드, del, dfn, em, img, ins, kbd, q, s, samp, 작은, 스트라이크, 강한, 하위, sup, tt, var, b, u, i, 센터, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, 기사, 옆으로, 캔버스, 세부 정보, 삽입, 그림, figcaption, 바닥글, 머리글, 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 표시 역할 재설정 */ 기사, 제쳐두고, 세부 정보, figcaption, 그림, 바닥글, 헤더, hgroup, 메뉴, 탐색, 섹션( display: block; ) body( line-height: 1; ) ol, ul ( 목록 스타일: 없음; ) blockquote, q ( 따옴표: 없음; ) blockquote:before, blockquote:after, q:before, q:after ( 내용: ""; 내용: 없음; ) 테이블( 테두리- 축소:c 붕괴; 테두리 간격: 0; )

야후! (YUI 3) CSS 재설정

YUI 3 CSS 스타일 재설정은 다른 CSS 재설정 스크립트와 마찬가지로 브라우저에서 충돌하는 HTML 요소 스타일을 완화하여 웹사이트 및 웹 애플리케이션 구축을 위한 견고한 기반을 만듭니다.

/* YUI 3.18.1 Copyright 2014 Yahoo! 주식회사 판권 소유. BSD 라이선스에 따라 라이선스가 부여됩니다. http://yuilibrary.com/license/ */ /* TODO는 네임스페이스를 지정할 수 없기 때문에 HTML에서 설정을 제거해야 합니다. TODO와 접두사, 가중치를 줄이기 위해 선택기 또는 속성별로 그룹화해야 합니까? */ html( color:#000; background:#FFF; ) /* TODO는 BODY의 이름을 지정할 수 없기 때문에 BODY의 설정을 제거합니다. */ /* HEAD에 클래스를 넣는 TODO 테스트. - FF에서 실패합니다. */ 본문, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, 입력, 텍스트 영역, p, blockquote, th, td ( margin:0; padding:0; ) table ( border-collapse:collapse; border-spacing:0; ) fieldset, img ( border:0; ) /* TODO는 상속을 다르게 처리하는 것에 대해 생각합니다. 아마도 IE6이 약간 실패하도록 할 수 있습니다. ... */ address, caption, cite, code, dfn, em, strong, th, var ( font-style:normal; font-weight:normal; ) ol, ul ( 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; ) /* 줄 높이와 선택기 모양을 유지하기 위해 */ sup ( vertical-align:text-top; ) sub ( vertical-align:text-bottom; ) input, textarea , 선택 ( font-family:inherit; font-size:inherit; font-weight:inherit; *font-size:100%; /*IE에 대한 크기 조정을 활성화하려면*/ ) /*범례가 IE에서 상속되지 않기 때문에 * / legend ( color:#000; ) /* YUI CSS 감지 이온 스탬프 */ #yui3-css-stamp.cssreset ( 표시: 없음; )

normalize.css 스타일 재설정

Normalize.css는 브라우저가 최신 표준에 따라 모든 요소를 ​​보다 일관되게 렌더링할 수 있도록 하는 사용자 정의 CSS 파일입니다. 저자는 스타일 간의 차이점을 탐구했습니다. 다른 브라우저기본적으로 정규화해야 하는 스타일만 조정합니다.

/*! normalize.css v6.0.0 | MIT 라이센스 | github.com/necolas/normalize.css */ /* 문서 =================================== ======================================= */ /** * 1. 전체 라인 높이 수정 브라우저. * 2. * IE on에서 방향 변경 후 글꼴 크기 조정 방지 윈도우 폰그리고 iOS에서. */ html ( 줄 높이: 1.15; /* 1 */ -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */ ) /* 섹션 ================================================ =========================== */ /** * IE 9-. */ 기사, 옆, 바닥글, 헤더, 탐색, 섹션 ( display: block; ) /** * Chrome, Firefox 및 원정 여행. */ h1 ( font-size: 2em; margin: 0.67em 0; ) /* 그룹화 내용 ============================= ============================================*/ /** * 추가 IE 9-. * 1. IE에서 올바른 디스플레이를 추가합니다. */ figcaption, figure, main ( /* 1 */ display: block; ) /** * IE 8에서 올바른 여백을 추가하세요. */ figure ( margin: 1em 40px; ) /** * 1. 올바른 상자를 추가하세요. Firefox에서 크기 조정. * 2. Edge 및 IE에서 오버플로를 표시합니다. */ hr ( box-sizing: content-box; /* 1 */ height: 0; /* 1 */ overflow: visible; /* 2 */ ) /** * 1. 글꼴 크기의 상속 및 스케일링 수정 모든 브라우저에서. * 2. 모든 브라우저에서 이상한 `em` 글꼴 크기를 수정합니다. */ pre ( font-family: 고정 폭, 고정 폭; /* 1 */ font-size: 1em; /* 2 */ ) /* 텍스트 수준 의미론 =============== ===================================================== ======== */ /** * 1. IE 10에서 활성 링크의 회색 배경을 제거합니다. * 2. iOS 8+ 및 Safari 8+에서 링크 밑줄의 공백을 제거합니다. */ a ( background-color: transparent; /* 1 */ -webkit-text-decoration-skip: objects; /* 2 */ ) /** * 1. Chrome 57- 및 Firefox 39-에서 하단 테두리 제거 . * 2. 올바른 추가 텍스트 장식 Chrome, Edge, IE, Opera 및 Safari에서 */ abbr ( border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ text-decoration: underline dotted; /* 2 */ ) /** * `bolder' 중복 적용 방지 ` by the next rule in Safari 6. */ b, strong ( font-weight: inherit; ) /** * Chrome, Edge, Safari에서 올바른 글꼴 두께를 추가합니다. */ b, strong ( font-weight: bolder; ) /** * 1. 모든 브라우저에서 글꼴 크기의 상속 및 크기 조정을 수정합니다. * 2. 모든 브라우저에서 이상한 `em` 글꼴 크기를 수정합니다. */ code, kbd, samp ( font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ ) /** * Android 4.3-에서 올바른 글꼴 스타일을 추가하십시오. */ dfn ( font-style: italic; ) /** * IE 9-에서 올바른 배경과 색상을 추가합니다. */ mark ( background-color: #ff0; color: #000; ) /** * 모든 브라우저에서 올바른 글꼴 크기를 추가하십시오. */ small ( font-size: 80%; ) /** * 모든 브라우저에서 `sub` 및 `sup` 요소가 * 줄 높이에 영향을 미치지 않도록 합니다. */ sub, sup ( font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; ) sub ( bottom: -0.25em; ) sup ( top: -0.5em; ) /* 포함된 콘텐츠 ================================================= ========================== */ /** * IE 9-에서 올바른 디스플레이 추가. */ audio, video ( display: inline-block; ) /** * iOS 4-7에서 올바른 디스플레이를 추가하십시오. */ audio:not() ( display: none; height: 0; ) /** * IE 10-에서 링크 내부 이미지의 테두리를 제거합니다. */ img ( border-style: none; ) /** * IE에서 오버플로를 숨깁니다. */ svg:not(:root) ( overflow: hidden; ) /* Forms =============================== =========================================== */ /** * 여백 제거 파이어폭스와 사파리에서. */ 버튼, 입력, optgroup, 선택, 텍스트 영역 ( 여백: 0; ) /** * IE에서 오버플로를 표시합니다. * 1. Edge에서 오버플로를 표시합니다. */ 버튼, 입력 ( /* 1 */ overflow: visible; ) /** * Edge, Firefox 및 IE에서 텍스트 변환 상속을 제거합니다. * 1. Firefox에서 텍스트 변환의 ​​상속을 제거합니다. */ 버튼, 선택 ( /* 1 */ text-transform: 없음; ) /** * 1. (2) Android 4에서 네이티브 '오디오' 및 '비디오' 컨트롤을 파괴하는 WebKit 버그를 방지합니다. * 2. iOS 및 Safari에서 클릭 가능한 유형의 스타일을 지정할 수 없는 문제를 수정합니다. */ button, html , /* 1 */ , ( -webkit-appearance: button; /* 2 */ ) /** * Firefox에서 내부 테두리와 패딩을 제거합니다. */ 버튼::-moz-focus-inner, ::-moz-focus-inner, ::-moz-focus-inner, ::-moz-focus-inner ( 테두리 스타일: 없음, 패딩: 0; ) /** * 이전 규칙에 의해 설정되지 않은 포커스 스타일을 복원합니다. */ 버튼:-moz-focusring, :-moz-focusring, :-moz-focusring, :-moz-focusring ( 아웃라인: 1px dotted ButtonText; ) /** * 1. Edge 및 IE에서 텍스트 줄바꿈을 수정합니다. * 2. IE의 'fieldset' 요소에서 색상 상속을 수정합니다. * 3. 개발자가 모든 브라우저에서 'fieldset' 요소를 0으로 만들 때 * 개발자가 잡히지 않도록 패딩을 제거합니다. */ legend ( box-sizing: border-box; /* 1 */ color: inherit; /* 2 */ display: table; /* 1 */ max-width: 100%; /* 1 */ padding: 0 ; /* 3 */ white-space: normal; /* 1 */ ) /** * 1. IE 9-에서 올바른 표시를 추가합니다. * 2. Chrome, Firefox 및 Opera에서 올바른 수직 정렬을 추가합니다. */ progress ( display: inline-block; /* 1 */ vertical-align: baseline; /* 2 */ ) /** * IE에서 기본 세로 스크롤 막대를 제거합니다. */ textarea ( overflow: auto; ) /** * 1. IE 10-에서 올바른 상자 크기를 추가합니다. * 2. IE 10-에서 패딩을 제거합니다. */ , ( box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ ) /** * Chrome에서 증가 및 감소 버튼의 커서 스타일을 수정합니다. */ ::-webkit-inner-spin-button, ::-webkit-outer-spin-button ( height: auto; ) /** * 1. Chrome 및 Safari에서 이상한 모양을 수정합니다. * 2. Safari에서 윤곽선 스타일을 수정합니다. */ ( -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ ) /** * macOS의 Chrome 및 Safari에서 내부 패딩 및 취소 버튼을 제거합니다. */ ::-webkit-search-cancel-button, ::-webkit-search-decoration ( -webkit-appearance: none; ) /** * 1. iOS 및 Safari에서 클릭 가능한 유형의 스타일을 지정할 수 없는 문제를 수정합니다. * 2. Safari에서 글꼴 속성을 '상속'으로 변경합니다. */ ::-webkit-file-upload-button ( -webkit-appearance: 버튼; /* 1 */ 글꼴: 상속; /* 2 */ ) /* 대화형 ============ ===================================================== =========== */ /* * IE 9-에서 올바른 표시를 추가합니다. * 1. Edge, IE 및 Firefox에서 올바른 디스플레이를 추가합니다. */ details, /* 1 */ menu ( display: block; ) /* * 모든 브라우저에서 올바른 표시를 추가합니다. */ summary ( display: list-item; ) /* 스크립팅 =================================== = ======================================= */ /** * IE 9에서 올바른 디스플레이 추가- . */ canvas ( display: inline-block; ) /** * IE에서 올바른 표시를 추가합니다. */ 템플릿 ( 표시: 없음; ) /* 숨김 ======================================= ==================================== */ /** * IE 10- 에서 올바른 디스플레이를 추가하십시오. */ ( 표시: 없음; )

범용 선택기를 통한 재설정 *(별표)

언뜻보기에 이것은 가장 간단하고 성공적인 솔루션처럼 보일 수 있습니다. 모든 HTML에 적용되기 때문에 * 선택기를 사용할 수 있는 경우 모든 HTML 요소를 설명하고 값을 할당하는 이유는 무엇입니까?

* ( 여백: 0; 패딩: 0; )

그러나 불행히도 이것은 좋은 습관이 아닙니다. 브라우저가 문서의 모든 요소, 특히 큰 웹 페이지의 모든 요소에 규칙을 적용하는 것은 매우 어렵고(다른 CSS 재설정에 비해 시간이 많이 소요되며) 많은 좋은 기본 스타일을 깨뜨릴 수도 있습니다.

스타일 및 WordPress 재설정

중 하나를 사용하려면 위의 방법들 WordPress 사이트의 CSS 스타일을 재설정하면 두 가지 방법으로 수행할 수 있습니다.

첫 번째는 재설정 코드를 WordPress 테마의 style.css 파일 맨 위에 복사해야 한다는 것입니다(저자 및 테마 이름에 대한 줄 뒤, 즉 분수와 별표로 둘러싸인 텍스트 뒤 /* … .

@import "reset.css";

CSS에 @import 지시문이 있는 경우 테이블의 맨 처음(모든 규칙 이전)에 있어야 합니다. 그렇지 않으면 브라우저가 이를 무시할 수 있습니다.

한편, 성능향상을 위해 CSS 테이블반대로 스타일은 일반적으로 하나의 파일로 결합됩니다. 따라서 실제 필요 없이 @import를 사용하는 것은 가치가 없습니다.

보시다시피 WordPress에서 스타일을 재설정하는 것은 특별한 것이 아닙니다.

감사

이 글을 작성하는 데 사용된 출처는 다음과 같습니다.

기본적으로 브라우저는 CSS의 일부 속성에 대해 자체 설정을 지정합니다. 그러나 여기서 문제는 많은 웹 브라우저가 있고 모든 사람이 자신의 규칙을 설정할 수 있다는 것입니다. 어떤 솔루션? CSS 설정을 기본값으로 재설정하고 자신의 설정으로 덮어쓰는 방법을 알아보세요. 그러나이 기사는 이것이 어떻게 수행 될 수 있는지에 전념 할 것입니다.

CSS 재설정 또는 기본값 재설정

CSS 재설정은 일부 매개변수를 재설정하는 스타일 세트입니다. 브라우저에서 설치기본. 각 웹 개발자는 이 파일을 개별적으로 작성하고 누군가는 기성품 솔루션을 사용합니다. 이것이 내가 시작할 것을 제안하는 곳입니다. 좋은 스타일 재설정 옵션이 많이 있지만 내가 가장 좋아하는 것은 Eric Meyer의 것입니다.

/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
라이선스: 없음(공개 도메인)
*/
html, 본문, div, 범위, 애플릿, 개체, iframe,
h1, h2, h3, h4, h5, h6, p, 인용구, 사전,
a, 약어, 약어, 주소, 큰, 인용, 코드,
del, dfn, em, img, ins, kbd, q, s, samp,
작, 스트라이크, 강한, 서브, sup, tt, var,
b, u, i, 센터,
dl, dt, dd, ol, ul, li,
필드 세트, 양식, 레이블, 범례,
테이블, 캡션, tbody, tfoot, thead, tr, th, td,
기사, 옆으로, 캔버스, 세부 정보, 포함,
그림, figcaption, 바닥글, 머리글, hgroup,
메뉴, 탐색, 출력, 루비, 섹션, 요약,
시간, 마크, 오디오, 비디오(
여백: 0;
패딩: 0;
테두리: 0;
글꼴 크기: 100%
글꼴: 상속;
수직 정렬: 기준선;
}
/* 이전 브라우저의 HTML5 표시 역할 재설정 */
기사, 옆으로, 세부, figcaption, 그림,
바닥글, 머리글, hgroup, 메뉴, 탐색, 섹션(
디스플레이:블록;
}
신체 (
라인 높이: 1;
}
올, 울(
목록 스타일: 없음;
}
큰따옴표, q (
따옴표: 없음;
}
blockquote:전, blockquote:후,
q:전, q:후(
콘텐츠: "";
내용: 없음;
}
테이블(
경계 접기: 접기;
테두리 간격: 0;
}

코드에 약간의 주석을 달겠습니다. 첫째, 필요한 모든 요소의 내부 및 외부 여백을 재설정합니다. 둘째, HTML5 요소에 대한 지원이 있습니다. 일부 버전의 브라우저에서 올바르게 표시되도록 허용하는 규칙이 있습니다. 셋째, 일반적인 설정 편리한 조작표 포함(셀과 이중 테두리 사이의 들여쓰기가 제거됨). 또한 목록에 대한 표준 마커와 인용에 대한 따옴표가 삭제되었습니다. 기본 스타일을 사용하려면 코드의 이러한 부분을 제거해야 합니다.

CSS 설정을 직접 재설정하는 방법

CSS를 어느 정도 정상적으로 소유하면 몇 가지 규칙을 직접 작성해 볼 수 있습니다. 예를 들어:

*{
여백: 0;
패딩: 0;
}

이것은 아마도 가장 간단한 명령. 이 경우 별표는 모든 선택기를 나타내므로 스타일이 웹 페이지의 모든 요소에 적용되어 여백과 패딩이 재설정됩니다. 놀랄 것입니다. 그러나 이러한 간단한 코드 줄은 많은 웹 브라우저에서 브라우저 간 호환성을 제공하기에 충분할 수 있습니다. 다른 모든 규칙은 마음대로 추가할 수 있습니다. 또한 모든 HTML5 태그에 display: block을 추가하는 것이 좋습니다.

CSS 재설정 규칙을 배치할 위치

여기 위에서 코드를 제공했지만 어디에 삽입해야 하나요? 여기에는 두 가지 옵션이 있습니다.

• 사이트의 기본 스타일 시트 맨 처음에 붙여넣습니다.
• 서버에 새 css 파일을 만들고 코드를 저장한 다음 저장하고 모든 페이지에 연결합니다. 전에기본 style.css 테이블.

CSS 스타일시트를 html에 연결하는 방법에 대한 자세한 내용은

제 생각에는 두 번째 옵션이 다운로드에 하나의 추가 파일을 추가하여 성능을 악화시키기 때문에 더 나쁩니다. 반면에 이러한 규칙을 더 쉽게 관리할 수 있습니다. 그러나 성능을 위해 첫 번째 옵션을 사용하는 것이 좋습니다.

설정 재설정은 사이트의 브라우저 간 호환성, 즉 다른 웹 브라우저에서 동일한 표시를 보장하기 위한 조치 중 하나입니다. 물론 이러한 조치가 모두 동일하게 보장되는 것은 아닙니다. 모습, 나머지는 이 블로그에서 앞으로 쓸 것입니다. 관심이 있다면 구독하십시오.

작성자:웹에서 웹사이트를 구축하는 것은 모래 위에서 구축하는 것과 같습니다. 브라우저는 동일한 작업을 수행하지만 때때로 예측할 수 없는 짜증나는 차이가 발생합니다. 예를 들어 모든 브라우저에는 "스타일 시트 사용자 에이전트'는 page1에 스타일을 지정하기 전에도 제목을 제목처럼 보이게 하는 기본 CSS 스타일의 집합입니다. 물론, 각 브라우저 엔진은 약간 다른 기본 세트를 사용합니다.

한 가지 예는 기본 목록 스타일로, 초기에 Internet Explorer와 Opera의 기본 브라우저 스타일 시트에는 목록 들여쓰기 margin-left: 30pt;가 있는 반면 Firefox와 KHTML은 padding-left: 40px;와 함께 제공되었습니다. ul(padding-left: 0;)을 정의하여 기본 패딩을 변경하려는 경우 브라우저에서 매우 다른 결과가 나타났습니다.

CSS 설정 재설정

약간의 안정성을 달성하기 위해 일부 개발자는 범용 선택기로 모든 여백과 패딩을 재설정합니다.

* (여백: 0, 패딩: 0;)

* ( 여백 : 0 ; 패딩 : 0 ; )

목록을 들여쓰고 거기에서 스타일시트를 시작하면 원하는 것을 얻을 수 있습니다. 그러나 *를 사용하면 모든 요소에 대해 기본 여백과 패딩이 "충돌"했고 양식 요소를 추가하자마자 정말 어려워졌습니다.

재설정의 목적은 할 수 있는 모든 것을 재설정하는 것입니다... [그리고] 자신의 기본 스타일을 위한 출발점 역할을 합니다.- 에릭 마이어

html, 본문, div, 스팬, 애플릿, 개체, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, 두문자어, 주소, 큰, 인용, 코드, del, dfn, em, img, ins, kbd, q, s, samp, 작은, 스트라이크, 강한, sub, sup, tt, var, b, u, i, 센터, dl, dt, dd, ol, ul, li, fieldset, 형식, 레이블, 범례, 표, 캡션, tbody, tfoot, thead, tr, 일, td, 기사, 옆으로, 캔버스, 세부 정보, 삽입, 그림, figcaption, 바닥글, 머리글, hgroup, 메뉴, 탐색, 출력, 루비, 섹션, 요약, 시간, 표시, 오디오, 비디오( 여백: 0; 패딩: 0; 테두리: 0; 글꼴 크기: 100%; 글꼴: 상속; 수직 정렬: 기준선; )

html , 바디 , div , 스팬 , 애플릿 , 객체 , iframe , h1 , h2 , h3 , h4 , h5 , h6 , p , 인용구 , 사전 , a , 약어 , 약어 , 주소 , 큰 , 인용 , 코드 , del , dfn , em , img , ins , kbd , q , s , samp , 스몰 , 스트라이크 , 스트롱 , 서브 , sup , tt , var , b , u , i , 중심 , dl, dt, dd, ol, ul, li, 필드 세트, 양식, 레이블, 범례, 테이블 , 캡션 , tbody , tfoot , thead , tr , th , td , 기사 , 옆 , 캔버스 , 세부 정보 , 포함 , 그림 , 그림 캡션 , 바닥글 , 머리글 , hgroup , 메뉴 , nav , 출력 , ruby ​​​​, 섹션 , 요약 , 시간 , 마크 , 오디오 , 비디오( 여백 : 0 패딩: 0 테두리: 0 글꼴 크기: 100%; 글꼴 : 상속 ; 수직 정렬: 기준선 ;

많은(전부는 아니지만) 요소의 일부 속성을 해당 일반 텍스트로 재설정합니다. 일치하는 요소만 재설정되므로 일부 문제 *(여백: 0, 패딩: 0;)를 피할 수 있습니다. 그런 다음 안정적인 크로스 브라우저 기반을 구축하고 있다는 사실을 알고 안전하게 이러한 삭제된 "스타일 지정되지 않은" 속성에 스타일을 지정할 수 있습니다. 이 스타일 지정은 이러한 요소에 대해 의식적으로 적절한 스타일을 설정해야 한다는 신호이기도 합니다.

CSS 재설정 문제

CSS 재설정은 실제 생명의 은인이었지만 이제는 특히 와이어프레임의 부상으로 인해 "있는 그대로" 사용되는 경우가 많습니다. 예를 들어 Eric은 다른 개발자가 자신이 제안한 재설정 스타일을 기반으로 사이트 구축을 시작하고 그에 따라 재정의할 것이라고 가정했으며 Meyer Reset의 첫 번째 버전에는 일시적으로 다음 규칙이 포함되었습니다.

/* 포커스 스타일을 정의하는 것을 잊지 마세요! */ :초점(윤곽선: 0; )

불행히도 모든 사람이 실제로 포커스 스타일을 정의한 것은 아니며 Eric은 두 번째 버전에서 이를 제거했습니다.

재설정을 적용하면 약간 변태 느낌이 듭니다. 브라우저 기본 스타일을 재설정하면 각 요소가 표시되는 방식에 대해 생각해야 하므로 요소가 기본 스타일이 아닌 의미론적으로 적용되도록 합니다. 그러나 i 및 em과 같은 요소에는 거의 항상 기본 브라우저 스타일이 있습니다. 한때 엄청나게 큰 제목 텍스트 크기와 같은 다른 기본 브라우저 스타일이 변경되어 기본적으로 상당히 허용됩니다. 문제는 "스타일이 지정되지 않은" 재설정 스타일만 할당된 제출 후 재설정 HTML 요소를 적용하려고 할 때 시작됩니다.

저에게 재설정의 가장 큰 문제는 브라우저 도구에서 스팸으로 이어지는 상속입니다. 다른 사람의 코드에서 깊이 중첩된 요소의 CSS 문제를 추적하려고 할 때 도움이 되지 않습니다.

상속으로 인해 반복되는 CSS 재설정 규칙

정규화.CSS

Nicholas Gallagher와 Jonathan Neal은 "HTML 요소의 기본 스타일에서 더 나은 브라우저 간 일관성을 보장하는 작은 CSS 파일"인 Normalize.css에 대해 다른 접근 방식을 취했습니다. CSS 재설정과 마찬가지로 이것은 우리에게 견고한 크로스 브라우저 시작점을 제공합니다. 주로 재설정의 주된 이유입니다. 그러나 두 가지 접근 방식은 철학적으로 다릅니다.

CSS 재설정은 사용자 에이전트 스타일을 재정의하고 많은 요소를 "스타일 지정되지 않은" 상태로 되돌려 안전하게 빌드할 수 있는 수준을 제공합니다. 그러나 그런 다음 대부분의 요소를 사용하여 빌드하기 전에 스타일을 지정해야 합니다. 대신 Normalize.css는 가장 적절한 기본 설정을 선택하여 사용자 에이전트 스타일 불일치를 해결합니다. 여기서 우리는 안전한 크로스 브라우저 기반도 얻을 수 있지만 표준화된 사용자 에이전트 스타일을 즉시 사용할 수 있는 기본 건축 자재로 포함합니다. 기본적으로 기본 CSS 2.1 스타일시트의 이상적인 크로스 브라우저 버전과 비슷합니다. 두 경우 모두 이미지를 생성하기 위해 자체 재정의 스타일을 추가해야 하지만 기본 브라우저 설정이 Normalize.css에 남아 있기 때문에 일반적으로 추가할 스타일이 적습니다.

Normalize.css의 변경 사항이 더 표적화되기 때문에 브라우저 기반 저작 도구에서 재작성된 규칙의 상속이 없습니다. 다음은 간단한 ul: Meyer Reset 및 Normalize.css 버전 1 및 2로 스타일이 지정되지 않은 것입니다.

정렬되지 않은 목록의 "스타일이 지정되지 않은" 요소

마이어 재설정 적용

Normalize.css v1 적용

Normalize.css v2 적용

Meyer Reset 예제는 여백, 패딩 또는 글머리 기호가 없는 몇 줄의 일반 텍스트로 나타나는 반면 Normalize.css 예제는 기본 스타일과 유사한 철학적 차이가 있습니다. 이 ul에 적용된 스타일링의 차이도 쉽게 눈에 띈다.

그러나 이것이 ul에 적용되는 모든 스타일은 아닙니다. 비교를 위해 Firefox 21 및 Opera Next 15에서 동일한 "스타일 지정되지 않은" 스크린샷이지만 사용자 에이전트 스타일이 표시됩니다.