CSS 스타일 상속

 

스타일 상속

 

/* css */

.color {
    color: blue;
}

<!-- html -->

<div class="color">색상
    <div class="blue">파랑</div>
    <div class="red">빨강</div>
</div>

부모(또는 조상)요소로부터 적용되는 스타일이 자식(또는 하위) 요소들까지 스타일이 영향을 받음

 

상속되는 CSS 속성 - 모두 글자/문자 관련 속성들! (모든 글자/문자 속성이 상속이 되지는 않음)

 

- font-style : 글자 기울기

- font-weight : 글자 두께

- font-size : 글자 크기

- line-height : 줄 높이

- font-family : 폰트(서체)

- color : 글자 색상

- text-align : 정렬

등등

 

강제 상속

 

실질적으로 상속이 되지 않는 css의 내용을 강제적으로 상속시킬 수 있는 방법

 

.color {
    color: blue
}

.blue {
    color: inherit;
}

Inherit(상속) - 부모 요소가 가지고 있는 특정한 속성의 값을 강제적으로 상속을 시킨다