CSS 계단식 메커니즘에 대한 자세한 설명-CSS 튜토리얼-php.cn

CSS 계단식 메커니즘에 대한 자세한 설명

高洛峰

풀어 주다： 2017-03-27 18:26:26

원래의

2026명이 탐색했습니다.

CSS(Cascading Style Sheet)

Cascading Style Sheets의 계단식은 스타일이 문서 구조의 한 수준에서 다른 수준으로 전달됨을 의미하며, 그 역할은 브라우저가 여러 소스에서 무엇을 사용할지 결정하도록 하는 것입니다. . 라벨 소스의 스타일 속성을 적용합니다.

캐스케이딩은 강력한 메커니즘입니다. 캐스케이드를 이해하면 가장 경제적이고 유지 관리가 쉬운 방식으로 CSS를 작성하고 원하는 이상적인 문서 모양을 만드는 데 도움이 될 수 있습니다.

스타일 소스

우선 브라우저에 브라우저 스타일 시트(기본 스타일 시트)가 숨겨져 있어야 합니다. 모든 태그에는 아무것도 쓰지 않고도 스타일이 있기 때문입니다. 예를 들어, h1 태그의 텍스트는 더 큰 볼드체로 표시되고, em 태그의 텍스트는 이탤릭체로 표시되며, 모든 것이 자동으로 추가됩니다.

두 번째로 사용자 스타일 시트가 있습니다. 매우 드물지만 매우 편리함을 제공할 수 있습니다. 예를 들어 시각 장애가 있는 사용자는 텍스트 자체의 기본 크기를 늘리거나(예: 본문 { 글꼴 크기:200%}) 텍스트가 서로 상대적으로 읽기 쉬운 색상으로 표시되도록 할 수 있습니다. Windows의 내게 필요한 옵션 기능으로 스타일 시트를 추가할 수 있습니다.

마지막으로 디자이너 스타일시트가 있습니다. 웹 개발자가 작성한 것입니다.

브라우저가 스타일 소스를 처리하는 순서:

기본 브라우저 스타일시트

사용자 스타일시트

디자이너 스타일시트

디자이너 내장 스타일

디자이너 인라인 스타일

브라우저는 위 순서대로 해당 위치의 스타일을 검색할 때, 특정 태그에 정의된 속성값을 만나면 해당 태그에 대한 설정을 합니다. 라벨이 업데이트됩니다. 브라우저는 기본 스타일 시트에서 레이블 스타일을 정의합니다. 스타일이 다른 곳에서도 레이블에 대해 정의된 경우 브라우저는 문서에 정의된 값으로 설정을 업데이트합니다.

스태킹의 기본 작동 원리는 다음과 같습니다.

계단식 규칙

규칙 1: 각 요소에 적용되는 좋은 속성의 선언을 모두 찾습니다.

규칙 2: 순서와 중요도에 따라 정렬합니다. 브라우저는 다섯 가지 스타일 소스를 순서대로 확인하고 일치하는 속성을 설정합니다. 이후 원본이 일치하는 속성을 다시 설정하면 브라우저는 필요한 경우 속성 값을 업데이트하고 프로세스를 반복합니다.

규칙 3: 관련성에 따라 정렬합니다. 판단하기 어려운 상황에서는(예: 두 개의 규칙이 동일한 태그와 일치하고 동일한 스타일 소스에서 나온 경우) 적절성에 따라 규칙의 승자가 결정될 수 있습니다.

예 1: 스타일 시트에는

P {font-size:12px;}

p.largetext {font-size:16px }

그러면

약간의 텍스트

에 있는 텍스트가 16픽셀 높이로 나타납니다. 후자가 더 표적화되어 있기 때문입니다.

P {font-size:12px;}

.largetext {font-size:16px; }

두 규칙 모두 동일한 태그와 일치하지만 클래스 때문에 선택기가 우선 적용되므로 텍스트가 16픽셀로 표시됩니다. 구체적인 이유는 라벨 선택기의 수치 타겟팅이 1인 반면, 클래스 선택기의 타겟팅은 1-0이기 때문입니다. 선택기의 타겟팅을 어떻게 계산하는지에 문제가 있습니다. 각 스타일마다 간단한 채점 방식이 적용됩니다. 점수는

A – B – C 3가지 값으로 표시됩니다. 채점 방법은 다음과 같습니다.

1. 선택자에 ID가 있는 경우 A에 1을 추가해야 합니다.

2. 선택자에 클래스가 있는 경우 B에 1을 추가해야 합니다.

3. 선택자에 요소명(태그명)이 있는 경우 C에 1을 추가해야 합니다.

4. 최종 결과는 3자리 인증서를 기준으로 계산됩니다. (결과는 실제 세 자리 숫자는 아니지만 대부분의 경우 세 자리 숫자로 해석하기가 더 쉽습니다. 예를 들어 0-1-12 및 0-2-1과 비교하면 후자는 보다 구체적인 성적)

다음 예시 세트를 살펴보세요.

P 0 – 0 – 1 타겟 = 1 >

p#largetext 1 – 0 – 1 타겟=101

body p#largetext 1 – 0 – 2 Targeted=102

body p#largetext ul.mylist 1 – 1 – 3 Targeted=113

body p#largetext mylist li. 1 – 1 – 4 대상=114

규칙 4: 순서대로 정렬합니다. 두 규칙의 가중치가 정확히 동일한 경우 누적 순서에서 가장 낮은 규칙이 우선 적용됩니다.