상속과 우선순위

HYEONYI JU·2021년 2월 2일
HTML과CSS

HTML&CSS

목록 보기
14/14
post-thumbnail

상속

  • 모든 CSS 프로퍼티가 상속되는 것은 아니다. ex)width, height, margin, padding, display

  • https://www.w3.org/TR/CSS21/propidx 에서 확인 가능

  • 상속이 되지 않는 프로퍼티를 상속받지를 원한다면 inherit를 써주면 됨. ex)margin:inherit;

우선순위

규칙

  1. 중요도: CSS가 어디에 선언되었는지에 따라 우선순위가 달라짐.

    1. 태그 내의
    2. 태그 내의
    3. 태그로 연결된 CSS
    4. 태그로 연결된 CSS 내의 @import 문
    5. 문브라우저 디폴트 스타일시트

  2. 명시도

    1. !important : 그 값이 최우선이 됨. ;쓰기전에 써주면 됨. ex) color: red !important;
    2. 인라인 스타일(inline style)
    3. 아이디 선택자(id selector)
    4. 클래스(class), 속성(attribute), 가상클래스 선택자(pseudo selector),
    5. 태그 선택자(type selector)
    6. 전체 선택자(universal selector)
    7. 상속(inherit)
    • div.class가 .class보다 명시도가 높으므로 우선순위가 높다.

  3. 선언 순서: 나중에 선언된 스타일이 우선 적용

    <body>
	<p class=first second">Hello World</p>
</body> 
    <style>
  p { color: green;}
  p { color: orange;}
</style>
    • 나중에 선언된 스타일이 우선적용되어 글씨는 주황색.

 <style>
   .first { color: blue;}
   .first { color: red;}

   p { color: green;}
   p { color: orange;}
 </style>

  • 클래스 선택자가 태그선택자보다 우선순위가 높다. 그리고 나중에 선언된 스타일이 우선적용 되므로 글씨는 빨간색.

profile
HYEONYI JU
병아리 삐약삐약
이전 포스트

위치와 관련된 프로퍼티-Flexbox

0개의 댓글