1. 상속 (Inheritance)
- 상속 : 상위 (부모, 조상) 요소에 적용된 property를 하위 (자식, 자손) 요소가 물려 받는 것
- property 중 상속이 되는 것과 되지 않는 것이 있음
| property | inherit |
|---|---|
| width/height | no |
| margin | no |
| padding | no |
| border | no |
| border-sizing | no |
| display | no |
| visibility | yes |
| opacity | yes |
| background | no |
| font | yes |
| color | yes |
| line-height | yes |
| text-align | yes |
| vertical-align | no |
| text-decoration | no |
| white-space | yes |
| position | no |
| top/bottom/left/right | no |
| z-index | no |
| overflow | no |
| float | no |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.text-red {
color: red;
border: 1px solid #bcbcbc;
padding: 10px;
}
</style>
</head>
<body>
<div class="text-red">
<h1>Heading</h1>
<p>Paragraph<strong>strong</strong></p>
<button>Button</button>
</div>
</body>
</html>-
color는 상속되는 property로서 자식 요소는 물론 후손 요소까지 적용됨
-
상속되지 않는 경우(상속받지 않는 요소 또는 상속되지 않는 property), inherit 키워드를 사용하여 명시적으로 상속받을 수 있음
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.text-red {
color: red;
border: 1px solid #bcbcbc;
padding: 10px;
}
.text-red button {
color: inherit;
}
.text-red p {
border: inherit;
padding: inherit;
}
</style>
</head>
<body>
<div class="text-red">
<h1>Heading</h1>
<p>Paragraph<strong>strong</strong></p>
<button>Button</button>
</div>
</body>
</html>2. Cascading
-
cascading order : 요소가 하나 이상의 CSS 선언에 영향 받을 수 있으므로, 충돌을 피하기 위해 세워진 CSS 적용 우선순위
-
중요도 - CSS가 어디에 선언 되었는지에 따라 우선순위가 달라짐
-
명시도 - 대상을 명확하게 특정할수록 명시도가 높아지고 우선순위가 높아짐
-
선언순서 - 선언된 순서에 따라 우선순위가 적용됨 (나중에 선언된 CSS가 우선 적용)
-
2.1 중요도
- CSS가 어디에 선언 되었는지에 따라서 우선순위가 달라짐
- head 요소 내의 style 요소
- head 요소 내의 style 요소 내의 import 문
- link로 연결된 CSS 파일
- link로 연결된 CSS 파일 내의 import 문
- 브라우저 디폴트 stylesheet
body {
background-color: red;
color: white;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<style>
body {
background-color: beige;
color: navy;
}
</style>
</head>
<body>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</body>
</html>2.2 명시도
- 대상을 명확하게 특정할수록 명시도가 높아지고 우선순위가 높아짐
!important > inline style > id selector > class/attribute/pseudo-class selector > tag selector > the whole selector > 상위 요소에 의해 상속된 속성<!DOCTYPE html>
<html>
<head>
<style>
p { color: red !important; }
#thing { color: blue; }
div.food { color: chocolate; }
.food { color: green; }
div { color: orange; }
</style>
</head>
<body>
<p id="thing">Will be red</p>
<div class="food">Will be chocolate</div>
</body>
</html>2.3 선언순서
- 선언된 순서에 따라 우선순위가 적용
- 나중에 선언된 스타일이 우선 적용됨
<!DOCTYPE html>
<html>
<head>
<style>
p { color: blue; }
p { color: red; }
.red { color: red; }
.blue { color: blue; }
</style>
</head>
<body>
<p>Will be red</p>
<p class="blue red">Will be blue</p>
</body>
</html>