HTML
<body>
<div class="foods">
<div class="ramen">1</div>
<div class="chicken">2</div>
<div class="pizza">3</div>
</div>
</body>CSS
.foods {
color: red;
}
하위 클래스들은 상위 클래스의 글자/문자 관련 속성을 상속받는다
상속되는 CSS속성들
- font-style: 글자 기울기
- font-weight: 글자 두께
- font-size: 글자 크기
- line-height: 줄 높이
- font-family: 폰트(서체)
- color: 글자 색상
- text-align: 정렬
...width,height..는 상속되지 않는다
강제 상속
상속이 되지 않는 CSS 내용도 강제로 상속 시킬 수 있다
HTML
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>CSS
.parent {
width: 300px;
height: 200px;
background-color: orange;
}
.child {
background-color: green;
width: 100px;
height: inherit;
}
inherit속성은 상속의 의미로 자식 요소에서 특별히 속성을 지정하지 않은 경우, 부모 요소의 속성을 물려 받는걸을 의미한다
=>부모 요소에 font-size,color(문자 관련 속성)은 자동으로inherit된다
