CSS 캐스캐이딩 원칙

 

 

스타일 우선순위

   - 동일한 스타일이라도 선언된 곳에 따라 우선순위가 정해진다.

      :: 브라우저에 의해 정의된 스타일 < 개발자가 선언한 스타일 < 사용자가 구성한 스타일

   -  적용범위가 적을수록 우선시 된다

      :: tag < class < id < 인라인

         > 인라인 스타일을 적용을 하면 스타일을 수정할때 매번 인라인된 코드 위치로 가서 고쳐야된다.

            이는 코드의 유지보수에 악영항을 끼치게 되므로 인라인 스타일은 필수적인 부분 외에는 지양하는것이 좋다.

   - 소스코드의 순서가 뒤에 있으면 덮어쓴다

<style>
	h1{
    	color:red;
        font-size:24px;
	}
    
	h1{
    	color: blue;
	}

</style>

      > 맨 처음에 h1을 " color:red; font-size:24px " 로 설정하고,

        이후에 h1을 다시 " color:blue "로 설정했다면, color 는 blue로 덮어씌워진다.

 

스타일 상속

   - 부모 요소의 스타일 속성들이 자식 요소로 전달된다.

   - 자식 요소에서 스타일정의를 할 경우 부모의 스타일을 덮어쓴다.

<ul style="color: red;">
	<li> 빨간글씨 </li> <!-- 부모의 스타일을 상속받는다. -->
	<li style="color:blue"> 파란글씨 </li> <!-- 부모의 스타일을 덮어쓴다. -->
</ul>