Cascading | Notion

Cascading 이란?

Cascading은 폭포처럼 위에서 아래로 쏟아지는 이라는 의미로 CSS의 우선순위가 위에서 아래로 적용된다는 의미
스타일 우선순위와 스타일 상속을 통해 스타일의 충돌을 방지

스타일 우선순위

어떤 스타일을 먼저 적용할 지 결정하는 규칙
중요도와 적용범위, 작성순서에 따라 정해지는 규칙
- 중요도 스타일의 중요도에 따라 적용되는 순서가 존재하며, 아래의 우선순위로 적용
  1. 사용자 스타일 Windows의 고대비 또는 다크모드 등
  2. 제작자 스타일 개발자가 작성한 스타일
  3. 브라우저 기본 스타일 브라우저가 특정 태그들에게 부여한 스타일
- 적용 범위 스타일의 적용 범위가 작을 수록 우선순위가 높아지며, 아래의 우선순위로 적용
  1. !important 최우선 적용되는 스타일
  2. 인라인 스타일 태그의 style 속성에 작성 하는 스타일
  3. id 스타일 태그의 특정 id 속성에 부여하는 스타일
  4. 클래스 스타일 태그의 특정 class 속성에 부여하는 스타일
  5. 타입 스타일 태그명으로 부여하는 스타일
```
<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		h1 {
			color: brown !important;
		}
		#id-style {
			color: black;
		}
		.cls-style {
			color: aqua;
		}
		h1 {
			color: blue;
		}
	</style>
</head>
<body>
	<h1 class="cls-style" id="id-style" style="color: violet">중요도</h1>
</body>
</html>
```
- 작성 순서 중요도와 적용 범위가 같다면 가장 마지막에 작성한 스타일이 적용
```
<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		h1 {
			color: brown;
		}
		h1 {
			color: blue;
		}
	</style>
</head>
<body>
	<h1>중요도</h1>
</body>
</html>
```

스타일 상속

부모태그의 스타일이 자식태그에도 적용

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
	</style>
</head>
<body>
	<div style="color: blue;">
		<h1>중요도</h1>
	</div>
</body>
</html>