계단식 스타일 시트 또는 CSS는 동일한 요소에 영향을주는 많은 속성을 모두 가질 수 있도록 설정됩니다. 이러한 속성 중 일부는 서로 충돌 할 수 있습니다. 예를 들어, 단락 태그에 빨간색의 글꼴 색을 설정 한 다음 나중에 글꼴 색을 파란색으로 설정할 수 있습니다. 브라우저는 단락을 만들 색상을 어떻게 알 수 있습니까? 이것은 캐스케이드에 의해 결정됩니다.
스타일 시트 유형
스타일 시트에는 세 가지 유형이 있습니다.
- 작성자 스타일 시트
- 이들은 웹 페이지 작성자가 작성한 스타일 시트입니다. 그들은 CSS 스타일 시트를 생각할 때 대부분의 사람들이 생각하는 것입니다.
- 사용자 스타일 시트
- 사용자 스타일 시트는 웹 페이지 사용자가 설정합니다. 이를 통해 사용자는 페이지 표시 방법을보다 효과적으로 제어 할 수 있습니다.
- 사용자 에이전트 스타일 시트
- 이러한 스타일은 웹 브라우저가 해당 페이지를 표시하는 데 도움이되는 페이지에 적용되는 스타일입니다. 예를 들어, XHTML에서 대부분의 시각적 사용자 에이전트는 태그 를 기울임 꼴 텍스트로 표시합니다. 이것은 사용자 에이전트 스타일 시트에 정의되어 있습니다.
위의 각 스타일 시트에 정의 된 속성에는 가중치가 부여됩니다. 기본적으로 작성자 스타일 시트는 가장 많은 가중치를 가지며 사용자 스타일 시트가 이어지고 마지막으로 사용자 에이전트 스타일 시트가옵니다. 유일한 예외는 사용자 스타일 시트에 ! important 규칙이있는 것입니다. 이것은 저자의 스타일 시트보다 더 많은 무게를 가지고 있습니다.
계단식 주문
충돌을 해결하기 위해 웹 브라우저는 다음 정렬 순서를 사용하여 우선 순위와 사용되는 스타일을 결정합니다.
- 먼저 해당 요소와 할당 된 미디어 유형에 적용되는 모든 선언을 찾습니다.
- 그런 다음 어떤 스타일 시트가 나오는지 살펴보십시오. 위와 같이 작성자 스타일 시트가 먼저 나온 다음 사용자, 사용자 에이전트가옵니다. 중요한 사용자 스타일은 작성자의 중요한 스타일보다 우선 순위가 높습니다.
- 선택기가 더 구체적 일수록 우선 순위가 높아집니다. 예를 들어 "div.co p"의 스타일은 "p"태그의 스타일보다 우선 순위가 높습니다.
- 마지막으로, 정의 된 순서에 따라 규칙을 정렬하십시오. 나중에 문서 트리에 정의 된 규칙은 앞서 정의한 규칙보다 우선 순위가 높습니다. 가져온 스타일 시트의 규칙은 스타일 시트에서 규칙 앞에 직접 고려됩니다.