-
(73)CSS_css우선순위HTML, CSS 2023. 4. 5. 16:12728x90
- 우선순위 예제
- 아래 링크를 통해 각 태그의 설명을 볼 수 있다.
- https://jm-rograming.tistory.com/105
(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