[CSS] CSS 상속

 

CSS에서의 상속은 모든 속성이 상속되는 것이 아닌 주로 텍스트와 관련된 것들이 상속됩니다.

 

1. 텍스트 관련 속성 
   • color
   • font-family
   • font-size
   • font-weight
   • font-style
   • line-height
   • text-align
   • text-transform
2. 상속되지 않는 속성
   레이아웃이나 박스 모델과 관련된 속성들은 일반적으로 상속되지 않습니다
   
   • width, height
   • margin, padding
   • border
   • background
   • position
   • display
3. 예외 사항
   
   1. isibility와 opacity:
      visibility는 상속 가능, opacity는 상속 불가능
   2. list-style 관련 속성:
      list-style-type, list-style-position, list-style-image는 모두 상속 가능
      하지만 display: list-item은 상속 불가능
   3. 테이블 관련 속성:
      border-collapse와 border-spacing은 상속 가능
      하지만 border 자체는 상속 불가능
   4.  cursor:
      cursor 속성은 상속 가능
   5. vertical-align:
      인라인 요소에 적용될 때는 상속 불가능
      하지만 테이블 셀에 적용될 때는 상속 가능
   6. text-decoration:
      text-decoration-color, text-decoration-style, text-decoration-line은 상속 불가능
      하지만 이들의 효과는 자식 요소에 시각적으로 적용됩니다.
   7. overflow:
      overflow는 상속 불가능
      하지만 overflow-wrap은 상속 가능
4. 강제 상속
   상속되지 않는 속성도 inherit 키워드를 사용하여 강제로 상속시킬 수 있습니다

<style>
/* 부모 요소 */
.parent {
  border: 2px solid black;
  padding: 20px;
  background-color: #f0f0f0;
}

/* 자식 요소 */
.child {
  /* 아래 세 속성은 일반적으로 상속되지 않지만, 
     inherit을 사용하여 부모로부터 상속받습니다. */
  border: inherit;
  padding: inherit;
  background-color: inherit;
}
</style>

 

    5. universal ( * ) 셀렉터

       여기서 설정한 속성은 모든 요소에 적용되나 상속이 되지 않는다