Cascading 는 상속이라는 의미를 가지고 있다.
Cascading는 선택자에 적용된 많은 스타일중에 어떤 스타일로 브라우저에 표현할지 결정해주는 원리를 의미한다.
캐스케이딩은 스타일 우선순위와 스타일 상속 두가지 원칙을 따른다.
스타일을 적용할 우선순위는 3가지 개념에 따라 지정된다.
- 중요도
- 적용범위
- 소스순서
특별한 조건이 필요한 사용자가 그들의 필요에 맞게 구성해 놓은 스타일 시트이다.
예를 들어 저시력자들은 글자를 명확하기 위해 윈도우의 '고대비' 설정을 한다.
그러면 스타일 시스템에 저장이 된다. 이것이 사용자 스타일 시트이다.
웹페이지 개발자가 스타일 시트에 스타일을 만들때 속성값 뒤에 !important라고 적용한 스타일이다.
div {
color: blue !important;
}일반적인 스타일 시트에 적용하는 스타일들을 말한다.
각 브라우저들마다 기본적으로 지정하고 있는 스타일이다.
ex)크롬, 익스플로어, 파이어폭스 등 웹브라우저의 기본적인 지정 스타일
하나의 요소에 여러 스타일이 충돌할때 스타일 적용 범위가 좁을 수록 우선순위가 높아진다.
태그 안쪽에 style속성을 사용해 적용한 스타일이다.
<p style="color: orange">hi</p>#을 사용해 아이디 선택자를 사용한 속성
.을 사용해 클래스 선택자를 사용한 속성
태그를 사용해 적용한 스타일 속성
중요도와 적용범위가 같으면 나중에 나온 스타일이 먼저 나온 스타일을 덮어서 쓴다.
스타일 시트에서 별도로 스타일을 지정하지 않으면 부모요소에 있는 스타일 속성들이 자식요소로 자동으로 전달된다.
이것을 스타일 상속이라고 부른다.
- 각각 요소별로 스타일을 개별적으로 주는것이 아닌, 공통적으로 스타일을 한번에 줄 수 있다. 즉, 개발 시간이 단축된다.
- 복잡하고 거대한 사이트를 스타일개발할때 필요하다.
- 외부 스타일 시트를 사용할 수 있으므로 재사용에도 유용하다.
참고