05-3 캐스캐이딩 스타일 시트(CSS)

위에서 아래로 흐른다.

스타일 간의 충돌을 막기 위한 방법이 '위에서 아래로 흐르며 적용되는 방법'이다.

이 방법에는 다음 두 가지 원칙이 있다.

p {
    font-style:italic;
    color:blue;
}
p {
    color:red !important;
}

/* 최종 적용되는 스타일
p {
    font-style:italic;
    color:red;
}
*/

h1 {
    color:blue;
}
#habor {
    border:1px solid gray;
    padding:10px;
    color:green;
}
.heading {
    color:red;
}

<h1 class="heading" id="habor">과연 어떤 것이 적용될까</h1>

<!-- 최종 적용되는 스타일
#habor {
    border:1px solid gray;
    padding:10px;
    color:green;
}
-->

소스에서 나중에 온 스타일이 먼저 온 스타일을 덮어쓴다.

p {
    color:darkgreen;
}
p {
    color:blue;
}

/* 최종 적용되는 스타일
p {
    color:blue;
}
*/

스타일 시트에서는 자식 요소에서 별도로 스타일을 지정하지 않으면 부모 요소에 있는 스타일 속성들이 자식 요소로 전달되는데 이것을 '스타일 상속'이라고 한다.

<!-- ul태그는 li태그의 부모 요소이므로 li 요소에 모두 적용된다 -->
<ul style="color:red">
    <li>내용1</li>
    <li>내용2</li>
    <li>내용3</li>
</ul>

다만, 스타일 상속에서 주의할 것은 스타일의 모든 속성이 부모 요소에서 자식 요소로 상속되는 것은 아니라는 점이다.

ex) 자식 요소의 배경 색이나 배경 이미지는 상속되지 않고 기본 값인 '투명'으로 지정된다.

results matching ""