CSS 상속
상위 요소에 설정된 스타일 속성은 하위 요소에도 반영된다.
이로 인해 여러 단계로 중첩된 엘리먼트마다 매번 같은 색상과 글자 크기를 부여하지 않아도 된다.
※ box-model이라고 불리는 속성들 즉, 크기와 배치 관련된 속성들은 하위 엘리먼트로 상속되지 않는다.
ex) width, height, margin, padding, border
선택자 우선순위(CSS Specificity, Cascading Order)
∎ 선언 방식에 따른 차이
1 2 3 4 5 6 | span { color : red; } span { color : blue; } | cs |
같은 선택자라면 나중에 선언한 것이 적용된다. => blue
1 2 3 4 5 6 | body > span { color : red; } span { color : blue; } | cs |
선택자의 표현이 더 구체적인 것이 우선적으로 적용된다. => red
∎ ID > CLASS > ELEMENT 순으로 반영
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <head> <style> #a { color : red; } .b { color : blue; } div { color : green; } </style> </head> <body> <div id="a" class="b"> text... </div> </body> | cs |
id 속성이 우선적으로 적용된다. => red
참고자료
'Web > CSS' 카테고리의 다른 글
| [WEB] CSS 요소 배치(2) (0) | 2018.11.18 |
|---|---|
| [WEB] CSS 요소 배치(1) (0) | 2018.11.17 |
| [WEB] CSS 기본 Style (0) | 2018.11.17 |
| [WEB] CSS Selector (0) | 2018.11.17 |
| [WEB] CSS 선언방법 및 적용방법 (0) | 2018.11.17 |
