웹 표준을 사용하여 웹사이트 구축 8일차: CSS 레이아웃 시작하기

CSS 레이아웃과 기존 테이블 레이아웃의 가장 큰 차이점은 원래 위치 지정에서는 테이블을 사용하고 테이블 간격이나 무색 투명 GIF 이미지를 사용하여 텍스트 레이아웃 섹션의 간격을 제어하지만 이제는 레이어를 사용한다는 것입니다(div). 레이어의 여백, 안쪽 여백, 테두리 및 기타 속성을 통해 섹션의 간격을 배치하고 제어합니다. 1. DIV 정의

일반적인 정의 div 예 분석:

#sample{ MARGIN: 10px 10px 10px 10px;
PADDING:20px 10px 10px 20px
BORDER-RIGHT: #CCC 2px 단색;
BORDER-BOTTOM: #CCC 2px solid;
BORDER-LEFT: #CCC 2px solid;
BORDER-TOP: #CCC 2px solid;
BACKGROUND: url(images / bg_poem.jpg) #FEFEFE 반복 없음 오른쪽 하단;
COLOR: #666;
TEXT-ALIGN: center;
LINE-HEIGHT: 150% WIDTH:60%; >

설명은 다음과 같습니다.

레이어 이름은 샘플이며 페이지에서는

이런 스타일이라고 할 수 있어요.

MARGIN은 레이어 테두리 바깥에 남겨진 여백을 말하며 페이지 여백이나 다른 레이어와의 간격을 만드는 데 사용됩니다. "10px 10px 10px 10px"는 각각 "위, 오른쪽, 아래, 왼쪽"(시계 방향)의 4개 여백을 나타냅니다. 모두 동일할 경우 "

MARGIN: 10px;

". 여백이 0인 경우 "

MARGIN: 0px;

"라고 씁니다. 참고: 값이 0인 경우 뒤에 백분율 기호가 와야 하는 RGB 색상 값 0%를 제외하고 다른 경우에는 "px" 단위를 따를 필요가 없습니다. MARGIN은 투명 요소이므로 색상을 정의할 수 없습니다.

PADDING은 레이어의 테두리와 레이어의 내용 사이의 공간을 의미합니다. 여백과 마찬가지로 상단, 오른쪽, 하단 및 왼쪽 테두리에서 콘텐츠까지의 거리를 각각 지정합니다. 모두 같다면 "

PADDING:0px

"로 축약할 수 있습니다. 왼쪽을 개별적으로 지정하려면 "PADDING-LEFT: 0px;"라고 쓰면 됩니다. PADDING은 투명 요소이므로 색상을 정의할 수 없습니다.

BORDER는 레이어의 테두리를 나타냅니다. "BORDER-RIGHT: #CCC 2px solid"는 레이어의 오른쪽 테두리 색상을 "#CCC"로, 너비를 "2px"로 정의합니다. "실선" 직선으로. 점선 스타일을 원할 경우 "dotted"를 사용할 수 있습니다.

BACKGROUND는 레이어의 배경을 정의합니다. 두 가지 수준으로 정의됩니다. 먼저 이미지 배경을 정의하고 "url(../images/bg_logo.gif)"을 사용하여 배경 이미지 경로를 지정합니다. 두 번째로 배경색 "#FEFEFE"를 정의합니다. "

no-repeat

"는 배경 이미지를 가로로 반복해야 하는 경우 "

repeat-x

"을 사용하여 수직으로 반복합니다. "

repeat-y

", 전체 배경을 반복적으로 덮으려면 "repeat"를 사용합니다. 다음 "오른쪽 하단;"은 배경 이미지가 오른쪽 하단에서 시작됨을 의미합니다. 배경 이미지가 없으면 배경색만 정의하면 됩니다.

BACKGROUND: #FEFEFE

COLOR는 이전 섹션에서 소개한 글꼴 색상을 정의하는 데 사용됩니다.

TEXT-ALIGN은 레이어의 콘텐츠 배열을 정의하는 데 사용되며 중앙은 중앙, 왼쪽은 왼쪽, 오른쪽은 오른쪽입니다.

LINE-HEIGHT는 줄 높이를 150%로 정의합니다. 이는 높이가 표준 높이의 150%임을 의미합니다.

LINE-HEIGHT:1.5

또는 LINE-HEIGHT :1.5em은 모두 같은 의미를 갖습니다.

WIDTH는 정의된 레이어의 너비로, 500px와 같은 고정 값이거나 여기서 "60%"와 같은 백분율일 수 있습니다. 이 너비는 콘텐츠의 너비만을 의미하며 여백, 테두리 및 패딩은 포함되지 않습니다. 하지만 일부 브라우저에서는 이렇게 정의되어 있지 않으므로 좀 더 시도해 보아야 합니다.

이 레이어의 실제 성능은 다음과 같습니다.

테두리가 2px 회색이고 하단에서 배경 이미지가 반복되지 않는 것을 볼 수 있습니다. 오른쪽, 콘텐츠 거리는 20픽셀이고 왼쪽 테두리는 20픽셀이고 콘텐츠는 중앙에 있으며 모든 것이 예상한 대로입니다. 호호, 보기에는 좋지 않지만 가장 기본이군요. 마스터하시면 CSS 레이아웃 기술의 절반을 배운 것입니다. 그게 전부입니다. 전혀 어렵지 않습니다! (나머지 반은 무엇인가요? 나머지 반은 레이어 간의 위치 지정입니다. 나중에 차근차근 설명하겠습니다.)

2 .CSS2 상자 모델

1996년 CSS1이 출시된 이후 W3C 조직에서는 웹 페이지의 모든 개체를 상자(box)에 배치할 것을 권장했습니다. 디자이너는 이 상자의 속성을 생성하여 제어할 수 있습니다. 정의. , 이러한 개체에는 단락, 목록, 제목, 이미지 및 레이어

가 포함됩니다. 박스 모델은 주로 내용, 패딩, 테두리 및 여백의 네 가지 영역을 정의합니다. 위에서 설명한 샘플 레이어는 일반적인 상자입니다. 초보자의 경우 margin, background-color, background-image, padding, content, border 간의 수준과 관계, 상호 영향에 대해 혼란스러워하는 경우가 많습니다. 다음은 박스 모델의 3D 개략도입니다. 이해하고 기억하기가 더 쉽기를 바랍니다.

3. 모든 보조 이미지는 배경으로 처리해야 합니다

XHTML+CSS 레이아웃을 사용할 때 처음에는 익숙하지 않은 기술이 있습니다. . 생각하는 방식이 전통적인 테이블 레이아웃과 다릅니다. 즉, 모든 보조 사진이 배경과 함께 구현됩니다. 다음과 같습니다:

BACKGROUND: url(images/bg_poem.jpg) #FEFEFE no-repeat 오른쪽 하단;

를 사용하여 콘텐츠에 직접 삽입할 수 있지만 이는 권장되지 않습니다. 여기서 '보조 사진'이란 페이지에 표현되는 내용은 아니지만 장식, 간격, 알림용으로만 사용되는 사진을 말합니다. 예를 들어 사진 앨범의 사진, 사진 뉴스의 사진, 위의 3D 상자 모델 사진은 모두 요소를 사용하여 페이지에 직접 삽입할 수 있으며, 나머지는 로고와 유사합니다. 제목 그림 및 목록 접두어는 배경 또는 기타 CSS 방법을 사용하여 표시되어야 합니다.

여기에는 두 가지 이유가 있습니다.

성능과 구조를 완전히 분리하고(다른 기사 읽기: "성능과 구조의 분리 이해" 참조) CSS를 사용하여 모든 Appearance 성능을 제어합니다. , 수정하기 쉽습니다.

페이지를 더욱 사용하기 쉽고 친근하게 만들어보세요. 예를 들어, 시각 장애인이 스크린 리더를 사용하는 경우 배경 기술을 사용하여 구현된 사진은 소리내어 읽혀지지 않습니다.

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