CSS입문

CSS_ 상속 _22.04.08(Fri)

양빵빵 2022. 4. 8. 10:45

 

상속(inherit)
상속이란 부모요소에 적용한 스타일이 후손요소들에
게까지 영향을 주는 특성을 말합니다.
 
- 하지만 모든 속성들이 상속되는 것이 아닙니다.
 
# 상속되는 속성들 (글꼴,폰트)
1. font 관련 속성: font-size, font-weight, font-style, lineheight, font-family
2. color
3. text-align, text-indent, text-decoration
4. letter-spacing
5. opacity

내부스타일 적용에서 .생태계 (class생태계)에 넓이,높이,등 다른 속성과 함께 글자 색깔과 글자두께 속성을 넣었을때

글자 색깔과, 두께는 .생태계의 후손인 동물,식물,소나무,튤립,해바라기 등에도 적용되는 것을 확인할수 있다.

 

<!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>Document</title>
    <style>

        .eco {
            width: 500px;  
            height: 500px;
            border: 1px solid red;
            display: flex;
            align-items: center;

            /* 상속 */
            color: dodgerblue;
            font-weight: bold;
             
        }

        .animal{
            width: 200px;
            height: 200px;
            background: orange;
            /* 상속 */
            color: black;
        }

        .plant{
            width: 200px;
            height: 200px;
            background:green;
            /* 상속 */
            color:violet;
            font-weight: normal;
        }

     

    </style>
   
</head>
<body>
    <!-- .eco>.animal+(.plant>div*3) -->
       

    <div class="eco"> 생태계
        <div class="animal">동물</div>
        <div class="plant">식물
            <div>소나무</div>
            <div>튤립</div>
            <div>해바리기</div>
        </div>
    </div>


</body>
</html>