모든 스타일 규칙들이, 다시 말하면 CSS가 어떤 방식으로 문서에 적용이 되는지를 정한 규칙
지금까지 배운 구체성도 캐스케이딩 규칙의 하나다.
구체성이 같은 두 가지 규칙이 동일한 요소에 적용이 된다면
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>form</title>
<style>
h1 {
color: gray;
color: brown;
}
</style>
</head>
<body>
<h1>Hello, CSS</h1>
</body>
</html>
cascading
폭포가 내려오는 모양처럼 단계적인
캐스케이드 규칙
1. 중요도(!important) & 출처
기본적으로 !important로 선언된 모든 규칙은 그렇지 않은 규칙보다 우선한다.
(CSS의) 출처는 제작자, 사용자, 사용자 에이전트(user agent)로 구분한다.
제작자: 실제 사이트 개발자가 작성한 CSS
사용자: 사이트를 방문하는 일반 사용자들이 작성한 CSS
사용자 에이전트(user agent): 일반 사용자의 환경, 브라우저에 내장된 CSS
우선 순위 (낮은 순)
5위 사용자 에이전트 스타일 (브라우저에서 기본적으로 제공하는 스타일)
4위 사용자 스타일 (일반 유저가 직접 CSS를 만들어서 본인 브라우저에 설정해놓은 것. 지금은 잘 사용되지 않고 지원하지 않는 브라우저가 많다. 그러므로 신경쓰지 않아도 되는 부분.)
3위 제작자 스타일 (사이트 제작자가 작성한 CSS. 대부분의 스타일 규칙들이 이 순위에 해당된다.)
2위 제작자 !important 스타일
1위 사용자 !important 스타일 (그래도 사용자 스타일은 잘 쓰지 않기 때문에 이 부분은 신경쓰지 않아도 된다.)
2. 구체성
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>form</title>
<style>
h1#gray {
color: gray;
}
h1 {
color: brown;
}
</style>
</head>
<body>
<h1 id="gray">Hello, CSS</h1>
</body>
</html>
3. 선언 순서
맨 앞에 나온 것
