HTML/CSS 스타일 적용의 우선순위

스타일을 적용할 때 우선순위는

*(전체선택자) > 태그 > 클래스 > 아이디 > 인라인스타일

순으로 적용된다.

 

예시로 <p id = "con" class = "text" style="color:aqua;"> 스타일 우선순위 </p> 라는 태그가 있을 때

태그 아이디 클래스 인라인스타일

위 그림처럼 구분해주면 된다.

 

스타일이 여러개일때는

브라우저의 기본스타일 > 외부스타일 > 내부스타일 > 인라인 스타일

순으로 적용된다.

 

- 브라우저의 기본스타일 : <h1> <h2> 등 고유의 스타일

- 외부스타일 : <link href="style.css" rel="stylesheet">

- 내부스타일 : <style></style>

- 인라인스타일 <p style = "color:aqua">

 

즉 가장 멀리있는 스타일부터 적용 되고 최종적으로 적용되는 스타일은 가장 근접한 위치에서 적용한 스타일이 적용된다고 볼 수 있다.

 

스타일은 여러 방식으로 적용할 수 있는데 예시를 보면

스타일 적용 예시

예시 결과

결과를 보면 li의 첫번째 값인 웹학과의 글자크기가 우측의 css 파일에서는 30px로 설정했지만 <li>태그안에 직접 small속성으로 지정해주었기때문에 결과적으로 작은 글자가 나타나는것을 볼 수 있다.