1. HTML에서 외부 CSS파일 연동
rel = relationship 관계
href = hyper reference 하이퍼 참조
<link rel="stylesheet" href="style.css">
2. CSS 규칙
h3 {
color: red;
}
선택자 {
속성: 속성값; (속성과 속성값을 합쳐 CSS선언)
}
3. 선택자
id를 선택자로 쓸때는 #선택자
id는 중복이 안된다.
<div id="sample"></div>
#sample {
background-color: red;
}
class를 선택자로 쓸때는 #선택자
class는 중복 선언이 가능하다.
<div class="sample2"></div>
<a class="sample2"></a>
.sample2 {
color: red;
}
선택자 목록
.sample1,
.sample2 {
color: red;
}
여러 선택자를 동시에 갖고 있는 요소를 선택하는 경우
<p id="sample-id" class="sample-class"></p>
<a class="sample-class1 sample-class2"></a>
p#sample-id.sample-class {
background-color: red;
}
.sample-class1.sample-class2 {
background-color: red;
}
부모태그 안의 자식태그 선택 (자식 결합자)
<div class="parents">
<div clss="children">
</div>
</div>
.parents > .children {
background-color: red;
}
자손결합자
.ancestor .decendant {
background-color: red;
}