계단식 스타일 시트의 캐스케이드가 의미하는 바를 배우십시오.

CSS 단기 코스

캐스케이드는 CSS 스타일 시트를 매우 유용하게 만듭니다. 즉, 캐스케이드는 충돌하는 스타일을 적용하는 방법의 우선 순위를 정의합니다. 즉, 두 가지 스타일이있는 경우 :

p {color : red; }
p {color : blue; }

계단식은 스타일 시트에 빨간색과 파란색으로 표시되어야한다고 명시되어 있어도 단락이 있어야하는 색상을 결정합니다. 궁극적으로 하나의 색상 만 단락에 적용될 수 있으므로 순서가 있어야합니다.

그리고이 순서는 어떤 선택자 (위의 예에서 p)가 가장 높은 우선 순위를 갖고 문서에서 어떤 순서로 나타나는 지에 의해 적용됩니다.

다음 목록은 브라우저가 스타일에 대한 우선 순위를 결정하는 방법을 단순화 한 것입니다.

  1. 스타일 시트에서 요소와 일치하는 선택기를 찾습니다. 정의 된 스타일이 없으면 브라우저에서 기본 규칙을 사용하십시오
  2. 스타일 시트에서! important로 표시된 선택자를 찾아 적절한 요소에 적용하십시오.
  3. 스타일 시트의 모든 스타일은 기본 브라우저 스타일을 덮어 씁니다 (사용자 스타일 시트의 경우 제외).
  4. 스타일 선택기가 구체적 일수록 우선 순위가 높아집니다. 예를 들어 div> p.class는 p.class보다 더 구체적이며 p보다 더 구체적입니다.
  5. 마지막으로 두 규칙이 동일한 요소에 적용되고 동일한 선택기 우선 순위를 갖는 경우 마지막 으로로드 된 규칙이 적용됩니다. 즉, 스타일 시트는 위에서 아래로 읽히고 스타일은 서로 위에 적용됩니다.

위의 예에서 이러한 규칙에 따라 단락은 파란색으로 표시됩니다. p {color : blue; } 스타일 시트의 마지막에옵니다.

이것은 캐스케이드에 대한 매우 단순화 된 설명입니다. 캐스케이드 작동 방식에 대해 더 알고 싶다면 캐스케이드 스타일 시트에서 "캐스케이드"란 무엇을 의미합니까? .