ABOUT ME

-

  • 9. Inheritance & Cascading
    Front-end/CSS3 2020. 6. 6. 15:59
    /*property	            Inherit*/
    /*width/height	        no*/
    /*margin	            no*/
    /*padding	            no*/
    /*border	            no*/
    /*box-sizing	        no*/
    /*display	            no*/
    /*visibility	        yes*/
    /*opacity	            yes*/
    /*background	        no*/
    /*font	                yes*/
    /*color	                yes*/
    /*line-height	        yes*/
    /*text-align	        yes*/
    /*vertical-align	    no*/
    /*text-decoration	    no*/
    /*white-space	        yes*/
    /*position	            no*/
    /*top/right/bottom/left	no*/
    /*z-index	            no*/
    /*overflow	            no*/
    /*float	                no*/
    
    
    
    /*Cascading*/
    /*요소는 하나 이상의 CSS 선언에 영향을 받을 수 있다. */
    /*이때 충돌을 피하기 위해 CSS 적용 우선순위가 필요한데 이를 캐스캐이딩(Cascading Order)이라고 한다.*/
    /*캐스캐이딩의 세가지 규칙*/
    
    /*중요도
    CSS 가 어디에 선언 되었는지에 따라서 우선순위가 달라진다.
    1. head 요소 내의 style 요소
    2. head 요소 내의 style 요소 내의 @import 문
    3. <link> 로 연결된 CSS 파일
    4. <link> 로 연결된 CSS 파일 내의 @import 문
    5. 브라우저 디폴트 스타일시트*/
    
    /*명시도
    대상을 명확하게 특정할수록 명시도가 높아지고 우선순위가 높아진다.
    !important > 인라인 스타일 > 아이디 선택자 > 클래스/어트리뷰트/가상 선택자 > 태그 선택자 > 전체 선택자 >
    상위 요소에 의해 상속된 속성*/
    
    /*선언순서
    선언된 순서에 따라 우선 순위가 적용된다. 즉, 나중에 선언된 스타일이 우선 적용된다.
    p { color: blue; }
    p { color: red; }
    로 선언했다면 color 는 red 가 된다.*/

    'Front-end > CSS3' 카테고리의 다른 글

    11. Gradient  (0) 2020.06.06
    10. Shadow  (0) 2020.06.06
    8. Float  (0) 2020.06.06
    7. Position  (0) 2020.06.06
    6. Font & Text  (0) 2020.06.06

    댓글

Designed by Tistory.