웹 표준을 사용하여 웹 사이트 구축 7일차: CSS 시작하기

XHTML 코드 사양을 이해한 후 CSS 레이아웃을 수행해야 합니다. 먼저 CSS에 대한 입문 지식을 소개하겠습니다. 이미 익숙하신 분들은 이 섹션을 건너뛰시고 바로 다음 섹션으로 넘어가셔도 됩니다.

CSS는 Cascading Style Sheets의 약자입니다. 웹 문서에 스타일을 추가하는 간단한 메커니즘이며 프리젠테이션 레이어의 레이아웃 언어에 속합니다.

1. 기본 구문 사양

일반적인 CSS 문 분석:

p {COLOR: #FF0000: #FFFFFF; }

"p"에 대한 스타일을 정의한다는 의미로 "p"를 "선택기"(선택기)라고 부릅니다.

스타일 문 한 쌍의 중괄호로 작성됩니다.

COLOR 및 BACKGROUND는 "속성"(PROperty)이라고 하며, 서로 다른 속성은 세미콜론 ";"으로 구분됩니다.

"#FF0000 " 및 "#FFFFFF"는 속성의 값입니다.

2. 색상 값

색상 값은 RGB 값으로 작성할 수 있습니다. 예:

color : rgb(255,0,0)

, 또한 위의 예시

color:#FF0000

처럼 16진수로 작성할 수도 있습니다. 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에 적합합니다. 글꼴은 모든 Windows 시스템에 적합합니다.

Lucida는 UNIX 사용자에게 적합합니다

"Songti"는 중국어 간체 사용자에게 적합합니다.

나열된 글꼴 중 하나도 사용할 수 없는 경우 , 기본 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{font-weight : 굵은 글씨 ;text-장식 : 없음 ;color : #c00 ;}

a:visited {font-weight : 굵게 ;텍스트 장식 : 없음 ;색상 : #c30 ;}

a:hover {글꼴 가중치 : 굵게 ;텍스트 장식 : 밑줄 ;색상 : #f60 ;}

a:활성 {글꼴 가중치 : 굵은 글씨 ;텍스트 장식 : 없음 ;색상 : #F90 ;}

위의 명령문은 각각 "링크, 방문한 링크, 위에 마우스를 놓았을 때 클릭"을 정의합니다. 마우스를 클릭할 때" 스타일. 주의할 점은 반드시 위의 순서대로 작성하셔야 합니다. 그렇지 않으면 예상한 화면과 다르게 표시될 수 있습니다. "LVHA" 순서로 되어 있다는 것을 기억하세요.

위 내용은 웹표준을 이용한 웹사이트 구축 7일차: CSS 시작하기 관련 내용은 PHP 중국어 홈페이지를 참고해주세요. (www.php.cn)!