CSS 상속
기본적으로 CSS는 부모 요소의 속성값을 자식 요소에게 상속한다.
상속되는 속성: color , font-family, font-size 등
상속되지 않는 속성: padding , margin, border 등
Cascading
수많은 스타일 요소 중 어떤 스타일을 브라우저에 그릴지 결정해주는 CSS 우선순위 적용 원리
CSS에서의 Cascading 기준
기준1. 중요도
기준2. 구체성(명시도)
기준3. 선언순서
기준1. 중요도
CSS가 선언된 위치에 따라 우선순위가 결정된다.
📍개발자 스타일 시트의 중요도
개발자 스타일 시트 안에서도 중요도 순위가 나뉨.
<link>로 연결한 css파일< <style>요소 안에 있는 CSS < 인라인 스타일 CSS
기준2. 구체성(명시도)
선택할 대상을 구체적으로 특정할 수록 명시도가 높아진다.
명시도가 높아지면 우선순위도 함께 높아진다.
📍명시도 강제 끌어올리는 방법
!important _라는 명령어를 이용하는 방법이 있음
해당 명령어는 모든 조건을 무시하고 강제로 명시도를 최상위로 끌어올려줌.
우선순위가 가장 낮았던 전체 선택자 속성값에 해당 명령어를 주게 되면, 전체 선택자의 속성이 적용됨.
하지만 높은 우선순위를 갖고 있는 만큼 주의를 기울여 사용해야 합니다. 자칫 잘못 사용하면 해당 소스코드 전체의 우선순위를 꼬아버릴 수 있기 때문.
* {
color: red!important;
}
기준3. 선언 순서
나중에 선언한 스타일이 우선 적용됨
