CSS가 브라우저 기본 스타일을 처리하는 방법

php中世界最好的语言

풀어 주다： 2018-03-22 09:44:20

원래의

2355명이 탐색했습니다.

이번에는 CSS가 브라우저의 기본 스타일을 어떻게 처리하는지 보여드리겠습니다. CSS가 브라우저의 기본 스타일을 처리할 때 주의할 점은 무엇인가요? 다음은 실제 사례입니다.

찾았습니다최근에 웹페이지 형식을 조정하다가 웹페이지 하단에 항상 10픽셀 정도의 공간이 있는 것을 발견했습니다.

Chrome 브라우저의 리뷰 요소를 사용하여 전체 양식의 여백-바닥을 설정하는 사용자 에이전트 스타일시트가 있음을 발견했습니다. 1em;

인터넷 검색을 통해 다음과 같은 내용을 발견했습니다. 사용자 에이전트 스타일시트는 브라우저 스타일의 기본 설정 중 일부입니다. 이 기본 스타일이 만족스럽지 않은 경우 가장 간단한 해결책은 스타일 속성을 재설정하는 것입니다. 사용자 에이전트 스타일시트는 우선순위가 매우 낮고 덮어쓰게 되므로 스타일에 영향을 주지 않습니다.

margin-bottom

은 0px로 설정되어 있습니다.

사용자 에이전트 스타일시트 소개 브라우저마다 동일한 요소에 대한 기본 스타일이 다르기 때문에 CSS 시작 부분에 * {padding:0;marging:0}을 써야 합니다.

하지만 이제 그게 전부가 아닙니다. 기본적으로 서로 다른 커널을 사용하는 두 브라우저는 들여쓰기 크기, 글꼴 선택, 문자 스타일 등과 같은 특정 요소의 성능에 차이가 있습니다. 어쩌면 매우 아름다운 CSS 스타일 시트가 한 브라우저에서는 잘 작동하지만 CSS 버그가 없어도 다른 브라우저에서는 복잡해질 수도 있습니다. 내 생각엔 브라우저의 기본 스타일 때문인 것 같습니다.

따라서 CSS 스타일 규칙을 생성할 때 필요한 단계 중 하나는 브라우저의 기본 스타일을 재설정하는 것, 즉 브라우저의 기본 스타일을 덮어쓰는 것입니다. *{padding:0;margin:0}을 사용하는 것과 달리 모든 요소가 패딩과 여백에 차이가 있는 것은 아닙니다(Internet Xplorer와 Firefox에서 요소 목록과 순서 목록의 차이는 들여쓰기 여백 들여쓰기와 패딩 들여쓰기로 인해 발생합니다).

예를 들어 다음 단락은 다음과 같습니다.

Internet Explorer에서 이 코드에 사용되는 글꼴은 Times New Roman이고, Firefox 및 Opera에서는 시스템 기본 글꼴을 사용합니다. 따라서

에 대해 CSS에서 통일된 스타일을 설정해야 합니다.

그러나 *{padding:0;margin:0}을 사용하는 것처럼 단순히 전역 스타일을 설정하기 위해 와일드카드 "*"를 사용하면 양식 요소, 입력 요소, 텍스트 영역 등과 같은 명백한 문제가 발생합니다. 일부 브라우저에서는 재설정을 무시합니다. 더 중요한 것은 이러한 요소의 모양이 심각하게 손상되므로 해당 요소의 패딩 값과 여백 값을 하나씩 수동으로 재설정해야 한다는 것입니다. 따라서 단순히 "*" 사용을 포기하고 body, p, dl, dt, dd, ul, ol, li, h1, h2, h3, h4 ,h5,h6,pre와 같이 성능이 일관되지 않은 첫 번째 요소를 재설정해야 합니다. 등.

동시에 요소의 기본 스타일이 페이지 모양을 망칠 수 있습니다. 예를 들어, 요소는 텍스트를 굵게 만들고,

는 텍스트를 들여쓰며, 은 텍스트를 기울게 만듭니다. 페이지 텍스트가 일관된 모양을 갖도록 하려면 다음을 수행해야 합니다. 또한 CSS에서 이러한 요소의 모양을 변경합니다. 동시에 이러한 요소의 모양이 상위 요소와 동일해야 하는 경우도 있습니다. 상속을 직접 사용하여 상위 요소에서 상속할 수도 있습니다.

처리 방법어떤 요소를 재설정해야 하나요? Yahoo!는 우리를 위해 비교 요약을 만들었습니다. Yahoo의 제안에 따르면 이러한 규칙을 Reset.css라는 파일에 넣고 별도로 참조해야 합니다(권장됨).

html{color:#000;background:#FFF;} 
body,p,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form, 
fieldset,input,textarea,p,blockquote,th,td { 
margin:0; 
padding:0; 
} 
table { 
border-collapse:collapse; 
border-spacing:0; 
} 
fieldset,img { 
border:0; 
} 
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; 
}

로그인 후 복사

여러분이 해야 할 일은 간단히 이 규칙을 Reset.css에 저장한 다음 다음에서 사용하는 것입니다. 페이지. 이러한 요소에 새로운 스타일을 추가해야 하는 경우 다른 요소의 설정과 다르지 않습니다.

참고: 위의 Reset.css에 있는 Input, textarea, select{*font-size:100%;}는 Internet Explorer에서만 인식할 수 있습니다. 이 설정은 인터넷에서 양식 제어 글꼴의 크기를 조정할 수 있도록 하기 위한 것입니다. 탐색기 크기. 이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!