CSS 입문 튜토리얼_기본 튜토리얼

CSS는 Cascading Style Sheets의 약어입니다. 웹 문서에 스타일을 추가하는 간단한 메커니즘이며 프리젠테이션 레이어의 레이아웃 언어에 속합니다.
　1. 기본 구문 사양
일반적인 CSS 문 분석:
p {COLOR:#FF0000;BACKGROUND:#FFFFFF}
여기서 "p"는 "selectors"라고 부르며, "p"에 대한 스타일 정의
스타일 선언은 한 쌍의 중괄호 "{}"로 작성됩니다.
COLOR 및 BACKGROUND는 "속성"이라고 하며, 서로 다른 속성 사이에는 ";"을 구분하여 사용합니다. ;
"#FF0000"과 "#FFFFFF"는 속성의 값입니다.
　2. 색상 값
색상 값은 RGB 값으로 쓸 수 있습니다(예: color : rgb(255,0,0)). 또는 위의 예와 같이 16진수로 쓸 수 있습니다 color:#FF0000 . 16진수 값이 쌍으로 반복되면 동일한 효과로 축약될 수 있습니다. 예를 들어 #FF0000은 #F00으로 쓸 수 있습니다. 단, 반복되지 않으면 축약할 수 없습니다. 예를 들어 #FC1A1B는 6자리로 채워야 합니다.
　3. 글꼴 정의
웹 표준에서는 다음과 같은 글꼴 정의 방법을 권장합니다.
body {font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, Song Dynamise, 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 Strong { 글꼴 스타일: 기울임꼴: 글꼴 무게: 일반;}
은 li 굵은 스타일 아래에 강한 하위 요소에 대한 기울임꼴 스타일입니다.
　6.id 선택기
CSS 레이아웃은 주로 "div" 레이어를 사용하여 구현되며, div의 스타일은 "id 선택기"를 통해 정의됩니다. 예를 들어, 먼저

레이어를 정의한 다음 스타일 시트에서 다음과 같이 정의합니다.
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666 ;}
여기서 "menubar"는 정의한 ID 이름입니다. 앞에 "#" 기호가 있음을 참고하세요.
id 선택기는 파생도 지원합니다. 예:
#menubar p { text-align : right; margin-top : 10px }
이 방법은 주로 레이어와 더 복잡한 레이어를 정의하는 데 사용됩니다. 그리고 많은 파생 요소를 가지고 있습니다.
6. 카테고리 선택기
CSS에서 점을 사용하여 카테고리 선택기 정의를 나타냅니다. 예: 페이지의
.14px {color : #f60 ;font-size:14px ;}
class="category name" 메서드를 사용하여 다음을 호출합니다.
14px 글꼴 크기
이 메서드는 비교적 간단하고 유연하며 필요에 따라 언제든지 생성하고 삭제할 수 있습니다. 페이지.
7. 링크 스타일 정의
링크 스타일을 정의하기 위해 CSS에서는 a:link, a:visited, a:hover 및 a:active의 네 가지 의사 클래스가 사용됩니다. 예:
a :link{글꼴 가중치 : 굵게 ;텍스트 장식 : 없음 ;색상 : #c00 ;}
a:visited {글꼴 가중치 : 굵게 ;텍스트 장식 : 없음 ;색상 : #c30 ;}
a :hover {글꼴 가중치 : 굵게 ;텍스트 장식 : 밑줄 ;색상 : #f60 ;}
a:active {글꼴 가중치 : 굵게 ;텍스트 장식 : 없음 ;색상 : #F90 ;}
위의 문은 각각 "링크, 방문한 링크, 마우스 오버 시, 마우스 클릭 시" 스타일을 정의합니다. 주의할 점은 반드시 위의 순서대로 작성하셔야 합니다. 그렇지 않으면 예상한 화면과 다르게 표시될 수 있습니다. "LVHA" 순서로 되어 있다는 것을 기억하세요.