4장 컬러 배경을 위한 CSS-CSS 튜토리얼-php.cn

이 장의 주요 기능

이전 장의 선언 및 적용 방법과 일부 기능을 소개한 후, 이번 장에서는 공식적으로 CSS 명령을 소개하겠습니다! 이 장에는 두 가지 소개 주제가 있습니다. 첫 번째 부분에서는 색상 및 배경 속성의 CSS를 소개합니다. 주요 기능은 요소의 전경색, 배경색 및 배경 그래픽과 같은 속성을 설정하는 것입니다. CSS의 색상 및 배경 속성 소개의 일부는 배치된 요소의 위치를 제어하는 데 사용되는 CSS 지침입니다.

CＳＳＳ 색상 배경 명령

: 모든 요소 가능한 값: 색상을 설정하려면 1장의 색상 사용 관련 지침을 참조하세요. 기본값: 브라우저에 따라 다름 상속: 일반적인 예가 있습니다: SPAN { color : BLUE } 동축 예: background-color 배경색 설정 지원: IE4, NC4 적용 가능 : 모든 요소 가능한 값: 색상을 설정하려면 1장의 색상 사용 관련 지침을 참조하세요.transparent 상위 요소(색상 또는 패턴)의 배경을 투명하게 만듭니다. 기본값: transparent 상속: 없음 일반적인 예: BODY { background-color : BLUE } 동축 예: 배경 그래픽 설정 지원: IE4, NC4 적용 가능: 모든 요소 가능한 값: URL은 1장의 URL 표현 관련 지침을 참조하세요. None 배경 패턴을 사용하지 마세요. 기본값: 투명 상속 속성: 없음 일반 예: BODY { background-image : URL("http://yourweb/path/file_name ") } 동축 예: background-repeat 배경 반복 설정 지원: IE4, NC4 적용 가능: 모든 요소 가능한 값 :peat 배경 그래픽을 반복하여 페이지를 채웁니다.repeat-x 배경 그래픽을 가로 방향으로 반복합니다.peat-y 배경 그래픽을 세로 방향으로 반복합니다.no-repeat는 배경 그래픽을 반복해서 표시하지 않습니다.기본값:repeat 상속:None 일반 예: BODY { background-repeat :peat-x } 동축 예: background-attachment 배경 첨부 설정 지원: IE4, NC4 적용 가능: 모든 요소 가능한 값: 배경 그래픽 스크롤 스크롤로 스크롤 고정 배경 그래픽 스크롤로 스크롤(워터마크) 기본값: 스크롤 상속: 일반 예 없음: BODY { background-attachment : 고정 } 동축 예: 배경 위치 설정 배경 위치 지원: IE4, NC4 적용 가능: 블록 요소 가능한 값: X% Y% 그래픽의 X% Y% 지점을 X% Y% 위치 왼쪽, 오른쪽, 오른쪽 배경 그래픽, 위쪽 배경 그래픽 위쪽, 아래쪽, 배경 그래픽 아래쪽 기본값: 0% 0% 상속: 없음 일반 예: BODY { background- 위치: 100% 50% } 동축 예: < BODY style="Background- position:100% 50%"> background 배경 속성의 포괄적인 설정 지원: IE3, IE4, NC4 적용 가능: 모든 요소 가능한 값: background-color는 배경색을 설정합니다. 배경 그래픽을 설정합니다. background -repeat 배경을 반복하도록 설정합니다. background-attachment 배경 첨부를 설정합니다. background-position 배경 위치를 설정합니다. 기본값: 없음 상속: 없음 일반 예: BODY { BLUE url(image/gif) Repeat-x 고정 가운데 } 동축 예 ：

위치 배치 명령

float 부동 속성 설정(주로 텍스트가 이미지를 둘러쌀 때 사용됨) 지원: IE4, NC4 적용 대상: 블록 요소 또는 그래픽 가능한 값: 왼쪽 요소를 왼쪽으로, 오른쪽 주위의 텍스트를 오른쪽으로, 오른쪽 요소를 주위의 텍스트 왼쪽 없음 기본 메소드에 기본값을 표시합니다: none 상속: None 일반 예: DIV { float : right } 동축 예:

clear 지우기 속성을 설정합니다(허용 여부 설정). (플로팅 요소 존재) 지원: IE4 적용 가능: 블록 요소 또는 그래픽 가능한 값: 둘 다 양쪽에 플로팅 요소가 있는 경우 해당 요소는 왼쪽 플로팅 요소 아래로 이동합니다. 왼쪽에 플로팅 요소가 있는 경우 요소는 왼쪽으로 이동합니다. be move under the float element right 오른쪽에 플로팅 요소가 있으면 해당 요소는 플로팅 요소 아래로 이동합니다. none 기본 메소드에서 기본값을 표시합니다: none 상속: None 일반적인 예: DIV {clear : right } Coaxis 예:

width 너비 설정 지원: IE4, NC4 적용 가능: 블록 요소 또는 그래픽 가능한 값: 길이 단위, 1장의 기본 단위 관련 지침을 참조하세요. 상위 요소에 따른 백분율입니다. 너비는 기본입니다. auto는 고정된 비율로 크기를 자동으로 변경합니다. 기본값: auto 상속: 없음 일반 예: DIV { width : 300pt } 동축 예:

height 높이 설정 지원: IE4 및 NC4는 블록 요소 또는 그래픽에 적용 가능합니다. 가능한 값: 길이 단위, 1장의 기본 단위 관련 설명을 참조하세요. 백분율 , 상위 요소의 너비에 따라 auto는 미리 설정된 크기를 고정된 비율로 자동 변경합니다. 설정 값: auto 상속: 없음 일반 예: DIV { height : 300pt } 동축 예:

position 위치 설정 지원: IE4, NC4 적용 가능: 블록 요소 가능한 값: 절대값은 상위 요소를 기반으로 하며 특정 위치에 배치됩니다. 상대 요소는 인접 요소를 기반으로 하며 특정 위치에 배치됩니다. 기본값: 절대 상속: 없음 일반 예: DIV { position : static } Coaxis 예:

top 상단 위치 설정 지원 : IE4, NC4 적용 가능: 블록 요소 가능한 값: 길이 단위, 1장의 기본 단위 관련 설명을 참조하세요. %는 상위 요소의 너비에 따라 자동으로 표시됩니다. 일반적인 방법: 자동 상속: 없음 일반 예: DIV { top: 30pt } 동축 예: < DIV style="top:30pt">left 왼쪽 끝 위치 설정 지원: IE4, NC4 적용 가능: 블록 요소 값: <길이> 길이 단위, 1장의 <백분율>백분율에 대한 관련 지침을 참조하세요. 상위 요소의 너비에 따라 자동으로 기본값을 표시합니다. 자동 상속: 없음 일반 예: DIV { left : 30pt } 동축 예:

clip 자르기 설정(특정 영역의 모양 및 크기 설정, 영역 외부는 투명) 지원: IE4, NC4 적용 가능: 블록 요소 가능한 값: 각형(상단, 오른쪽, 하단, 왼쪽) 직사각형의 상단, 오른쪽, 하단 및 왼쪽의 길이를 설정합니다. 그러면 자동으로 비교됩니다. 반대쪽 변의 길이는 일반적으로 ect(0, 길이, length, 0) ret(0, 0, length, length)로 쓸 수 없습니다. 네 가지 값을 모두 "auto"로 바꿔서 일반적인 방법으로 기본값을 표시할 수 있습니다: auto 상속: 없음 일반적인 예: DIV {clip : ret(0,100px,50px,0) } 동축 예:

overflow Set Overflow 처리(요소 내용이 표시될 때 표시 방법 제어) 요소의 크기를 초과함) 지원: IE4 적용 가능: 블록 요소 가능한 값: 보이는 요소는 설정된 크기에 따라 표시되지 않지만 숨겨진 모든 콘텐츠를 볼 수 있습니다. 요소의 설정된 크기를 초과하면 부분이 숨겨지고 표시되지 않습니다. 스크롤 필요한 경우 사용자가 모든 콘텐츠를 볼 수 있도록 스크롤이 나타납니다. 자동 기본 방식으로 표시 기본값: auto 상속: 없음 일반 예: DIV {overflow: 스크롤 } Axis 예와 동일:

visibility 가시성 설정 지원: IE4, NC4 적용 가능: 모든 요소 가능한 값: visible 요소가 표시되도록 설정 숨김 요소가 표시되지 않도록 설정하지만 여전히 점유 공간 상속은 가시성에 따라 기본값을 결정합니다. 상위 요소: 상속 상속: 없음 일반 예: DIV { visible : hide } 동축 예:

z-index Z 축 매개변수 설정(3차원 공간) 지원: IE4, NC4 적용 가능: 블록 요소 가능 값: 십진수 값, 큰 값을 가진 요소는 작은 값을 가진 요소 위에 나타납니다. auto 요소 위치가 반복되면 원래 코드에서는 뒤에 쓰여진 요소가 쓰여진 요소 위에 나타납니다 기본값: auto 상속: 없음 일반 예: DIV { z-index : 3 } 동축 예: