CSS 적용 우선순위
출처 : http://div.or.kr/css-studying/CSS%20%EC%A0%81%EC%9A%A9%20%EC%9A%B0%EC%84%A0%EC%88%9C%EC%9C%84
개요
CSS의 특성상 중복되는 속성이 등장 할 수 있다.
이때 특정 원칙에 따라 CSS를 처리한다.
1. 속성값 뒤에 !important 를 붙인 속성
2. HTML에서 style을 직접 지정한 속성
3. #id 로 지정한 속성
4. .클래스, :추상클래스 로 지정한 속성
5. 태그이름 으로 지정한 속성
6. 상위 객체에 의해 상속된 속성
같은 우선 순위에 있는 경우, 쪽수가 많은 경우가 우선되며, 이마저 같은 경우 CSS에서 나중에 선언한 것이 우선되어 적용된다.
CSS에는 중복되는 속성 사용시 특정 순위에 따라 적용하는데, 이를 무시하고 절대적으로 우위에 가게 하고 싶다면 속성 값 뒤에 !important 를 사용하면 된다.
!important 는 우선순위 뿐만 아니라 디자이너-개발자간 교류에서 중요한 속성이라는 표현을 할 때 쓰이기도 한다.
예제
<html> <head> <style> .exbox1 { font-color:blue } #ex1 { font-color:skyblue } </style> </head> <body> <div class="exbox1" id="ex1">id로 지정된 속성이 먼저 적용됩니다.</div> <div class="exbox1" id="ex1" style="font-color:green">style 속성으로 지정된 속성이 먼저 적용됩니다.</div> </body> </html>
!important 사용법
.exbox2 { color:blue } #ex2{ color:black !important }
예제
<html> <head> <style> .exbox2 { color:black !important } #ex2{ color:blue } </style> </head> <body> <div class="exbox2" id="ex2">!important 때문에 색이 검정이 됩니다.</div> </body> </html>
내 추가 내용 :
!important; 와는 별개로 (important는 아래 우선순위보다도 우선함)
스타일 적용 우선 순위는 다음과 같습니다.
1. 기본적으로는 인라인 스타일 (태그 내 선언)> 내부 스타일(페이지 내 선언) > 외부 스타일(.css 파일로 선언)
2. 두가지가 똑같은 등급일때 (예) 같은 클래스를 두번 선언한 경우등) 가장 마지막(파일내에선 가장 아래)으로 적용한 것이 우선함.
2. 특정도(Specify)값 계산해서 가장 높은점수를 받은 것에 우선순위가 부여된다.
특정도 계산식
a. 인라인 스타일 1000점
b. ID선택자 : 100점
c. 클래스 선택자 : 10점 / 가상클래스(예:link) 역시 10점
d. 태그 선택자 1점 / 가상 엘리먼트 (예:first-line) 역시 태그 선택자로 1점
(참고 자료 : http://aboooks.tistory.com/120)
'Web > HTML5 / CSS3' 카테고리의 다른 글
| script 태그의 async와 defer 속성 (0) | 2016.02.12 |
|---|---|
| [web tool] slickgrid 명세서 (0) | 2015.04.16 |
| HTML select Tag (0) | 2015.04.13 |
| HTML 색상 코드 (0) | 2015.04.13 |