CSS (Cascading Style Sheet) Cascading : 폭포같은, 계속되는, 연속적인
상속
h1 { /* type selector */
color: red;
}<h1>
<span>Inheritance</span>
</h1>
캐스케이드
h1 {/*미적용*/
color:red;
}
h1 {/*적용*/
color:blue;
}
선택자
- ID Selector : [#content, #footer] 구체성(0, 1, 0, 0)
- Class Selector : [.aside, .section] 구체성(0, 0, 1, 0)
- Type Selector : [h1, div, span, em] 구체성(0, 0, 0, 1)
구체성, 명시성, 세분화
<h2>헤딩 요소
<span>명시성 테스트 (0,0,0,2)</span>
</h2>
<h4 class="c_type">클래스 구체성은
<span class="c_type2">0,0,2,2 입니다.</span>
</h4>
h2 {
color: red; /* 0,0,0,1 */
}
h2 span {
color: green; /* 0,0,0,2 */
}
h4.c_type {
/* 0,0,1,1 */ color: gray;
}
h4.c_type span.c_type2 {
/* 0,0,2,2 */ color: pink;
}
#content {
color: black;
}
div ul ul li {
/* 요소 설명자 0,0,0,4 */
}
div.aside ul li {
/* 클래스 1개와 요소가 3개이므로 0,0,1,3 */
}
a:hover {
/* 가상 클래스 1개와 요소 1개 0,0,1,2 */
}
div.nav a:hover {
/* 가상 클래스1개와 클래스 1개 그리고 요소가 2개 0,0,2,2 */
}
#content em {
/* 아이디 선택자 1개와 요소 선택자 1이므로 0,1,0,1 */
}
div#content em {
/* 아이디 선택자가 1개와 요소가 2개 0,1,0,2 */
}※ 명시도에서 제일 앞 0은 인라인 스타일
무조건
<div id="demo">
<p id="demo-child" style="color:tan">Lorem ipsum dolor sit.</p>
</div>
div#demo p#demo-child {
color: red /*!important*/; /* 0,2,0,2 */
}
div p {
color: green !important; /* 1,0,0,2 */
}
가상 클래스, 가상 요소
CSS 2.1 지원 가상 클래스
- :link - 방문하지 않았던 링크
- :visited - 방문했던 링크
- :hover - 포커스를 받은 요소
- :active - 활성화된 요소(링크를 클릭하고 있는 순간의 바로 그 링크)
- :first-child 선택한 요소 중에 첫번째 자식인 요소
CSS 2.1 지원 가상 요소
- ::first-letter
- ::before
- ::after
CSS 스타일 선언 3가지 방식
외부(External) 스타일, 내부(Internal) 스타일, 인라인(Inline) 스타일
외부(External) 스타일
- 가장 권장되고 일반적인 방법으로 CSS 파일을 별도로 관리하는 형태.
<head>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
내부(Internal) 스타일
- 내부스타일로 단발성 페이지의 CSS 분량이 적은 경우에 사용
<head>
<style type=“text/css”>
#demo { border:1px solid red; }
</style>
</head>인라인(Inline) 스타일
- 속성값이 동적으로 변경되어야 하는 경우에 사용
<div style=“display:block”>블라블라..</div>