Samla's Study

 

1.  CSS 상속

• 부모 요소의 속성 -> 자식 요소에도 자동 적용되는 것
• "margin" 등 상속 시 문제가 될 만 한 속성은 상속되지 않는다.
• 어지간한 폰트 / 컬러 / 정렬 관련 속성은 상속된다. 
  • color
  • font-family
  • font-size
  • font-weight
  • font-height
  • line-height
  • list-style
  • text-align
  • visibility
  • 등등
• <a>태그에는 폰트 / 컬러/ 정렬 관련 속성도 기본적으로는 상속되지 않는다. 
  <a>태그에 상속 시키기 위해서는 해당 속성에  "inherit" 값 설정

<style>
	.parents {
    	color: green;
    }
    
    /* <a>태그에 부모 속성 상속시키기 */
    .parents a {
    	color: inherit;
    }
</style>

<div class="parents">
	<p> <a href="http://getitall.tistory.com" target="_blank">홈 화면</a>로 이동합니다!</p>
</div>

 

2. CSS 적용 우선순위

A. 순서

: 동일한 선택자가 뒤에 나오면 이전 스타일 내용을 덮어 씀.

<style>
	h1 {
    	color: red;
    	text-align: center;
    }
    
    /* 재 호출 된 <h1> 태그 내 중복되는 "color" 속성은 덮어써 짐 */
	h1 {
    	color: green;
    }

</style>

<h1>CSS ORDER</h1>

 

B. 명시도

: 동일한 요소를 지정하지만 선택자가 다른 경우 "명시도"에 따라 우선순위 결정

 

 

Inline Style > !importnat > id > class > tag

 

 

•  
•  
•  
•  

<style>
	/* 우선순위 점수 112 pt로 첫번째 스타일이 적용됨 */

	/* id 1개 (100 pt) + 가상클래스 1개 (10 pt) + tag 2개 (2 pt) = 112 pt */
    ul li:first-child #link {
    	color: red;
    }

	/* 가상클래스 1개 (10 pt) + tag 3개 (3 pt) = 13 pt */
	ul li:first-child a {
    	color: blue;
    }
</style>

<ul>
	<li><a id="mark" href="#">Specificity</li>
    <li><a id="mark" href="#">Specificity</li>
    <li><a id="mark" href="#">Specificity</li>
    <li><a id="mark" href="#">Specificity</li>
</ul>