CSS를 상속하는 속성과 상속하지 않는 속성이 있다.
- 상속하는 속성은 자식 요소에 영향을 끼친다.
- 상속하지 않는 속성은 자식 요소에 영향을 끼지지 않는다.
| property | 상속 | property | 상속 |
|---|---|---|---|
| width/height | no | visibility | yes |
| margin | no | opacity | yes |
| padding | no | font | yes |
| border | no | color | yes |
| display | no | line-height | yes |
| background | no | text-align | yes |
| vertical-align | no | white-space | yes |
| text-decoration | no | ||
| position | no |
캐스캐이딩
💡 요소는 하나 이상의 CSS 선언에 영향을 받을 수 있다.
이것을 피하기 위해 캐스캐이딩이 필요!
중요도
CSS가 어디에 선언되었는지에 따라 우선순위가 달라진다.
- head 요소 내의 style 요소
- head 요소 내의 style 요소 내의 @Import
- 로 연결된 CSS 파일
- 로 연결된 CSS 파일 내의 @import 문
- 브라우저 디폴트 스타일시트
명시도
대상은 명확하게 특정할수록 명시도가 높아지고 우선순위가 높아진다.
💡 !import>인라인 스타일>아이디 선택자>클래스/어트리뷰트/가상 선택자 > 태그 선택자 > 전체 선택자 > 상위 요소에 의해 상속된 속성p { color: red !important; } // 1
#thing { color: blue; } // 2
div.food { color: chocolate; } // 3
.food { color: green; } // 4
div { color: orange; } // 5