캐스케이딩 및 상속

캐스케이딩

스타일 정의는 저자, 사용자, 웹 브라우저의 세가지를 기본으로 정의됩니다.

• 저자: 저자는 HTML 문서 내부에 외부 스타일 시트를 연결할 수 있고 HTML 정의를 할 때 선언문을 사용할 수도 있습니다.
• 사용자: 사용자는 웹 브라우저의 기능을 사용하여 스타일을 지정할 수 있습니다.
• 웹 브라우저: 웹 브라우저는 기본 설정 스타일 시트를 가지고 있으며 스타일 정보가 새로 주어지지 않으면 기본 설정을 적용시킵니다.

서로 다르게 지정한 스타일 규칙들이 충돌할 경우를 대비하여 CSS 스펙에 어떻게 이러한 충돌을 해결하고 어떤 규칙을 먼저 적용할 것인지 정의하고 있습니다. 몇 가지 기준에따라 더 중요한 규칙이 결정됩니다. 규칙들이 서로 충돌할 경우에는 중요도가 가장 큰 규칙이 우선 적용됩니다.

우선권을 부여하는 기준은 아래와 같습니다:

1. "!important" 키워드

   선언문의 끝에 "!important" 라는 키워드를 추가할 경우, 규칙은 중요도를 부여받습니다. 타 규칙들이 동등한 중요도를 갖고 있지 않는한 우선 적용됩니다.

2. 출처

   저자의 규칙과 사용자의 규칙이 동등한 중요도를 가지고 있고, "!important" 라는 표시가 없으면 사용자의 규칙이 우선 적용됩니다. 저자의 규칙과 사용자의 규칙은 모두 웹 브라우저의 규칙보다 우선 적용됩니다.

3. 명확도

   더 명확한 규칙(선택자가 더 많은 규칙)일수록 덜 명확한 규칙에 우선합니다. 중요도 순서에서 명확도는 다음과 같은 사항에 영향을 받습니다: (1) 선택자에 얼마나 많은 ID 이름이 있는가, (2) 선택자에 얼마나 많은 클래스 이름이 있는가, (3) 선택자에 얼마나 많은 요소 이름이 있는가. 아래의 예는 낮은 중요도에서 높은 중요도 순서로 배열되어 있습니다.

       *         { color: black }
       p         { color: gray }
   div p         { color: yellow }
       p.foo     { color: green }
       p.foo.goo { color: blue }
   div p.foo.goo { color: fuscia }
       p#bob     { color: red }

   위의 규칙을 적용할 경우, 어떤 단락이 "foo" 와 "goo" 라는 클래스에 속해 있으며 동시에 "bob"이라는 ID 이름을 가지고 있다면 그 단락은 빨간색으로 나타납니다.

4. 순서두 개의 충돌하는 규칙들이 동일한 중요도를 가지고 있을 경우에는 스타일 시트의 마지막에 있는 규칙이 우선 적용됩니다. 하지만 외부 스타일 시트 규칙은 내부의 스타일 시트 규칙보다 앞에 있는 것으로 간주됩니다. 또한 스타일 선언문은 다른 모든 규칙보다 뒤에 있는 것으로 간주됩니다.