본문 바로가기

개발 스터디/css

스타일의 상속과 적용 우선순위

1. 상속

상위 요소에 적용된 프로퍼티 하위가 물려받는 것

프로퍼티 중 상속이 되는 것 : visibility, opacity, font, color, line-height, text-align, white-space,

 

자식 요소의 특정 프로퍼티에 : inherit 키워드를 사용해 명시적으로 상속 받기 가능

 

2. 캐스캐이딩 

하나 이상의 css 선언에 영향>우선순위 필요>캐스캐이딩

중요도, 명시도, 선언 순서

 

2.1 중요도

1. head 요소 내의 style 요소

2. head 요소 내의 style 요소 내 @import문

3. link로 연결된 css 파일

4. link로 연결된 css 파일 내의 @import문

5. 브라우저 디폴트 스타일 시트

 

2.2 명시도

대상을 명확하게 특정할수록 명시도 높아지고 우선순위 높아짐

!important > 인라인 스타일 > 아이디 선택자 > 클래스/어트리뷰트/가상 선택자 > 태그 선택자 > 전체 선택자 > 상위 요소에 의해 상속된 속성

2.3 선언 순서

선언된 순서에 따라>나중에 선언된 스타일 우선적용

'개발 스터디 > css' 카테고리의 다른 글

12. 그림자  (0) 2023.07.30
벤더 프리픽스  (0) 2023.07.30
요소 정렬  (0) 2023.07.25
요소의 위치 정의  (0) 2023.07.24
폰트와 텍스트  (0) 2023.07.21