우선순위

스타일시트는 첫번째 C는 캐스케이딩(cascading) 입니다. 이는 CSS의 값이 상속의 개념이 존재하며, 또한 그 우선순위도 있다는 것입니다.

Cascading 우선적용

CSS는 Cascading 스타일 시트로서 cascading이란 목포라는 의미 입니다. css 는 폭포와 같이 우선 순위에 맞에 우선적으로 적용되기 때문입니다.

스타일은 상속됩니다.

웹 문서에서 사용하는 HTML 태그들은 서로 포함 관계를 가지고 있습니다. 즉, 하나의 테그는 다른 테그를 감싸고 있는데, 상위 테그를 부모 요소라고 하고 하위 태그를 자식 요소라고 합니다.

이때, 상위 부모요소에 적용된 CSS 속성값은 자식요소에도 적용되는데, 이를 상속이라 합니다.

부모 요소로부터 자식 요소로 단계별로 스타일이 적용됩니다. 스타일이 계단식으로 적용된다른 의미로 캐스케이딩(cascading)이라는 단어가 붙게 된 것입니다.

상속이 되는 것과 안되는것

CSS의 속성이 자식요소로 상속되어 적용이 되지만, 적용이 되지 않는 것들도 있습니다.

예를 들어보면,
텍스트의 글자색은 상속이 되지만, 배경색등은 상속이 되지 않습니다.

왜 모든 속성이 상속되지 않는 것일까? 중복되는 속성값들은 굳이 모두 상속하여 적용할 필요가 없기 때문입니다.

단계별 스타일 적용

CSS를 작성하다 보면 동일한 요소에 서로 다른 값을 설정할 때도 있습니다.

  • 마지막 적용값이 최종값
    이런경우에는 제일 마지막에 작성한 규칙이 적용 됩니다.

  • 강제로 우선순위 높이기
    스타일 규칙을 작성하면서 !important를 추가하게 되면, 강제로 우선순위가 높아져서 적용이 됩니다.