1. 기본 문법 사양
일반적인 CSS 문을 분석합니다.
p {색상:#FF0000;배경:#FFFFFF}
그 중 "p"는 "선택자"라고 불리며 "p"에 대한 스타일을 정의한다는 의미입니다.
스타일 선언은 중괄호 "{}" 쌍으로 작성됩니다.
COLOR와 BACKGROUND를 "속성"이라고 하며, 서로 다른 속성은 세미콜론 ";"으로 구분됩니다.
"#FF0000"과 "#FFFFFF"는 속성값입니다.
2. 색상 값
색상 값은 RGB 값(예: color : rgb(255,0,0)) 또는 위의 예제 color:#FF0000과 같이 16진수로 작성할 수 있습니다. 16진수 값이 쌍으로 반복되면 동일한 효과로 축약될 수 있습니다. 예를 들어 #FF0000은 #F00으로 쓸 수 있습니다. 단, 반복되지 않으면 축약할 수 없습니다. 예를 들어 #FC1A1B는 6자리로 채워야 합니다.
3. 글꼴 정의
웹 표준에서는 다음과 같은 글꼴 정의 방법을 권장합니다.
body { 글꼴 계열 : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif }
글꼴은 나열된 순서대로 선택됩니다. 사용자의 컴퓨터에 Lucida Grande 글꼴이 포함되어 있으면 해당 문서는 Lucida Grande로 지정됩니다. 그렇지 않은 경우에는 Verdana 글꼴로 지정되고, Verdana가 없으면 Lucida 글꼴로 지정되는 식입니다.
Lucida Grande 글꼴은 Mac OS X에 적합합니다.
Verdana 글꼴은 모든 Windows 시스템에 적합합니다.
Lucida는 UNIX 사용자에게 적합합니다.
"Song Ti"는 중국어 간체 사용자에게 적합합니다.
나열된 글꼴 중 사용할 수 있는 글꼴이 없으면 기본 sans-serif 글꼴이 호출됩니다.
4.그룹 선택기
여러 요소가 동일한 스타일 속성을 갖는 경우 명령문을 함께 호출할 수 있으며 요소는 쉼표로 구분됩니다. p, td, li { 글꼴 크기: 12px }
5. 선택자 파생
파생 선택기를 사용하여 요소 내의 하위 요소에 대한 스타일을 정의할 수 있습니다. 예를 들면 다음과 같습니다.
li 강한 { 글꼴 스타일: 기울임꼴; 글꼴 두께: 일반 }
li 아래의 강력한 하위 요소에 대해 이탤릭체이지만 굵게 표시되지 않는 스타일을 정의하는 것입니다.
6.id 선택기
CSS를 사용한 레이아웃은 주로 "div" 레이어를 사용하여 구현되며, div의 스타일은 "id 선택기"를 통해 정의됩니다. 예를 들어 먼저 레이어를 정의합니다.
<div id="메뉴바"></div>
그런 다음 스타일 시트에서 다음과 같이 정의합니다.
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
여기서 "menubar"는 정의한 ID 이름입니다. 앞에 "#" 기호가 있음을 참고하세요.
ID 선택기는 파생도 지원합니다. 예:
#menubar p { 텍스트 정렬: 오른쪽 여백: 10px }
이 방법은 주로 더 복잡하고 여러 파생 요소를 갖는 레이어 및 요소를 정의하는 데 사용됩니다.
6. 카테고리 선택기
CSS에서 점을 사용하여 카테고리 선택기 정의를 나타냅니다. 예를 들면 다음과 같습니다.
.14px {색상: #f60 ;글꼴 크기:14px ;}
페이지에서 class="category name" 메서드를 사용하여 다음을 호출합니다.
<span class="14px">14px 크기 글꼴</span>
이 방법은 비교적 간단하고 유연하며 페이지 필요에 따라 언제든지 생성하고 삭제할 수 있습니다.
7. 링크 스타일 정의
링크 스타일을 정의하기 위해 CSS에서는 4개의 의사 클래스(a:link, a:visited, a:hover 및 a:active)가 사용됩니다. 예를 들면 다음과 같습니다.
a:링크{글꼴-가중치: 굵게 ;텍스트 장식: 없음 ;색상: #c00 ;}
a:방문 {글꼴-가중치: 굵게 ;텍스트-장식: 없음 ;색상: #c30 ;}
a:hover {글꼴-가중치: 굵게, 텍스트-장식: 밑줄, 색상: #f60 ;}
a:활성 {글꼴 두께: 굵게 ;텍스트 장식: 없음 ;색상: #F90 ;}
위의 문은 각각 "링크, 방문한 링크, 마우스 오버 시, 마우스 클릭 시" 스타일을 정의합니다. 주의할 점은 위의 순서대로 작성하셔야 합니다. 그렇지 않으면 화면이 예상한 것과 다를 수 있습니다. "LVHA" 순서로 되어 있다는 것을 기억하세요.
하하, 너무 많이 읽고 나니 좀 어지러워졌습니다. 실제로 CSS에 대한 문법 사양이 더 많이 있습니다. 결국 일반적으로 사용되는 몇 가지 사양은 다음과 같습니다. 한입에 :)