자식요소들은 부모요소들의 스타일을 상속받기도 한다!
상속되는 CSS 속성들 :
font-style
font-weight(굴자 두께)
font-size
line-height(페이지가 노트와 같다 할 때 노트 한줄한줄의 세로 간격을 의미한다.)
font-family(폰트(서체))
color
text-align(글자 정렬)
글자와 문자 관련 속성들만이 상속되지만 모든 글자/문자 속성이 상속되는 것은 아니다.
강제 상속:
ex.
.parent {
width: 300px;
height: 400px;
background-color: red;
}
.child {
width: 100px;
height: inherit;
background-color: orange;
}
height를 늘 부모와 같게 하고 싶으면 이렇게 inherit 키워드를 이용해 강제 상속을 할 수 있다.
inherit 키워드는 background-color에도 사용가능하다.
ex.
.parent {
width: 300px;
height: 400px;
background-color: red;
}
.child {
width: 100px;
height: inherit;
background-color: inherit;
position: fixed;
/* (뷰포트 기준)위에서 100 픽셀 */
top: 100px;
/* (뷰포트 기준)오른쪽에서 10픽셀 */
right: 10px;
}