[CSS] 스타일 상속

---

1.상속

상위요소의 프로퍼티를 하위 요소에 상속하는 행위
visibility ,opacity ,font ,color ,line-height ,text-align ,white-space이 상속가능하다

 

<style>
    .inhercolor{color: rebeccapurple;}
</style>

<div class="inhercolor">
    <p style="font-size: 30;">제목입니다</p>
    <p>내용용용</p>
    <button>상속안된버튼?</button>
</div>

 

 

 

 

2.상속받지 못한 요소 상속

inherit 키워드로 명시적으로 상속가능

<style>
    .inhercolor{color: rebeccapurple;}
    .inhercolor button{color: inherit;}
</style>

<div class="inhercolor">
    <p style="font-size: 30;">제목입니다</p>
    <p>내용용용</p>
    <button>상속안된버튼?</button>
</div>

 

 

 

 

 

2.캐스캐이딩

CSS 적용 우선순위

 

중요도

1. head의 style
2. head style의 @import
3. <link>의 css파일
4. <link>의 css파일의 @import
5. 브라우저 스타일시트

 

 

명시도

대상을 명확하게 특정할수록 우선순위가 높아짐
아래에서 더 상세하게 규정한 css로 적용되었다.

<style>
    .importance{color: aqua;}
    div.importance{color: blue;}
</style>

<div class="importance">어떤색?</div>

 

 

선언순서

나중에 선언된 css가 우선순위를 가진다.

<style>
    .yes{color: red;}
    .yes{color: blueviolet;}
</style>

<div class="yes">어떤색일까</div>

 

 

 

 

 

 

 

 

 

---

🎈참고자료

https://poiemaweb.com/css3-inheritance-cascading