[CSS] 상속과 캐스케이딩

상속

CSS는 부모 요소에 지정한 속성 값을 자식요소에게도 상속해서 적용한다.
부묘요소에게만 속성을 줬지만, 자식에게도 속성이 상속되어 자동으로 적용된다.

그러나 모든 속성이 상속되는 것은 아니다.

상속되는 속성, 상속 되지 않는 속성

 

상속이 여러개 겹쳤을 경우, Cascading이라는 룰이 그 우선순위를 결정한다.

 

캐스케이딩(Cascading)

수많은 스타일 요소 중 어떤 스타일을 브라우저에 그릴지 결정해주는 CSS 우선순위 적용 원리

1. 중요도 : CSS가 선언된 위치에 따라 우선순위가 결정됨
❗️브라우저 스타일 시트 < 사용자 스타일 시트 < 개발자 스타일 시트

• 사용자 스타일 시트 ? 사용자 폰트 지정, 고대비 모드 사용 등
• 개발자 스타일 시트 ? css를 이용하여 지정해주는 것

[중요도 정리]
1. 인라인 스타일 CSS
2. <style> 요소 안에 있는 CSS
3. <link>로 연결한 CSS 파일사용자 스타일 시트브라우저 스타일 시트

 

2. 구체성 (명시도) : 선택할 대상을 구체적으로 특정할수록 명시도가 높아진다.
명시도가 높으면 우선순위도 함께 높아진다.
부모에게 상속받은 속성 < 전체선택자 < 태그선택자 < 클래스 선택자/가상 선택자 < ID 선택자
강제로 명시도 끌어올리기 : ! important

 

3. 선언 순서 : 명시도가 동일한 여러개의 선언이 중첩되어 있을 경우 가장 나중에 선언한 스타일이 우선 적용