250x250
Notice
Recent Posts
Recent Comments
Link
«   2025/04   »
일 월 화 수 목 금 토
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
Tags more
Archives
Today
Total
관리 메뉴

커리까지

CSS 수업 - 캐스케이딩 실습 본문

CSS

CSS 수업 - 캐스케이딩 실습

목표는 커리 2021. 3. 4. 07:56
728x90
SMALL
<html>
    <head>
        <style>
            li{color:red;}
            #idsel{color:blue;}
            .classsel{color:green;}
        </style>
    </head>
    <body>
        <ul>
            <li>html</li>
            <li id='idsel' class='classsel' style='color:powerblue'>css</li>
            <li>java</li>
        </ul>
    </body>
</html>

css_04

  • 태그의 스타일이 먼저 적용됨

태그의 스타일 지움

<li id='idsel' class='classsel'>css</li>

css05

  • 스타일 태그에 적힌게 적용된다.

id선택자 지우기

<style>
  li{color:red;}
  .classsel{color:green;}
</style>

css06

class도 지우기

<style>
  li{color:red;}
</style>

css07

적용되는 순서

  1. style attribyte
    1. style 속성이 더 태그에 가까워서 구체적이고 명시적이다.
  2. id selector
    1. 특정 id만 부여
  3. class selector
    1. 그다음 포괄적
  4. tag selector
    1. 제일 포괄적(일반적)
  • 뭐가 더 구체적이고 명시적이냐, 뭐가 더 포괄적이냐.

모든 우선순위를 뛰어넘는 법 [ !important ]

<style>
    li{color:red !important;}
    #idsel{color:blue;}
   .classsel{color:green;}
</style>

css07

  • 다른 속성을 다 이기고 적용된다.
728x90
LIST
저작자표시

'CSS' 카테고리의 다른 글

CSS 수업 - box model  (0) 2021.03.08
CSS 수업 - inline block  (0) 2021.03.05
CSS 수업 - 캐스케이딩 소개  (0) 2021.03.03
CSS 수업 - stylish  (0) 2021.03.02
CSS 수업 - 상속  (0) 2021.02.26
'CSS' Related Articles more
Comments