CSS에서 "캐스 케이 딩"의 의미는 무엇입니까?

CSS에서 "Cascading"이라는 용어의 정확한 의미는 무엇입니까? 나는 다른 견해를 얻고 있으므로 여기서 묻습니다. 예가 도움이 될 것입니다.

이 문맥에서 "캐스 케이 딩"이란 하나 이상의 스타일 시트 선언이 특정 HTML 부분에 적용될 수 있기 때문에 어떤 특정 스타일 시트 규칙이 어떤 HTML 부분에 적용되는지 결정하는 알려진 방법이 있어야한다는 것을 의미합니다.

사용되는 규칙은보다 일반적인 선언에서 필요한 특정 규칙으로 계단식으로 선택됩니다. 가장 구체적인 선언이 선택됩니다.

CSS를 가르 칠 때 저는 항상 학생들에게 "계단식 스타일 시트"는 " 스타일 시트 와의 싸움 " 과 같은 의미 라고 말합니다.

한 규칙은 H3 태그를 빨간색으로 지정하고 다른 규칙은 녹색으로 지정합니다. 규칙이 서로 모순됩니다. 누가 이길까요!? 스타일 시트 데스 매치!

좋습니다. 약간 과장된 것일 수도 있지만, 계단식이나 상속이라는 개념보다 막 시작하는 비 코딩, 비 프로그래밍 사람들에게 훨씬 더 적합합니다.

물론 스타일 시트가 서로 싸우는 것이 문제가되지 않는다고 말해야합니다. 그것이 언어가 설계된 방식입니다.

Håkon Wium Lie (CSS 공동 제작자)는 CSS에 대한 PHD 논문에서 "캐스케이드"를 "여러 스타일 시트를 결합하고 이들 간의 충돌을 해결하는 과정"으로 정의합니다. https://www.wiumlie.no/2006/phd/

다음 기사는 귀하의 질문에 완벽하게 대답합니다.

특정 요소에 속성이 적용되는 순서입니다.

http://www.blooberry.com/indexdot/css/topics/cascade.htm

외부에서 생각해야합니다. 본문 태그에있는 규칙이 있으면 모든 하위 태그를 통해 "캐스케이드"됩니다. 본문 내부의 태그에 규칙을 넣으면 해당 규칙이 채택됩니다. 따라서 규칙은 포함 된 태그의 규칙에 의해 중단되지 않는 한 모든 콘텐츠를 통해 계단식으로 진행됩니다.

CSS 처리를 폭포수에 여러 개의 계단식이 포함 된 것처럼 처리 할 수 ​​있습니다. 다음은 위에서 아래로 순서대로 계단식 배열입니다. (낮은 값이 높은 값의 동일한 속성을 재정의 할 수 있습니다.)

1. 사용자 에이전트 선언
2. 사용자 일반 선언
3. 저자 일반 선언
4. 저자 중요 선언
5. 사용자 중요 선언

사양 에서 더보기

계단식는 여러 기원에서 적절한 값을 선택하는 것입니다. 하지만 정렬 과는 다릅니다 . 순서가 맞지 않는 것만 정렬하면됩니다. 그러나 CSS에서 이러한 출처는 고정 된 우선 순위를 갖습니다. 따라서 의사 코드는 다음과 같이 보일 수 있습니다.

1. 값 배열을 초기화하십시오.
2. 첫 번째 원점의 값을 적용하십시오.
3. 두 번째 원점의 값을 적용하고 값이 있으면 재정의합니다.
4. ...
5. N 번째 원점의 값을 적용하고 값이 있으면 재정의합니다.

의사 코드를 보면 여러 계단식 폭포처럼 보입니다.

도움이 될 수있는 한 가지 설명입니다. 두 개의 스타일 시트를 포함하고 각각에 동일한 특이성을 가진 규칙이있는 경우 마지막에 포함 된 것이 승리합니다. IE는 캐스케이드의 마지막이 가장 큰 영향을 미칩니다.

(이것은 동일한 시트에 두 가지 규칙이있는 것에 대한 변형 일뿐입니다. 다른 모든 것이 동일하면 마지막 규칙이 승리합니다.)

예 : 주어진

body {
    background:blue;
}

body {
    background:green;
}

그러면 배경이 녹색이됩니다.

이 답변은 완전 초보자를위한 것입니다. 이 답변에 대한 개요를 보려면 두 번째 답변을 읽으십시오.

캐스 케이 딩은 특정 요소에 둘 이상의 규칙이 적용될 때 서로 다른 스타일 시트를 결합하고 서로 다른 CSS 규칙과 선언 간의 충돌을 해결하는 프로세스입니다 . 글꼴 크기와 같은 특정 스타일 속성에 대한 선언을 이미 알고 있기 때문에 여러 스타일 시트에 나타날 수 있으며 단일 스타일 시트 내에 여러 번 나타날 수 있습니다.

계단식을 이해하려면 CSS 구문 분석 단계부터 시작해야합니다. 구문 분석 단계에서 첫 번째 단계는 충돌하는 CSS 선언을 해결하는 것이고 두 번째 단계는 최종 CSS 값을 처리하는 것입니다.

이제 CSS도 다른 소스에서 올 수 있습니다. 가장 일반적인 것은 개발자가 작성한 CSS입니다. 스타일 시트에 넣은 이러한 선언을 작성자 선언이라고합니다. 또 다른 소스는 사용자로부터 오는 CSS 인 사용자 선언 일 수 있습니다. 예를 들어, 사용자가 브라우저에서 기본 글꼴 크기를 변경하면 그것은 사용자 CSS이고 마지막으로 기본 브라우저 선언이 있습니다.

예를 들어 링크에 대한 HTML에 앵커 태그를 넣은 다음 스타일을 전혀 지정하지 않으면 일반적으로 파란색 텍스트로 렌더링되고 밑줄이 그어집니다. 브라우저에서 설정하기 때문에이를 사용자 에이전트 CSS라고합니다. 따라서 캐스케이드는 이러한 모든 소스에서 오는 CSS 선언을 결합하지만, 둘 이상의 규칙이 적용될 때 캐스케이드는 실제로 충돌을 어떻게 해결합니까?

글쎄, 그것이하는 일은 선택자 특이성에서 중요성을 살펴보고 충돌하는 선언 순서의 소스 순서를 확인하여 우선 순위를 결정하는 것입니다. 먼저 캐스케이드는 소스에서 선언 된 위치에 따라 중요도가 다른 충돌 선언을 제공하는 것으로 시작됩니다. 가장 중요한 선언은 중요한 키워드로 표시된 사용자 선언입니다.

두 번째로 중요한 선언은 중요로 표시된 저자 선언입니다. 셋째, 일반 작성자 선언, 일반 사용자 선언, 마지막으로 가장 중요하지 않은 선언은 기본 브라우저 선언입니다. 이는 실제로 브라우저에서 기본적으로 제공되는 이러한 선언을 쉽게 덮어 쓸 수 있다는 것을 의미합니다.

이제 우리는 중요한 키워드없이 저자 스타일 시트에 상충되는 규칙을 많이 가지고있을 것입니다. 이는 실제로 가장 일반적인 시나리오이며이 경우 모든 선언의 중요성은 동일합니다. 자,이 경우 어떻게 될까요? 이 경우 캐스케이드가하는 일은 선언 선택 자의 특이성을 계산하고 비교하는 것이며 이것이 작동하는 방식입니다.

인라인 스타일은 ID, 클래스, 의사 클래스 및 속성 선택자, 마지막으로 최소 특정 요소 및 의사 요소 선택자 순으로 가장 높은 특이성을 갖습니다. 따라서 지난 슬라이드에서 본 것과 동일한 중요도를 가진 충돌 선언이있을 때 방금 보여 드린 우선 순위를 기반으로 선택자 특이성을 계산하지만 작은 예를 통해 실제로 특이성을 계산하는 방법을 살펴 보겠습니다. 항상 가장 좋습니다.

위의 예에서 이러한 선언은 모두 작성자 선언이기 때문에 동일한 중요성을 갖습니다. 따라서 배경색이 파란색, 녹색, 자주색 또는 노란색인지 확인하기 위해 선택기 특이성을 계산해 보겠습니다. 이것이 우리가하는 방법입니다. 특이성은 실제로 하나의 숫자가 아니라 전에 보여 드린 네 가지 범주 각각에 대한 하나의 숫자입니다. 인라인 스타일, ID, 클래스, 의사 요소 및 속성, 마지막으로 요소 및 이들 각각에 대해 선택기에서 발생 횟수를 계산합니다.

그래서 여기 선택기 1에서는 인라인 스타일이 없습니다. 인라인 스타일은 HTML로 작성되어야하기 때문입니다. 여기에서는 그렇지 않습니다. 그래서 그것은 0입니다. 여기에도 ID가 없으므로 다시 0이지만 버튼 클래스라는 하나의 클래스가 있습니다. 그래서 클래스 카테고리의 경우 1이 있고 마지막으로 여기에 요소 선택기가 없으므로 해당 항목에 대한 0도 있습니다. 선택자 특이성은 0, 0, 1, 0입니다.

이제 다른 것과 비교해 봅시다. 다음 스타일도 인라인 스타일이 아니므로 첫 번째 스타일은 0입니다. 이제 여기에 실제로 내비게이션 ID에 대한 ID 선택기가 있으므로 ID에 대한 선택기가 있습니다. 우리는 또한 두 개의 클래스가 오른쪽으로 당겨지고 버튼이 있으므로 클래스 카테고리에 대해 두 개의 클래스가 있으며 마지막으로 여기에 두 개의 요소 선택기가 있습니다. nav 요소와 div 요소는 요소 범주에 대해서도 두 개임을 의미합니다. 그래서 마지막으로 선택자에 대한 특이성은 0, 1, 2, 2입니다. 이것은 실제로 매우 구체적인 선택자입니다.

세 번째 선택기는 매우 간단합니다. 요소 선택 기일 뿐이므로 특이성은 0, 0, 0, 1입니다.

이제 마지막 선택기 4 번입니다. 먼저 nav ID가 있으므로 ID 용입니다. 다음으로, 클래스, 버튼 클래스 및 가상 클래스 (hover)가있어 클래스 범주에 대해 총 2 개가됩니다. 요소 선택기도 하나 있기 때문에 최종 특이성은 0, 1, 2, 1입니다.

이제 어떤 선택자가 적용되는지 알아 내기 위해이 숫자를 실제로 어떻게 사용하는지 알아 봅시다. 가장 구체적인 범주 인 인라인 스타일부터 시작하여 왼쪽에서 오른쪽으로 숫자를 살펴보기 시작합니다. 인라인 스타일에 대한 선택기가있는 경우 가장 구체적인 범주이기 때문에 다른 모든 선택자보다 우선합니다. 음, 여기에서는 그렇지 않으므로 ID로 이동하겠습니다. 선택자 2와 4는 여기에 1 개가 있고 나머지는 0이므로 0이있는 선택자는 ID가있는 선택자 2와 4보다 덜 구체적이기 때문에 게임에서 벗어납니다.

이제 두 선택자 모두 ID 범주에 하나가 있으므로 계속해서 클래스를 확인해야합니다. 둘 다이 카테고리에서 2 개를 가지고 있으며, 마지막으로 요소 카테고리에서 2 개 선택자에는 2 개가 있고 선택자 4 개에는 1 개만 있으므로 여기에 승자가 있습니다. 두 번째 선택자는 가장 구체적인 선택자이므로 버튼에 녹색 배경이 표시됩니다 .34 승리 선언의 값은 계단식 결과이기 때문에 계단식 값이라고합니다.

따라서이 경우에 선언 된 값으로 시작하여 파란색, 녹색, 보라색, 노란색 중 하나가 이기고 계단식 값이됩니다.이 예에서는 녹색입니다.

이제 섹터 4에도 2 개의 요소가 있고 선택기 2와 4가 정확히 동일한 특이성을 갖는다 고 상상해보십시오. 그래서이 경우에 무슨 일이 일어나고 거의 끝났음을 약속드립니다. 이 시점에서 여전히 동점이 있다면 코드에 작성된 마지막 CSS 선언이 적용될 것입니다. 따라서 다시 모든 것이 동일하고 모든 선언 선택자가 동일한 특이성을 가지면 선택한 요소의 스타일을 지정하는 데 사용되는 마지막 선언 일뿐입니다.

스타일 시트 사양의 충돌을 해결하는 데 사용되는 프로세스입니다.

이것이 CSS의 우선 순위 언급에 따라 수행되는 충돌 해결 프로세스입니다.

CSS는 Cascading Style Sheet를 의미합니다. 본질적으로 스타일이 더 아래로 내려 가면 계단식 스타일 시트가 동일한 스타일을 더 높은 위로 덮어 씁니다 (위쪽 스타일이 더 구체적이지 않는 한). 따라서 모든 버전의 디자인에 적용 할 수있는 스타일 시트의 시작 부분에 기본 스타일을 설정 한 다음 문서에서 더 많은 미디어 쿼리로 관련 섹션을 재정의 할 수 있습니다.

계단식은 단계적으로 쏟아져 내리거나 단계적으로 추가하는 것을 의미합니다. 스타일 시트에는 html 요소의 스타일 지정을위한 코드가 포함되어 있습니다. 그리고 코드가 스타일 시트에 기록되는 방식은 계단식 방식입니다. 또는 간단히 스타일 시트에있는 html 페이지의 각 html 요소에 대한 레이어의 백투백 코드는 계단식 스타일 시트를 만듭니다.

캐스 케이 딩은 각 스타일 규칙에 가중치를 할당하는 알고리즘입니다. 여러 규칙이 적용되는 경우 가중치가 가장 큰 규칙이 우선합니다.

하나 이상의 스타일이 동일한 요소에 적용될 때 CSS는 적용된 두 스타일의 특이성의 강도를 평가하고 승자, 즉 더 많은 가중치가있는 스타일 규칙이이기는지를 결정하는 계단식이라는 일련의 규칙을 수행합니다. 동일한 가중치를 적용하면 마지막에 적용된 규칙이 승리합니다.

당신이 알아야 할 캐스케이드 및 특이성 :

1. ! important로 표시된 CSS 선언이 가장 높은 우선 순위를 갖습니다.

2. 그러나! important를 마지막 리소스로만 사용하십시오. 올바른 특수성을 사용하는 것이 좋습니다 . 유지 관리가 더 쉬운 코드입니다!

3. 인라인 스타일은 항상 외부 스타일 시트의 스타일보다 우선합니다.

4. 1 개의 ID가 포함 된 선택기는 1000 개의 클래스가있는 선택기보다 더 구체적입니다.

5. 1 개의 클래스를 포함하는 선택기는 1000 개의 요소가있는 선택자보다 더 구체적입니다.

6. 범용 선택자 *에는 특이성 값 (0,0,0)이 없습니다.

7. 선택 자의 순서보다 특이성에 더 의존합니다.

8. 그러나 제 3 자 스타일 시트를 사용할 때는 순서에 의존하십시오. 항상 작성자 스타일 시트를 마지막에 두십시오.

HTML 요소에 적용 할 CSS 스타일을 선택할 때 특정 성은 스타일 간의 충돌을 해결하는 일련의 계단식 규칙 에 따라 일반성을 재정의 합니다.

1. CSS가 없으면 브라우저의 기본 스타일에 따라 HTML이 표시됩니다.
2. CSS 태그 선택기 (HTML 태그와 일치)는 브라우저 기본값을 재정의합니다.
3. CSS 클래스 선택기 (. ​​포함)는 태그 참조를 재정의합니다.
4. CSS ID 선택기 (# 포함)는 클래스 참조를 재정의합니다.
5. HTML 태그로 코딩 된 인라인 CSS는 ID, 클래스 및 태그 CSS를 재정의합니다.
6. ! important 값을 CSS 스타일에 추가하면 다른 모든 것이 재정의됩니다.
7. CSS 선택자가 동일한 경우 브라우저는 해당 속성을 결합합니다. 결과 CSS 속성이 충돌하는 경우 브라우저는 코드에서 나중에 또는 가장 최근에 나타난 속성 값을 선택합니다.

태그, 클래스 및 / 또는 ID 의 보다 구체적인 조합 과 일치하는 CSS 선택기가 우선합니다. 다음 예제 중 첫 번째는 CSS에서 나타나는 순서에 관계없이 두 번째보다 우선합니다.

ol#identity li.firstname { color: red; }
#identity .firstname { color: blue; }

CSS doc    
p{font-size: 12pt;}
p{font-size: 14pt;}

<p>My Headline<p>

p는 실제 요소에 "가까워"14pt 글꼴로 렌더링됩니다 (파일 상단에서 파일 하단으로로드되는 외부 스타일 시트). 링크 된 스타일 시트를 사용 하고 외부 CSS 문서에 링크 한 후 문서 헤드에 일부 CSS를 포함 하면 정의 된 요소에 훨씬 더 가깝기 때문에 "in head"선언이 승리합니다. 이것은 동일한 가중치 선택자에만 해당됩니다. 주어진 선택기의 가중치에 대한 좋은 설명은 http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html 을 확인하십시오 .

즉, 모든 실용적인 목적을 위해 '상속'을 캐스케이드의 일부로 간주 할 수도 있습니다. 포함 된 요소에서 아래로 "계단식"됩니다.