ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • (73)CSS_css우선순위
    HTML, CSS 2023. 4. 5. 16:12
    728x90
     

    (66)CSS_기본문법

    trangsfrom 2차원 좌표에서 요소를 변형시키는 속성 tramslate : 이동 rotate : 회원 scale : 확대, 축소 skew : 경사, 비틀기 ✔ 벤터 프리픽스(vender prefix) 주요 웹 브라우저 공급자가 새로운 실험적인 기능을

    jm-rograming.tistory.com

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>css 우선순위</title>
        <style>
            #id-style{
                background-color: deeppink;
            }
            #id-style2{
                background-color: deepskyblue;
            }
            div{
                display: block;
                padding: 30px;
                margin: 30px;
                background-color: gold;
            }
            .class-stlye3{
                background-color: beige !important;
            }
            .class-stlye2{
                background-color: pink;
                font-size: 25px;
            }
            .class-style{
                background-color: greenyellow;
               
            }
            ul > li.li-class{
                background-color: orange;
            }
            ul > li{
                background-color: violet;
            }
        </style>
        <link rel="stylesheet" href="./CSS/css2.css">
    </head>
    <body>
        <h2>css 우선순위</h2>
        <div style="background-color: aqua;">div 1번(인라인 스타일 우선: aqua)</div>
        <div id="id-style" class="class-stlye">div 2번(id 점수 우선: deeppink)</div>
        <div class="class-style">div 3번(class 점수 우선: greenyellow)</div>
        <div class="class-stlye2 class-style">div 4번(같은 속성의 경우 나중에 적용한 속성이 우선: greenyellow)</div>
        <div>div 5(같은 요소일 경우 나중에 적용한 속성이 우선:purple)</div>
        <ul>
            <li class="li-class">li 1번(점수가 높은 속성이 적용: orange)</li>
        </ul>
        <div id="id-style2" class="class-stlye3">div 6번(!important 우선)</div>
    </body>
    </html>

    'HTML, CSS' 카테고리의 다른 글

    (72)CSS_animation 2  (0) 2023.04.05
    (71)CSS_animation1  (0) 2023.04.05
    (70)CSS_transition2  (2) 2023.04.04
    (69)CSS_transition1  (0) 2023.04.04
    (68)CSS_transfrom  (0) 2023.04.04

    댓글

Designed by Tistory.