1. 선택자 class
- 온점(.)으로 시작하는 선택자에 이름과 함께 선언하고 스타일 속성을 지정할 수 있다.
- class는 한 페이지 내에서 동일한 이름이 여러 개 있어도 된다.
- "saw"라는 css class를 추가하고, 해당 스타일을 지정
class="saw"
<li><a href="1.html" class="saw">100일</a></li>
<li><a href="2.html" class="saw">200일</a></li>
.saw ( class가 saw인 태그를 가리킬 때 )
.saw{
color:gray;
}
2. 선택자 ID
- 우물정(#)자로 시작하는 선택자에 이름과 함께 선언하고 스타일 속성을 지정할 수 있다.
- id는 한 페이지 내에서 유일한 값을 가져야 한다.
- "active"라는 css id를 추가하고, 해당 스타일을 지정
id="active"
<li><a href="2.html" class="saw" id="active">200일</a></li>
#active (id가 active인 태그를 가리킬 때)
#active{
color:red;
text-decoration-line: underline;
}
ID는 "고유식별자"이며,
특정 요소에 유일한 스타일을 적용할 수 있다.
각 요소는 하나의 id만 가질 수 있고, 다른 요소와 중복되면 안 된다.
3. 전체 선택자( * )
전체 선택자( * ): 스타일을 모든 요소에 적용할 때 사용함
* {
color:red; /*글자색*/
}
4. 태그 선택자
태그 선택자: 특정 태그가 쓰인 요소에 스타일을 적용할 때 사용
예를 들어, body 선택자를 정의하면 웹 문서에 있는 모든 body 태그의 요소들에 스타일이 적용됨
body{
background-color:beige; /*배경색*/
font-family: 궁서체, Verdana, Geneva, Tahoma, Sans-serit; /*서체*/
font-size:30px; /*글자 크기*/
}
5. 선택자 우선순위
일반적으로 가장 마지막(최근)에 등장하는 선택자가 우선순위가 높다.
그러나 선택자의 종류가 다른 경우 우선순위 또한 다르다.
tag < class < id
※ 구체적인 것이 포괄적인 것보다 우선순위가 높다.