[HTML / CSS] CSS 상속 / 순서

• 상속

.div1의 스타일이 자식들에게 상속되었기 때문에 h1, p 의 별도의 설정 없이도 폰트가 파란색으로 설정된다.

 

상속되는 되는 태그와 속성에 따라 되거나 안되는 것들도 있다. 부모 태그에 설정한 margin이 모든 자식들에게도 적용되면 큰일날 수도 있다.

 

웬만하면 상속되는 몇 가지 속성들이다

1. color

2. font-family

3. font-size

4. font-weight

5. line-height

6. list-style

7. text-align

8. visibility

 

이 속성들도 항상 속성되는 것은 아니다. <a>태그는 color 속성이 상속되지 않는다. a href 또는 link로 받는 문구열은 하이퍼링크 처리되는데 디폴트값으로 blue속성을 갖고 있기 때문이다. 억지로라도 상속을 받아오기 위해서는 

해당 속성에 inherit 값을 쓰면된다.

.div2 a {
  color: inherit;
}

 

• 순서

h1 {
  color: blue;
  text-align: center;
}
 
h1 {
  color: green;
}

위와 같이 색깔 지정 후 완전 똑같은 선택자가 나오면, 이전에 나온 스타일을 덮어쓴다.

 

• 명시도

1. 인라인 스타일이 가장 우선 순위가 높습니다.
2. 선택자에 id가 많을 수록 우선 순위가 높습니다.
3. 선택자에 class, attribute, pseudo-class가 많을 수록 우선 순위가 높습니다.
4. 그 다음은 그냥 요소(또는 가상 요소)가 많은 순서입니다.

순서 점수 매기기