[CSS] 케스케이딩

1. 케스케이딩이란?

: 스타일 시트에서는 우선순위가 위에서 아래로(계단식) 적용된다는 의미

: 스타일 규칙들이 어떠한 기준으로 요소에 적용되는지를 정한 규칙

 

2. 스타일 우선순위

: 스타일 규칙의 중요도와 적용 범위에 따라 우선순위가 결정되고, 그 우선순위에 따라 위에서 아래로 스타일을 적용한다.

 

얼마나 중요한가?

☝🏻 사용자(user)가 지정한 스타일
✌🏻 제작자(auther)가 지정한 스타일
🤟🏻  웹 브라우저(browser)가 기본으로 정해놓은 스타일

 

적용범위는 어디까지인가?

[1순위] !important: 어떤 스타일보다 우선 적용하는 스타일이다. ([ex] li {... !important;})
[2순위] 인라인 스타일: 태그 안에 style 속성을 사용해 해당 태그만 스타일을 적용한다. ([ex] <li style="color:green"></li>)
[3순위] id 스타일: 지정한 부분에만 적용되는 스타일이지만 한 문서에서 한 번만 적용할 수 있다. ([ex]  #id {...})
[4순위] class 스타일: 웹 문서에서 지정한 부분에만 적용되는 스타일로 한 문서에서 여러 번 적용할 수 있다. ([ex] . {...})
[5순위] type 스타일: 웹 문서에 사용한 특정 태그에 스타일을 똑같이 적용한다. ([ex] a {...})