[위클리 페이퍼_1주차] CSS의 Casecading

KYUNGJU·2023년 12월 31일

코드잇 스프린트 4기_위클리페이퍼

목록 보기

1/11

cascading은 CSS 규칙을 순서에 따라 계단식으로 합치는 것을 말한다.

스타일 우선순위는 다음 3가지에 의해 결정된다.

스타일이 선언된 위치에 따라 우선순위가 결정

프로그래머 스타일시트 > 사용자 스타일시트 > 브라우저 스타일시트

속성 뒤에 !important 명령어를 붙여주면 최우선으로 적용

선택자에 의해 우선순위 결정
아이디 개수, 클래스 개수, 태그 개수를 적어 점수를 비교

inline > id > class > tag

a.order { /* 아이디 0, 클래스 1, 태그 1 = 명시도 0 1 1 */
	...
}

a#info {  /* 아이디 1, 클래스 0, 태그 1 = 명시도 1 0 1 */
	...
}

/* 명시도 a#info가 더 높음*/

나중에 적은 코드 최우선으로 적용

.address {
    font-size: 1em;
}

.address {
  font-size: 2em;
}

/* 글자 크기 2em으로 적용 */

부모 요소의 스타일을 자식 요소가 따라가는 것
모든 속성이 상속되는 것은 아니고 상속되는 속성이 정해져 있는데 대표적으로 다음 속성들은 상속이 된다.

color, font-family, font-size, font-weight, line-height, text-align

가까운 조상에게 받은 속성일수록 우선순위가 높다.

아래 코드에서 a.order 태그에 적용되는 글자색은 #cccccc이다.

<body>
    <div id="info">
      <p class="description">
        ...<a class="order" ...>주문</a>
      </p>
    </div>
</body>

body {
  color: #000000;
}

#info {
  color: #aaaaaa;
}

.description {
  color: #bbbbbb;
}

.order {
  color: #cccccc;
}