웹 문서에서 사용하는 여러 태그들은 서로 포함 관계가 있습니다. 포함하는 태그를 부모 요소, 포함된 태그를 자식 요소라고 합니다. 스타일 시트에서는 자식 요소에서 별도로 스타일을 지정하지 않으면 부모 요소에 있는 스타일 속성들이 자식요소로 전달되는데 이것을 '스타일 상속'이라고 합니다.
상속(inheritance)
상속을 이용하면 스타일 시트를 효과적으로 꾸밀 수 있습니다. 웹 문서의 모든
텍스트에 같은 글꼴을 사용하려면 각 요소마다 글꼴을 지정하지 않고
<body> 태그에 글꼴 스타일을 작성하면
<body> 태그 이하의 자식 요소에 같은 글꼴이 적용되기
때문입니다.
다만 주의 할 것은 스타일의 모든 속성이 상속되는 것이 아니라는 점입니다. CSS
속성은
상속하는 속성과
상속하지 않는 속성이 있습니다.
상속하는 속성
예를 들어 color는 상속하는 속성입니다. 부모 요소에서 정한 색이 자식 요소에도 적용됩니다.
<p>Lorem <em>Ipsum</em></p>
p {
color: blue;
}
Lorem 뿐만 아니라 Ipsum의 색도 파란색이 됩니다.
상속하지 않는 속성
예를 들어 padding은 상속하지 않는 속성입니다. 부모 요소에서 속성을 정의해도 자식 요소에 적용되지 않습니다.
<p>Lorem <em>Ipsum</em></p>
p {
color: blue;
}
p {
padding: 20px;
}
<p> 요소에만 안쪽 여백을 만들고
<em> 요소에는 안쪽 여백을 만들지 않습니다.
종합 예제
- color는 상속하는 속성이므로 자식 요소의 색도 주황색으로 만듭니다.
<button>처럼 상속을 받지 않는 요소도 있습니다.-
border와
padding은 상속하지 않는 속성이므로
<div>요소에만 적용됩니다.
<div class="abc">
<h1>Heading</h1>
<p>Paragraph <em>Emphasize</em></p>
<button>Button</button>
</div>
.abc {
color: orange;
border: 1px solid #bcbcbc;
padding: 10px 20px 20px 20px;
}
부모 요소로부터 스타일 상속했어도 모든 스타일을 해결할 수 있는 것은 아닙니다. 스타일끼리 충돌이 생길 경우 명시도나 소스 순서 등에 따라 우선 순위가 달라집니다.