CSS 재설정이란 무엇입니까? 어떤 동료는 "css 재설정"이라고 부르고, 어떤 동료는 "기본 CSS"라고 부르기도 하는데...
원문
을 읽으시면 CSS Reset에 대해 새롭게 이해하실 수 있을 것이라 믿습니다.
PS:
프로그램 코드
* {
패딩: 0;
여백: 0;
}
가장 일반적으로 사용되는 CSS Reset이지만 여기에는 문제점이 많습니다.
원본 기사의 첫 번째 부분에서는 Css와 각 브라우저의 CSS 규칙의 차이점에 대해 많이 설명합니다. "Css Reset"은 호환성과 통합을 위해 공식화되었습니다. "Css Reset"을 사용하면 시간과 비용을 절약할 수 있습니다. 어느 정도.
정리하고 요약해주신 Perishable님께 진심으로 감사드립니다.
다음은 CSS Reset의 여러 유형에 대해 간략하게 소개한 것입니다. 작성자의 능력이 제한되어 있어 일반적인 의미만 이해하실 수 있습니다.
최소한의 재설정 [버전 1]
프로그램 코드
이기도 합니다.
* {
패딩: 0;
여백: 0;
}
최소한의 재설정 [버전 2]
border:0의 디자인은 다소 신뢰할 수 없으며
프로그램 코드도
* {
패딩: 0;
여백: 0;
테두리: 0;
}
최소한의 재설정 [버전 3]
물론 이는
프로그램 코드의 일부 기본 스타일과 충돌하므로 권장되지 않습니다.
* {
개요: 0;
패딩: 0;
여백: 0;
테두리: 0;
}
응축된 범용 재설정
이는 작성자가 현재 선호하는 작성 방법으로, 비교적 일반적인 브라우저 스타일의 통일성을 보장합니다.
프로그램 코드
* {
수직 정렬: 기준선기준선;
글꼴 가중치: 상속;
글꼴 계열: 상속;
글꼴 스타일: 상속;
글꼴 크기: 100%;
테두리: 0 없음;
개요: 0;
패딩: 0;
여백: 0;
}
가난한 사람의 재설정
글꼴 크기와 이미지 링크의 테두리 처리를 재설정하는
프로그램 코드는
일부 사이트에서 종종 볼 수 있습니다.
HTML, 본문 {
패딩: 0;
여백: 0;
}
HTML {
글꼴 크기: 1em;
}
몸 {
글꼴 크기: 100%;
}
img, :link img, :visited img {
테두리: 0;
}
숀 인먼의 글로벌 리셋
저자는 Shaun이 이러한 유형의 Css Reset을 작성하는 데 특정 목적이 있으며 이러한 규칙은 IE, Firefox 및 기타
프로그램 코드와 같이 일반적으로 사용되는 일부 중요한 브라우저를 목표로 한다고 믿습니다.
본문, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre,
양식, 필드 세트, 입력, p, 인용구, 테이블, th, td, 포함, 객체 {
패딩: 0;
여백: 0;
}
테이블 {
국경 붕괴: 붕괴;
테두리 간격: 0;
}
필드셋, img, abbr {
테두리: 0;
}
주소, 캡션, 인용, 코드, dfn, em,
h1, h2, h3, h4, h5, h6, 강한, th, var {
글꼴 두께: 보통;
글꼴 스타일: 일반;
}
울 {
목록 스타일: 없음;
}
캡션, 일 {
텍스트 정렬: 왼쪽;
}
h1, h2, h3, h4, h5, h6 {
글꼴 크기: 1.0em;
}
q:이전, q:이후 {
콘텐츠: '';
}
에, 인 {
텍스트 장식: 없음;
}
야후 CSS 재설정
야후 직원들이 작성한 Reset
프로그램 코드를
추천할 수 있다고 생각합니다.
본문,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,
fieldset,input,textarea,p,blockquote,th,td {
패딩: 0;
여백: 0;
}
테이블 {
국경 붕괴: 붕괴;
테두리 간격: 0;
}
필드셋,img {
테두리: 0;
}
주소,캡션,인용,코드,dfn,em,strong,th,var {
글꼴 두께: 보통;
글꼴 스타일: 일반;
}
올, 울 {
목록 스타일: 없음;
}
캡션,번째 {
텍스트 정렬: 왼쪽;
}
h1,h2,h3,h4,h5,h6 {
글꼴 두께: 보통;
글꼴 크기: 100%;
}
q:이전,q:이후 {
콘텐츠:'';
}
약어, 약어 { 테두리: 0;
}
Erik Meyer의 CSS 재설정
저자는 Erik Meyer의 코드를 재배열했지만 기능은 여전히 동일합니다. 이 Css Reset 세트는 업계에서 가장 일반적으로 사용되는
프로그램 코드
입니다.
HTML, 본문, div, 범위, 애플릿, 개체, iframe, 테이블, 캡션, tbody, tfoot, thead, tr, th, td,
델, dfn, 여자 이름, 글꼴, img, ins, kbd, q, s, samp, 작은, 스트라이크, 강한, 보결, 저녁을 먹다, tt, var,
h1, h2, h3, h4, h5, h6, p, 인용구, 사전, a, 약어, 약어, 주소, 큰, 인용, 코드,
dl, dt, dd, ol, ul, li, 필드셋, 양식, 라벨, 범례 {
수직 정렬: 기준선기준선;
글꼴 계열: 상속;
글꼴 가중치: 상속;
글꼴 스타일: 상속;
글꼴 크기: 100%;
개요: 0;
패딩: 0;
여백: 0;
테두리: 0;
}
/* 포커스 스타일을 정의하는 것을 잊지 마세요! */
:집중하다 {
개요: 0;
}
몸 {
배경: 흰색;
줄 높이: 1;
색상: 검정색;
}
올, 울 {
목록 스타일: 없음;
}
/* 테이블에는 마크업에 여전히 cellpacing="0"이 필요합니다 */
테이블 {
국경 붕괴: 분리;
테두리 간격: 0;
}
캡션, 일, td {
글꼴 두께: 보통;
텍스트 정렬: 왼쪽;
}
/* <q> 및 <blockquote>에서 가능한 따옴표(")를 제거합니다. */
blockquote:이전, blockquote:이후, q:이전, q:이후 {
콘텐츠: "";
}
인용구, q {
따옴표 : "" "";
}
응축된 마이어 재설정
일반적으로 이는 Erik Meyer의 Css Reset
프로그램 코드를 수정하고 개선한 것입니다.
본문, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6,
pre, form, fieldset, 입력, 텍스트 영역, p, blockquote, th, td {
패딩: 0;
여백: 0;
}
필드셋, img {
테두리: 0;
}
테이블 {
국경 붕괴: 붕괴;
테두리 간격: 0;
}
올, 울 {
목록 스타일: 없음;
}
주소, 캡션, 인용, 코드, dfn, em, Strong, th, var {
글꼴 두께: 보통;
글꼴 스타일: 일반;
}
캡션, 일 {
텍스트 정렬: 왼쪽;
}
h1, h2, h3, h4, h5, h6 {
글꼴 두께: 보통;
글꼴 크기: 100%;
}
q:이전, q:이후 {
콘텐츠: '';
}
약어, 약어 {
테두리: 0;
}