[CSS] Cascading Style Sheet

2021년 06월 28일, 22:45

HTML에 스타일이 적용되어야 하는데, 적용 과정에서 웹 브라우저, 사용자, 저자가 지정한 스타일에 대한 우선순위가 필요했고,
CSS는 아래와 같은 규칙을 기본으로 한다.(웹 브라우저 < 사용자 < 저자)

스타일에 따른 우선순위(저자)

  • CSS가 어디에 선언 되었는지(중요도)
  • 대상을 명확하게 지정할수록(명시도)
  • 코드 순서

  1. CSS의 선언 위치

     <head>의 <style>
 <head>의 <style> 내의 @import
 <link>로 연결된 css 파일
 <link>로 연결된 css 파일 내의 @import

  2. 명시도

    • !important
    • inline style
    • id selector
    • class / pseudo selector
    • tag selector
    • 상속된 스타일

  3. 코드 순서

    • 같은 우선순위인 경우 늦게 선언된 스타일이 우선 적용

Specificity

  • Specificity hierarchy
  • 여러가지의 명시가 혼합되어 있는 경우 우선순위
  • 계산 방법(w3shools 참고)
    • 0에서 부터 시작하고,
    • style - 1000
    • id - 100
    • class or pseudo class, attribute(ex. div[id=a]) - 10
    • tag, pseudo-element - 1

참고