내부 css의 기본 형식
셀렉터 {스타일속성:값; 스타일속성2:값; ....}
- 셀렉터 : 문서에서 스타일을 적용할 대상을 선택하는 명령
-셀렉터의 종류
1. * : 모든 엘리먼트를 의미한다.
* {font-size:15pt; color:rgba(92, 76, 165, 0.808);}
2. 태그명 { 스타일 정의 }
div { color:bisque; font-size:30pt;}
p {color:burlywood; font-family:궁서체; font-size:20pt;}
3. 태그명.class속성값 {스타일 정의}
==>지정한 '태그명'에 해당하는 요소들 중에서 class속성의 속성값이 'class속성값'과 일치하는 곳에 스타일을 적용한다.
div.test{color:blanchedalmond; font-size:30pt;}
p.test{color:chartreuse; font-size:20pt;}
4. class속성값 [스타일 정의]
==> 모든 요소들 중에서 class속성의 속성값이 'class속성값'과 일치하는 곳에 스타일을 적용한다.
.test{color:chartreuse; font-size:20pt;}
5. 태그명#id속성값 [스타일 정의]
==> 지정한 '태그명'에 해당하는 요소들 중에서 id속성의 속성값이 'id속성값'인 것에 스타일을 적용한다.
아이디값은 문서에서 중복되지 않도록 작성하는게 좋다.
div#myid { color:red; font-family:궁서체; text-decoration:underline;}
6. #id속성값 { 스타일 정의}
==> 모든 요소들 중에서 id속성의 속성값이 'id속성값'인 곳에 스타일을 적용한다.
#myid { color:red; font-family:궁서체; text-decoration:underline;}
7. 셀렉터1, 셀렉터2, 셀렉터3 { 스타일 정의 }
==> 각각의 셀렉터에 해당하는 모든 곳에 스타일을 적용한다.
p, div { color :blue; font-family:궁서체; font-size:30pt;}
.test,myid {color:cyan; font-family:궁서체; font-size:30pt;}
8. 셀렉터1 셀렉터2 셀렉터3 { 스타일 정의 }
==> '셀렉터1'의 자손 중에서 '셀렉터2'에 해당하는 모든 곳에 스타일을 적용한다.
div span { color:red; font-size:30pt; text-decoration:overline;}
9. 셀렉터1>셀렉터2 { 스타일 정의 }
==> '셀렉터1'의 자식 중에 '셀렉터2'에 해당하는 모든 곳에
스타일을 적용한다.
div > span { color:red; font-size:30pt; text-decoration:overline;}
10. 셀렉터1+ 셀렉터2 {셀렉터 정의]
==> '셀렉터1'의 바로 다음에 오는 형제 중 '셀렉터2'에 해당되는 곳의 스타일을 적용한다.
p#myid + div { color: blue; font-size:30pt;}
p.test + div{color:blue; font-size:30pt;}
11. 셀렉터1 ~ 셀렉터2 { 스타일 정의 }
==> '셀렉터1'의 뒤에 오는 형제들 중에서 '셀렉터2'에 해당하는 모든 곳에 스타일을 적용한다.
div#myid ~ p {color:red; font-size:20pt;}
<body>
<p>이것은 p태그 영역입니다.(1번)</p>
<div class="test">이것은 <i><span>div태그</span>영역</i>입니다.(1번)</div>
<p class="test">이것은 <span>p태그</span>영역입니다.(2번)</p>
<div id="myid">이것은 <span>div태그</span>영역입니다.(2번)</div>
<p id="myid">이것은 <span>p태그</span>영역입니다.(3번)</p>
<div class="test">이것은 <span>div태그</span>영역입니다.(3번)</div>
<p class="test">이것은 <span>p태그</span>영역입니다.(4번)</p>
<div>이것은 <span>div태그</span>영역입니다.(4번)</div>
</body>'HtmlCss > CSS' 카테고리의 다른 글
| Css - background (0) | 2019.05.25 |
|---|---|
| Css- Block요소,Display (0) | 2019.05.25 |
| Css - 의사 클래스 (0) | 2019.05.25 |
| CSS - Font 명령어 (0) | 2019.05.25 |
| CSS (0) | 2019.05.25 |
