우선순위와 상속 / 초기화

우선순위

<div id="red" class="blue" style="color: yellow;">color</div>

div {
    color: black;
}

#red { 
    color: red;
}

.blue {
    color: blue;
}

* { 
    color: white;
}

body {
    color: turquoise;
}

결론은 인라인으로 style 속성을 추가한 yellow가 적용

 

이유는 CSS 명시도 점수에 따라 우선순위가 결정되기 때문이다

 

!important > inline 방식(1000점) > id(100점) > class(10점) > tag(1점) > *(0점) > 상속(-)

명시도 점수의 기준은 위와 같음

 

명시도 점수가 총합이 높은 경우가 먼저 적용되고, 점수가 같은 경우 뒤에 선언된 경우가 적용

 

(선택자들의 점수를 더함 - 내장방식과 링크 방식 둘 다 계산)

 

 

상속

<p>부모내용<bold>자식내용</bold></p>

p {
	color: red;
}

 

p태그에 적용한 스타일이 bold내의 내용에도 되어 글자색이 red로 출력(상속됨)

 

 

부모요소에 적용한 CSS가 자식요소에도 적용됨

(text를 다루는 속성들이 주로 상속됨 - color, font....)

(padding과 같은 속성들은 상속되지 않음)

 

상속이 적용 되지 않은 경우엔 강제 상속을 지정 

(position: inherit; - 자식요소 css에 적어줌)

 

 

초기화

body {
    margin: 0;
    padding: 0;
}

브라우저 별로 style 초기값이 다를 수 있으므로

css상단에 위와 같은 초기화가 필요

 

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css">

보통은 직접 초기화 코드를 작성하는 것이 아니라

reset.css라는 파일을 cdn방식으로 추가

(https://www.jsdelivr.com/package/npm/reset-css)