스타일상속
자식 요소, 하위 요소까지 영향을 미치는게 스타일 상속임.
1.상속되는 CSS 속성들
- 모두 글자/문자 관련 속성들임(*주의* 모든 글자/문자 속성이 상속이 되는건 아님, 역이 참이 되는건 아니다)
font-style : 글자 기울기
font-weight : 글자 두께
font-size : 글자 크기
line-height : 줄 높이
font-family : 폰트(서체)
color : 글자 색상
text-align : 정렬
...
그렇기 때문에 css 적용할 때 자식, 하위 요소까지 적용될 수 있다는걸 기억하고 css 작성/적용 해야함
2.강제 상속 : 상속이 되지 않는 css를 강제로 상속시키는 거
inherit 을 이용하여 강제상속
See the Pen 상속 by samuL (@samuL-the-styleful) on CodePen.
스타일 우선 순위
우선순위란, 같은 요소가 여러 선언의 대상이 된 경우, 어떤 선언의 css 속성을 우선 적용할지 결정하는 방법
계산법이 가장 중요!
- 점수가 높은 선언이 우선함
- 점수가 같으면 가장 마지막에 해석된 선언이 우선함
- 선언순서(코드가 해석된 순서)에 따라 구분한다고 부르기도 함
- 아래 처럼 css 우선순위 점수 계산을 명시도 라고 부름
- 인라인 선언 : 1000점
- ID 선택자 : 100점
- Class 선택자, 가상 클래스 선택자 : 10점(단, 부정 선택자는 가상 클래스 선택자이지만 해당 태그를 선택하지 않는다는 뜻이기 때문에 점수를 측정하지 않음)
- 태그 선택자, 가상 요소 선택자 : 1점(요소 ≒ 태그)
- 전체 선택자 : 0점
- 상속 : x(상속은 점수를 별도로 계산하지 않음)
- !important : 99999999999점(무한대)