Cascading Style Sheets에서 "Cascade"는 무엇을 의미합니까?

계단식 스타일 시트 또는 CSS는 동일한 요소에 영향을주는 많은 속성을 모두 가질 수 있도록 설정됩니다. 이러한 속성 중 일부는 서로 충돌 할 수 있습니다. 예를 들어, 단락 태그에 빨간색의 글꼴 색을 설정 한 다음 나중에 글꼴 색을 파란색으로 설정할 수 있습니다. 브라우저는 단락을 만들 색상을 어떻게 알 수 있습니까? 이것은 캐스케이드에 의해 결정됩니다.

스타일 시트 유형

스타일 시트에는 세 가지 유형이 있습니다.

  1. 작성자 스타일 시트
    1. 이들은 웹 페이지 작성자가 작성한 스타일 시트입니다. 그들은 CSS 스타일 시트를 생각할 때 대부분의 사람들이 생각하는 것입니다.
  2. 사용자 스타일 시트
    1. 사용자 스타일 시트는 웹 페이지 사용자가 설정합니다. 이를 통해 사용자는 페이지 표시 방법을보다 효과적으로 제어 할 수 있습니다.
  3. 사용자 에이전트 스타일 시트
    1. 이러한 스타일은 웹 브라우저가 해당 페이지를 표시하는 데 도움이되는 페이지에 적용되는 스타일입니다. 예를 들어, XHTML에서 대부분의 시각적 사용자 에이전트는 태그 를 기울임 꼴 텍스트로 표시합니다. 이것은 사용자 에이전트 스타일 시트에 정의되어 있습니다.

위의 각 스타일 시트에 정의 된 속성에는 가중치가 부여됩니다. 기본적으로 작성자 스타일 시트는 가장 많은 가중치를 가지며 사용자 스타일 시트가 이어지고 마지막으로 사용자 에이전트 스타일 시트가옵니다. 유일한 예외는 사용자 스타일 시트에 ! important 규칙이있는 것입니다. 이것은 저자의 스타일 시트보다 더 많은 무게를 가지고 있습니다.

계단식 주문

충돌을 해결하기 위해 웹 브라우저는 다음 정렬 순서를 사용하여 우선 순위와 사용되는 스타일을 결정합니다.

  1. 먼저 해당 요소와 할당 된 미디어 유형에 적용되는 모든 선언을 찾습니다.
  2. 그런 다음 어떤 스타일 시트가 나오는지 살펴보십시오. 위와 같이 작성자 스타일 시트가 먼저 나온 다음 사용자, 사용자 에이전트가옵니다. 중요한 사용자 스타일은 작성자의 중요한 스타일보다 우선 순위가 높습니다.
  3. 선택기가 더 구체적 일수록 우선 순위가 높아집니다. 예를 들어 "div.co p"의 스타일은 "p"태그의 스타일보다 우선 순위가 높습니다.
  4. 마지막으로, 정의 된 순서에 따라 규칙을 정렬하십시오. 나중에 문서 트리에 정의 된 규칙은 앞서 정의한 규칙보다 우선 순위가 높습니다. 가져온 스타일 시트의 규칙은 스타일 시트에서 규칙 앞에 직접 고려됩니다.