CSS - Inheritance n Cascading

김석환·2020년 10월 22일
1

CSS

목록 보기
10/18
post-thumbnail

1. 상속

상속이란 상위요소에 적용된 속성을 하위요소가 물려 받는 것을 의미한다.
상속 기능이없다면 매번 요소의 속성을 각각 지정해야 한다.
하지만 모든 속성이 상속되지는 않는다.
visibility opacity font color line-height text-align white-space 등이 상속되는 속성들이다.
하지만 이 속성들도 button처럼 요소에 따라 상속 받지 않는 경우도 있다.
상속되지 않는 경우 inherit 키워드를 사용하여 명시적으로 상속받게 할 수 있다.

2.캐스캐이딩

요소는 여러 css선언에 영향을 받을 수 있다.
이때 충돌을 피하기 위해 css 적용 우선순위가 필요한데 이를 캐스케이딩 이라고 한다.

중요도 : css가 어디에 선언 되었는지에 따라서 우선순위가 달라진다.

명시도 : 대상을 명확하게 특정할수록 명시도가 높아지고 우선순위가 높아진다.

선언순서 : 선언된 순서에 따라 우선 순위가 적용된다.

2.1 중요도

css가 어디에 선언 되었는지에 따라서 우선순위가 달라진다.
1. head 요소 내의 style 요소
2. head 요소 내의 style 요소 내의 @import 문
3. <link> 로 연결된 css 파일
4. <link> 로 연결된 css 파일 내의 @import 문
5. 브라우저 디폴트 스타일시트

2.2 명시도

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

2.3 선언순서

선언된 순서에 따라 우선 순위가 적용된다.

0개의 댓글