[중앙정보처리학원] CSS* 상속과 우선순위

상속(inherit)

 

• 상속이란 부모요소에 적용한 스타일이 후손요소들에게까지 영향을 주는 특성을 말한다.
• 모든 속성들이 상속되는 것이 아니다.
• 상속이 적용되는 속성들 

 

 

1. font 관련 속성: font-size, font-weight, font-style, line-height, font-family, color

2. text 관련 속성: text-align, text-indent, text-decoration, letter-spacing, opacity

 

 

 

 

예시 코드

<style>


body {
  font-size: 18px;
  font-family: '나눔고딕' sans-serif;
  color: darkgray;
  font-weight: 700;
}

.eco{
  width: 400px;
  height: 450px;  
  border: 3px solid red;
  color: blue;
  /* fz1.5e */
  font-size: 1.5em;
  letter-spacing: 5px;
}
/* 상속에서는 자식한테만 상속이된다 형제는 ㄴㄴ */

.animal {
  width: 200px;
  height: 200px;
  border: 3px solid orange;
  color: yellow;

}

.plant {
  width: 200px;
  height: 200px;
  border: 3px solid greenyellow;
  color: skyblue;
  font-style: italic;
}


.plant > div:nth-child(2) {
  font-weight: 700;
  color: red;
  font-weight: 300;
}

  </style>

 

그러니까 상속에 되면 자식요소들에 다 상속이 된다.

각각 스타일링이 필요하면 상속을 통해 전체설정하고 자식요소를 따로 설정해서 설정하는 식으로 하면 된다.

 

 

 

 

 

 

 

 

우선순위(명시도) 란?

각 속성에 따라 점수가 다르다. 그것에 따라 우선 적용이 된다.

 

!important  >   인라인   >   id  >   class  >   tag  >   hover, active, first-child..etc 

 

 

인라인은 상속점수가 무관하기 때문에 코드가 자칫 꼬일 수 있다. 사용하지 않는 것이 좋다.

최대한 조상을 많이 나열하고 id를 많이 나열해서 코딩하는 것이 유리하다.

 

 

 

예시 코드

<style>
    /* 1점 */
    div {

    /* 무한대점 보통 라이브러리에서 많이씀 !important 명령어 */
      color: blue 
    }

    /* 100점 */
    #c-y {
    color: yellow;

    }

    /* 10점  */
    .c-g {
    color: green;
    }



    /* 1점 */
    body{
      color: aqua;


    }

    /* 1점 */
    div {
      color: red;
    }
    

    /* 1점  */
    h1 {
      color: lightcoral;
    }

    
    /* 101점 */
    #aaa h1 {
      color: gray;
    }


    /* 11점 */
    .bbb h1 {
      color: orangered;

    }


    /* 100 + 1 + 10 + 1 = 112점  */
    #aaa div.bbb he {
      color: greenyellow;
    }


    /* 100 + 10 + 1 = 111점 */
    #aaa .bbb h1 {
      color: tomato;
    }


    /* 1 + 10 + 1 = 12    */
    div.bbb > h1 {
      color: violet;
    }