[HTML, CSS] CSS의 상속과 우선순위

CSS의 상속 

 

개념
상위에서 설정된 스타일을 하위에서도 사용한다. 여러 단계로 중첩된 엘리먼트마다 같은 색상과 글자 크기를 부여하지 않아도 되기 때문에 재사용 측면에서 좋다.

 

box-model이라고 불리는 속성(width, height, margin, padding, border)과 같이 크기와 배치 관련된 속성들은 상속이 되지 않는다.

 

css의 우선순위

css는 여러가지 스타일 정보를 기반으로 최종적으로 경쟁에 의해서 적절한 스타일이 반영된다.

같은 속성을 넣었을 때 inline이 먼저 적용되고, internal과 external은 우선순위가 같다.
id → class → 엘리먼트 순으로 우선순위를 가진다. (cascading 캐스캐이딩)

 

선언방식에 따른 우선순위
같은 선택자(selector)라면 나중에 선언한 것이 반영된다.
선택자의 표현이 구체적인 것이 있다면 먼저 적용된다.  (ex. body > span )

 

google  css specificity 참고하기

 

 

 

참고 : boostcourse  https://www.boostcourse.org/web316/lecture/254261/?isDesc=false

웹 프로그래밍(풀스택)

 

 

boostcourse    https://www.boostcourse.org/web316/lecture/254262/?isDesc=false

웹 프로그래밍(풀스택)