1.DIV 정의
일반적인 정의 div 예제를 분석합니다.
#샘플{ 여백: 10px 10px 10px 10px;
패딩:20px 10px 10px 20px;
테두리 상단: #CCC 2px 솔리드;
테두리 오른쪽: #CCC 2px 솔리드;
테두리-하단: #CCC 2px 솔리드;
테두리-왼쪽: #CCC 2px 솔리드;
배경: url(images/bg_poem.jpg) #FEFEFE 오른쪽 하단 반복 없음;
색상: #666;
TEXT-ALIGN: 중앙;
줄 높이: 150%;
지침은 다음과 같습니다.
레이어 이름은 샘플입니다. 페이지에서 <div id="sample">을 사용하여 이 스타일을 호출할 수 있습니다.
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"로, 스타일을 "solid" 직선으로 정의합니다. .
점선 스타일을 원할 경우 "dotted"를 사용할 수 있습니다.
BACKGROUND는 레이어의 배경을 정의합니다. 두 가지 수준으로 정의됩니다. 먼저 이미지 배경을 정의하고 "url(../images/bg_logo.gif)"을 사용하여 배경 이미지 경로를 지정합니다. 두 번째로 배경색 "#FEFEFE"를 정의합니다. "no-repeat"는 배경 이미지를 반복할 필요가 없다는 뜻인데, 가로로 반복하려면 "repeat-x", 세로로 반복하려면 "repeat-y"를 사용하고, 덮을 때까지 반복하면 됩니다. 전체 배경을 보려면 "반복"을 사용하세요. 다음 "오른쪽 하단;"은 배경 이미지가 오른쪽 하단에서 시작됨을 의미합니다. 배경 이미지가 없으면 배경색만 정의할 수 있습니다. BACKGROUND: #FEFEFE
COLOR는 이전 섹션에서 소개한 글꼴 색상을 정의하는 데 사용됩니다.
TEXT-ALIGN은 레이어의 콘텐츠 배열을 정의하는 데 사용되며, 가운데는 가운데, 왼쪽은 왼쪽, 오른쪽은 오른쪽입니다.
LINE-HEIGHT는 선 높이를 정의합니다. 150%는 높이가 표준 높이의 150%임을 의미합니다. LINE-HEIGHT:1.5 또는 LINE-HEIGHT:1.5em과 같이 쓸 수도 있습니다. 둘 다 같은 의미입니다.
WIDTH는 정의된 레이어의 너비이며, 500px와 같은 고정 값이거나 여기서 "60%"와 같은 백분율일 수 있습니다. 이 너비는 콘텐츠의 너비만을 의미하며 여백, 테두리 및 패딩은 포함되지 않습니다. 하지만 일부 브라우저에서는 이렇게 정의되어 있지 않으므로 좀 더 시도해 보아야 합니다.
2.CSS2 박스 모델
1996년 CSS1이 출시된 이후 W3C 조직은 웹 페이지의 모든 개체를 상자에 배치할 것을 권장했습니다. 디자이너는 단락, 목록, 제목, 이미지를 생성하여 이 상자의 속성을 제어할 수 있습니다. 레이어 <div>. 박스 모델은 주로 내용, 패딩, 테두리 및 여백의 네 가지 영역을 정의합니다. 위에서 설명한 샘플 레이어는 일반적인 상자입니다. 초보자의 경우 margin, background-color, background-image, padding, content, border 간의 수준과 관계, 상호 영향에 대해 혼란스러워하는 경우가 많습니다. 다음은 박스 모델의 3D 개략도입니다. 이해하고 기억하기가 더 쉽기를 바랍니다.
XHTML+CSS 레이아웃을 사용하다 보면 처음에는 익숙하지 않을 수 있는 기술이 있는데, 기존의 테이블 레이아웃과는 다른 사고방식이라고 해야 할까요. 즉, 모든 보조 이미지를 로 구현한다는 것입니다. 배경. 다음과 같은 것 :
배경: url(images/bg_poem.jpg) #FEFEFE 오른쪽 하단 반복 없음;
콘텐츠에 <img>를 직접 삽입하는 것도 가능하지만 권장되지 않습니다. 여기서 '보조 사진'이란 페이지에 표현되는 내용은 아니지만 장식, 간격, 알림용으로만 사용되는 사진을 말합니다. 예를 들어, 사진 앨범의 사진, 사진 뉴스의 사진, 위의 3D 박스 모델 사진은 모두 콘텐츠의 일부이며 <img> 요소를 사용하여 페이지에 직접 삽입할 수 있으며 나머지는 로고, 제목과 유사합니다. 그림 및 목록 접두사 그림은 모두 배경 모드 또는 기타 CSS 방법을 사용하여 표시되어야 합니다.
여기에는 2가지 이유가 있습니다:
성능을 구조와 완전히 분리하고(다른 문서: "구조에서 성능 분리 이해" 참조) CSS를 사용하여 모든 모양과 성능을 제어하여 쉽게 수정할 수 있습니다.
페이지를 더욱 유용하고 친숙하게 만드세요. 예를 들어, 시각 장애인이 스크린 리더를 사용하는 경우 배경 기술을 사용하여 구현된 사진은 소리내어 읽혀지지 않습니다.