a 태그의 색을 blue로 바꾸고 싶은데 모든 a 태그의 색이 blue가 되는 건 원치 않을 경우
자식 color 속성에 inherit을 줘서 부모의 색깔을 상속받을 수 있다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <!doctype html> <html> <head> <link rel="stylesheet" href="style.css"> </head> <body> <div class="box"> <h1>hi</h1> <p>hello <a href="#">!!!</a></p> <button>Submit</button> </div> <div class="text"> <a href="#">nice to meet you!</a> </div> </body> </html> | cs |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | body{ background-color:whitesmoke; } .box{ color:orangered; font-family: "Times New Roman", Times, serif; } a{ color:inherit;/*부모 font-color 상속*/ text-decoration:none;/*밑줄 삭제*/ } .text{ color:aqua; } button{ font:inherit;/*부모의 font를 상속받아 버튼 글자가 바뀜*/ } .box h1{ color:blue; font-size:3em; } .box h1:before{ content:' '; display:inline-block; width:0.5em; height:0.5em; background-color:currentColor; border-radius:50%; margin-right:0.5em; } | cs |
자식에서 font-size가 지정되어 있으면 부모의 font-size를 상속 받지 않는다.
부모에서 line-height를 숫자 n으로만 지정해주면 자식들은 자신의 font-size에 n배를 한 값이 line-height가 된다.
그러나 부모의 line-height에 em으로 단위를 지정해버리면 부모의 font-size에 n배를 한 값이 자식들에게 상속되고 줄 높이가 이상해질 수 있다.
'CSS' 카테고리의 다른 글
| CSS 문법 Syntax (0) | 2018.10.29 |
|---|---|
| 오버플로우 overflow (0) | 2018.10.07 |
| 버티컬 얼라인 vertical align (0) | 2018.10.07 |
| 마진 병합 margin collapsing (0) | 2018.10.07 |
| 라인 하이트 line-height (0) | 2018.10.07 |
