CSS 우선순위
- CSS에 중복되는 속성을 적용할 경우 에러는 발생하지 않는다.
- 단, 우선 순위에 따라 최종적으로 보여지는 모습이 결정 된다.
1. !important
//중요하니까 먼저 적용 된다
.title-box { color: red !important;
}
2. 인라인 스타일
: 요소 안에 style 속성으로 스타일을 적용
<div style="background-color: yellow;">
</div>
3. 내부 스타일 시트
: 해당 HTML 문서의 <head> 태그 안에 <style> 태그를 이용해서 작성
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<style>
//여기!
</style>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
</body>
</html>
4. 외부 스타일 시트
: <link> 태그를 이용하여 적용
<link rel="stylesheet" href="/resources/css/bootstrap.min.css" type="text/css">
Tip) 같은 우선순위(문서)에 위치하는 경우, 아래에 있는 속성 적용 ( 브라우저는 html 문서를 위에서부터 아래로 읽음)