CSS
계승

통사론

• 속성 : 상속;

자동 상속

상속 요소의 일부 속성에 대한 계산 된 값이 해당 하위 요소에 적용되는 CSS의 기본 메커니즘입니다. 이 기능은 마크 업의 모든 요소에 해당 속성을 설정하지 않고 요소에 전역 스타일을 설정하려는 경우 특히 유용합니다.

자동으로 상속되는 공통 속성은 font , color , text-align , line-height 입니다.

다음 스타일 시트를 가정 해보십시오.

#myContainer {
  color: red;
  padding: 5px;
}

이렇게하면 <div> 요소뿐만 아니라 <h3> 및 <p> 요소에도 color: red 이 적용됩니다. 그러나 padding 의 특성으로 인해 해당 값은 해당 요소에 상속 되지 않습니다 .

<div id="myContainer">
  <h3>Some header</h3>
  <p>Some paragraph</p>
</div>

시행 된 상속

일부 속성은 요소에서 자식 요소까지 자동으로 상속되지 않습니다. 이는 일반적으로 해당 속성이 속성이 적용되는 요소 (또는 요소 선택)에 고유해야하기 때문입니다. 그러한 속성으로는 margin , padding , background , display 등이 있습니다.

그러나 때로는 상속이 바람직합니다. 이를 위해 inherit 된 속성에 inherit 값을 적용 할 수 있습니다. inherit 값은 어떤 CSS 속성 및 HTML 요소에 appied 할 수 있습니다.

다음 스타일 시트를 가정 해보십시오.

#myContainer {
  color: red;
  padding: 5px;
}
#myContainer p {
  padding: inherit;
}

이렇게하면 color 속성의 상속 특성으로 인해 <h3> 와 <p> 요소 모두에 color: red 가 적용됩니다. 그러나 <p> 요소는 지정되었으므로 '부모로부터 padding 값을 상속합니다.

<div id="myContainer">
  <h3>Some header</h3>
  <p>Some paragraph</p>
</div>