프론트엔드/CSS
CSS 19 CSS의 우선순위
스펀지연구소
2021. 4. 3. 15:35
CSS 적용 우선순위
- 하나의 요소에 인라인 스타일 시트가 중복 정의되면 제일 마지막에 설정된 값이 적용
- CSS 적용 우선순위와 상관없이 속성을 강제로 적용할 때는 (!important) 표시 사용
CSS가 중복 정의된 경우 어떤 것이 적용될까?
<!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>Document</title>
<!--외부스타일시트를정의하는위치가중요-->
<link type="text/css"rel="stylesheet"href="02_css적용우선순위.css">
</link>
<style>
p{
color: blue;
}
p{
color: yellow;
}
p{
color: red;
}
</style>
</head>
<body>
<p>CSS가 중복 정의된 경우 어떤 것이 적용될까?</p>
</body>
</html>외부 스타일 시트를 정의하는 위치가 중요하다.
CSS가 중복 정의된 경우 어떤 것이 적용될까?
<!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>Document</title>
<style>
p{ color: blue; }
p{ color: yellow; }
p{ color: red; }
</style>
<!--외부스타일 시트를 정의하는 위치가 중요(최종적용) -->
<link type="text/css"rel="stylesheet"href="02_css적용우선순위.css">
</link>
</head>
<body>
<p>CSS가 중복 정의된 경우 어떤 것이 적용될까?</p>
</body>
</html>