1. 기본구조 : selector { property : value; } -> 선택자 { 속성 : 값; }
2. selectors ( http://css.maxdesign.com.au/selectutorial/ 참조)
1) 클래스 선택자 (Class Selectors) : .class선택자가 선언된 모든 태그에 대하여 style을
적용한다.
.big { font-size: 110%; font-weight: bold; }
div.big { color: blue; }
td.big { color: yellow; }
label.big { color: green; }
form.big { color: red; }
2) 아이디 선택자 (Id Selectors) : 해당되는 아이디에 해당되는 태그에만 style을 적용한다.
#navigation { width: 12em; color: #333; }
div#navigation { width: 12em; color: #333; }
3) 의사클래스 (Pseudo Classes) :
a:visited {}
a:hover {}
a:link, a:visited { color: blue; }
a:hover, a:active { color: red; }
4) 문맥선택자 (Descendant Selectors) : UL OL EM { color : gray; }
예제와 같은 경우 <UL><OL><EM></EM></OL></UL>의 형태에 대해서만
color:gray선언이 적용된다.
5) 자식선택자 (Child Selectors)
div > em { color: blue; }
OR
div>em { color: blue; }
6) 타입 선택자 (Type Selectors) : 기본형 - 이것은 XAE에서 기본 정의되는 엘리먼트 Type에
해당할 것이다.
em {color: blue; }
7) 전체 선택자 (Universal Selectors) : 모든 타입에 대하여 적용한다.
* {color: blue; }
3. declaration
property:value 구문의 끝에는 항상 세미콜론(;) 으로 종결한다.
4. 주석문 (무조건 무시한다)
- /* */ 형태