하루의 일상💜

[CSS] 캐스케이딩 (Cascading) 우선순위, inherit 본문

CSS

[CSS] 캐스케이딩 (Cascading) 우선순위, inherit

도하루박 2022. 9. 17. 19:32
반응형
캐스케이딩 이란?

스타일 시트에서는 우선순위가 위에서 아래, 즉 계단식으로 적용된다는 의미이다.

둘 이상의 스타일을 적용할 때 우선순위에 따라 적용할 스타일을 결정한다.

 

중요도

CSS가 어디에 선언되었는지에 따라서 우선순위가 달라진다.

인라인 스타일 > 내부 스타일 시트 > 외부 스타일 시트 > 웹 브라우저 기본 스타일

 

명시도

우선순위 순서
!importmant > 인라인 스타일 > 아이디 선택자 > 클래스 선택자 > 태그 선택자 > 전체 선택자 > 상속받은 속성

 

인라인 스타일

간단한 스타일 정보라면 스타일 시트를 사용하지 않고 스타일을 적용할 대상에 직접 표시한다.

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>캐스케이팅</title>
</head>
<body>
    <p style="color: red">
        캐스케이팅입니다.
    </p>
</body>
</html>
    <p style="color: red">
        캐스케이팅입니다.
    </p>

 

내부 스타일 시트

<ul>이라는 부모안에 <ul>이라는 자식이 있을 때 같은 스타일을 줄때 사용할 수 있다.

#id li  해당 아이디명안에 있는 li 요소들을 변경한다는 명령어이다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>캐스케이팅</title>
    <style>
        ul {
            list-style-type: none;
        }
        #test li {
            color: red;
        }
    </style>
</head>
<body>
<ul id="test">
    <li>캐스케이팅</li>
    <ul>
        <li>내부 스타일 시트</li>
    </ul>
</ul>
</body>
</html>

그리고 부등호 표시에 따라 부모의 값만 변경하도록 설정할 수 있다.

#test > li {
            color: red;
        }

 

 

외부스타일 시트

이렇게 외부파일로 .css 파일을 따로 만들어서 만들어진 스타일을 불러와서 사용하는 시트이다.

<link rel="stylesheet" href="outer.css">

href 에 .css 경로를 작성해주면 된다.

 

 

!important
<p id="banana" style="color: green;">바나나</p>
#banana{
    color: pink !important;
}

.html에서 바나나에 green을 주어도 .css 에서 !important를 주면 우선적으로 설정 된다.

 

[결과창]

바나나

 

 

상속

부모의 색상을 자식값에 그대로 불려 받을 때 사용하는 태그

예를 들어 body { }의 값을 설정 하였으나 Button도 body 안에 포함되었지만 색상이 변하지 않았다. 

이럴 경우는 Button의 값도 부모의 값을 물려 받을 수 있도록 ingerit;를 사용해준다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 상속</title>
    <style>
        body {
            color:blue;
        }
        button {
            color: inherit;
        }
    </style>
</head>
<body>
    <div class="ingerit-test">
            <h1>Heading</h1>
        <p>
            안녕하세요 <strong>strong</strong>
        </p>
        <button>Button</button>
    </div>
</body>
</html>

 

반응형
저작자표시 (새창열림)

'CSS' 카테고리의 다른 글

[CSS] CSS 선택자  (0) 2022.09.17
'CSS' Related Articles more