CSS의 스타일 우선순위 이해: CSS 스타일 우선순위 설명

이 글에서는 CSS 스타일 우선순위를 소개하고 CSS 스타일 우선순위에 대한 심층적인 이해를 제공합니다.

요소에 CSS 스타일을 적용하려고 했지만 효과가 없었던 상황에 처해본 적이 있나요? 페이지에서는 정의한 CSS를 무시하는 것 같지만 이유를 파악하지 못할 수도 있습니다. 아마도 그럴 것입니다! 중요하거나 최후의 수단으로 인라인 스타일을 추가하세요. 그러나 실제로 당신이 겪고 있는 문제는 아마도 CSS 우선순위 중 하나일 것입니다. (추천과정: css 동영상 튜토리얼)

어떤 CSS 스타일을 먼저 사용해야 하는지 잘 이해하면 CSS 코드 작성이 더 명확하고 체계적으로 이루어질 수 있으니 살펴보겠습니다. 주어진 HTML 요소를 제어하는 ​​CSS 규칙:

css 우선 순위 계산

cssinheritance

css Cascading #🎜🎜 #

이러한 규칙을 배우면 CSS 개발을 한 단계 더 발전시킬 수 있습니다.

우선순위 계산

html에 "생물" 유형이 적용된 단락이 포함되어 있다고 상상해 보세요. 다음 두 가지 CSS 규칙도 있습니다.

p { font-size ：12px }
p.bio { font-size ：14px }

단락의 텍스트 크기를 12px 또는 14px로 하시겠습니까? 이 경우 14px가 될 것이라고 추측할 수 있습니다. CSS의 두 번째 줄(p.bio)은 class="bio" 단락보다 더 구체적입니다. 그러나 때로는 우선순위를 확인하기가 쉽지 않습니다.

예를 들어 다음 html 및 css를 고려해보세요

<div id = “sidebar” >
<p class = “bio” >文字在这里</ p>
</ div>

div p.bio { font-size ：14px }
#sidebar p { font-size ：12px }

얼핏 보면 CSS의 첫 번째 줄이 더 구체적으로 보일 수 있지만 실제로 위의 두 번째 줄은 더 많은 단락입니다. -특정 글꼴 크기. 왜 그래?

이 질문에 답하려면 우선순위 규칙을 고려해야 합니다.

Specificity는 CSS의 다양한 구성 요소를 세어 (a, b, c, d) 형식으로 표현하여 계산됩니다. 예제를 보면 더 명확해지겠지만 먼저 구성 요소를 살펴보세요.

Element, 의사 요소: d = 1 - (0,0,0,1)

Class, 의사 클래스, 속성: c = 1 - (0, 0, 1,0)

Id: b = 1 - (0,1,0,0)

인라인 스타일: a = 1 - (1,0,0 , 0)

id는 요소보다는 클래스보다 더 구체적입니다.

위의 각각을 계산하고 a, b, c 또는 d에 1을 더하면 우선순위를 계산할 수 있습니다. 0,0,1,0이 0,0,0,15보다 더 구체적이라는 점에 유의하는 것도 중요합니다. 계산을 보다 명확하게 하기 위해 몇 가지 예를 살펴보겠습니다.

p: 요소 1개 - (0,0,0,1)

div: 요소 1개 - (0,0,0,1)

#🎜 🎜##sidebar: 1개의 ID - (0,1,0,0)

div #sidebar: 1개의 요소, 1개의 ID - (0,1,0,1)# 🎜🎜##🎜 🎜#div #sidebar p: 요소 2개, ID 1개 - (0,1,0,2)

div #sidebar p.bio: 요소 2개, 클래스 1개, ID 1개 - (0,1 ,1,2)

위의 예를 다시 살펴보겠습니다

div p.bio { font-size ：14px }  - （0,0,1,2）
#sidebar p { font-size ：12px }  - （0,1,0,1）

두 번째가 우선순위가 높으므로 우선순위를 지정하세요.

앞으로 나아가기 전 마지막 사항입니다. 그것을 사용할 때 중요성이 우선순위보다 우선합니다! CSS 속성을 중요하게 표시하면 우선순위 규칙을 무시하는 등

div p.bio { font-size ：14px ！important }    
#sidebar p { font-size ：12px }

은 위 CSS의 첫 번째 줄이 두 번째 줄이 아닌 두 번째 줄보다 우선한다는 의미입니다. ! 중요한 것은 규칙이 어떻게 작동하는지 이해한다면 절대 필요하지 않은 기본 규칙을 둘러싼 특수성입니다. 상속의 개념은 비교적 이해하기 쉽습니다. 요소는 상위 컨테이너로부터 스타일을 상속받습니다. body 태그가 color:red를 사용하도록 설정된 경우 달리 지정하지 않는 한 본문의 모든 요소 텍스트도 빨간색이 됩니다.

그러나 모든 CSS 속성이 상속되는 것은 아닙니다. 예를 들어 여백과 안쪽 여백은 상속되지 않는 속성입니다. div에 여백이나 패딩을 설정하면 div 내부의 단락은 div에 설정한 여백과 패딩을 상속하지 않습니다. 단락은 달리 선언할 때까지 기본 브라우저 여백과 패딩을 사용합니다.

그러나 상위 컨테이너에서 스타일을 상속하도록 속성을 명시적으로 설정할 수 있습니다. 예를 들어

p { margin ：inherit ; 填充：继承 }

을 선언하면 단락이 포함된 요소에서 상속됩니다.
Cascading

최고 수준에서 계단식은 모든 CSS 우선순위를 제어하고 다음과 같이 작동합니다.

1 관련 요소 및 속성에 적용되는 모든 CSS 선언을 찾습니다.

2. 원산지 및 중량별로 정렬합니다. Origin은 선언의 소스(작성자 스타일, 사용자 스타일, 브라우저 기본값)를 나타내고 가중치는 선언의 중요성을 나타냅니다. (작성자의 가중치가 기본값보다 큽니다.! important가 일반 선언보다 중요합니다.)

3. 계산 우선순위 4. 위 규칙 중 두 개 두 규칙이 동일하면 마지막 규칙이 승리합니다. html에 포함된 CSS는 html의 순서에 관계없이 항상 외부 스타일시트 뒤에 옵니다. 위의

#3번이 아마도 가장 주의하셔야 할 부분일 것입니다. #2에서는 규칙을 중요로 설정하지 않는 한 귀하의 스타일이 사용자가 브라우저를 설정하는 방법보다 우선한다는 점을 이해하십시오.

또한 귀하의 스타일이 브라우저 기본값을 재정의하지만 이러한 기본값이 존재하며 종종 브라우저 간 문제를 유발한다는 점을 인식하세요. Eric Meyer의 CSS Reset 또는 Yahoo의 YUI Reset CSS와 같은 재설정 파일을 사용하면 방정식에서 기본 스타일을 제거하는 데 도움이 됩니다.

요약

위 내용이 CSS 우선순위 문제를 명확히 하는 데 도움이 되기를 바랍니다. 대부분의 경우 스타일이 충돌하면 문제는 우선순위로 귀결됩니다. 일부 CSS를 선언하지 않았지만 요소가 부모 컨테이너나 브라우저의 기본 스타일에서 일부 CSS를 상속했을 수 있다고 예상하지 못한 방식으로 동작하는 경우도 있습니다.

CSS를 선언할 때 일반적인 경험 법칙은 요소의 스타일을 지정하기 위해 우선순위가 가장 낮은 속성을 선언하는 것입니다. 예를 들어 div#sidebar 대신 #sidebar를 사용하세요. 나는 이 일반 규칙을 내가 해야 할 것보다 훨씬 더 많이 어겼다는 것을 인정하지만, 최소한의 필수 우선 순위를 사용하면 보다 구체적인 스타일을 선언하여 스타일을 재정의하는 것이 더 쉬워질 것입니다.

가장 높은 우선순위를 사용하면 나중에 문제가 발생할 수 있으며 더 많은 우선순위를 추가하기 위해 불필요한 HTML을 추가해야 하거나 를 사용하지 않을 수도 있습니다! 중요하거나 스타일을 인라인으로 선언하세요. 가장 작은 우선순위부터 시작하고 필요할 때만 더 추가하세요.

위 내용은 CSS의 스타일 우선순위 이해: CSS 스타일 우선순위 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!