1. 상속이란?
상위요소에 특정한 css속성을 적용 했을때에 하위요소들에게도 적용되는 현상!
<!-- ex -->
<head>
<style>
.container {
color: red;
}
</style>
</head>
<body>
<div class="container">hello
<div>hi
<div>good <!-- 하위요소의 모든 글자색이 빨간색으로 변경됨-->
<div>bye</div>
<div>world</div>
</div>
</div>
</div>
</body>2. 상속되는 속성들
font 관련 속성들, color, text-align, text-indent, text-decoration, letter-spacing, opacity 등...
글자를 다루는 속성들이 주로 적용된다.
3. 강제 상속
상속이 되지 않는 부모요소의 속성을 강제로 상속시킨다.
<!-- ex -->
<div class="container">
<div class="box"></div>
</div>.container {
position: absolute;
}
.box {
position: inherit;
}
위처럼 자식요소의 속성 값에 inherit 를 입력하면 부모요소의 값이 강제상속이 된다.
4. 우선순위
<body>
<div id="container" class="box" style="color: red;">hello</div>
</body>* {
color: blue;
}
body {
color: yellow;
}
div {
color: green;
}
.box {
color: orange;
}
#container {
color: tomoto;
}
div {
color: gray !important;
}이렇게 하게되면 !important 라고 되있는 회색이 설정되게 된다.
이유는 일단 <body> 태그의 color 는 <div> 태그에 상속되는 개념이기 때문에 <div> 태그에 직접적으로 값이 명시되있는 경우에는 우선순위가 떨어진다. 그리고 !important 가 적용된 선언은 다른 모든 것보다 최우선으로 적용된다.
선택자별 우선도를 점수로 따져본다면 inline선언 방식은 1000점, id는 100점, class는 10점, tag는 1점, 전체선택자는 0점 이다.
같은 점수라면 가장 마지막에 작성된 값이 적용된다.
'css' 카테고리의 다른 글
| css 요소를 띄워주고 위치를 지정해주는 속성! (0) | 2020.10.04 |
|---|---|
| css 박스 모델 속성 ! (0) | 2020.10.03 |
| css의 중요한 단위 ! (0) | 2020.10.03 |
| css의 선택자의 종류 ! (0) | 2020.10.02 |
| css의 기본! (0) | 2020.10.02 |