자신_HTML/Xhtml_웹페이지 제작별로 구성된 DIV의 일반적으로 사용되는 속성 종합 목록

1. 속성 목록

코드 복사

코드는 다음과 같습니다.

color: #999999 텍스트 색상
font-family: 노래 스타일 글꼴
font-size: 10pt 텍스트 크기
font-style:itelic 텍스트 기울임꼴 스타일
font-variant:small- caps small Font
letter-spacing: 1pt 텍스트 간격
line-height: 200% 줄 높이 설정
font-weight:bold Textbold
vertical-align:sub Subscript
vertical -align :super Superscript
text-dresseration:line-through 줄을 나누려면 ?h 추가
text-design:overline 윗줄 추가
text-꾸밈:underline 밑줄 추가
text-꾸밈: 없음 ?hExcept 결론 연결용
text-transform: capitalize 첫 번째 단어는 대문자로
text-transform: 대문자 영어 대문자
text-transform: 소문자 영어 쓰기
text-align:right Text * right- 정렬
text-align:왼쪽 텍스트*왼쪽 정렬
text-align:가운데 텍스트 가운데 정렬
CSS 페이지에 적용할 수 있는 몇 가지 간단한 텍스트 효과입니다.
배경
배경색: 검정색 배경색
배경이미지: url(image/bg.gif) 배경 이미지
배경첨부: 고정 고정배경
배경반복: 반복 반복 배열 - 웹페이지 기본
background-repeat: no-repeat 비반복 배열
background-repeat:peat-x는 x축에서 배열을 반복합니다
background-repeat:repeat-y는 배열을 반복합니다. y축
배경 위치: 90% 90% 배경 이미지의 x 및 y축 위치
링크
A 모든 하이퍼링크
A:link 하이퍼링크 텍스트 형식
A :visited 탐색된 링크 텍스트 형식
A:active 연결 형식 누르기
A:hover 마우스를 연결
테두리
border-top: 1px 검정색 상단 프레임
border-bottom으로 이동 : 1px 실선 #6699cc 하단 프레임
border-left : 1px 실선 #6699cc 왼쪽 테두리
border-right : 1px 실선 #6699cc 오른쪽 테두리
border-1px 실선 #6699cc 4개의 테두리
점선
<br>실선<br><textarea style="border:1px solid pink"> 텍스트의 줄 높이와 동일, 즉 line- 높이와 높이의 값이 동일하면 충분합니다. 마지막으로 div에 오버플로: 숨김을 지정하여 초과된 부분을 숨깁니다. <br><br>

2. 공통 속성

코드 복사코드 다음과 같습니다.

1. 높이: DIV의 높이를 설정합니다. 너비: DIV의 너비를 설정합니다.
2. Margin: DIV의 확장된 여백(상위 컨테이너까지의 거리)을 설정하는 데 사용됩니다. margin: 뒤에는 상위 컨테이너의 위쪽, 오른쪽, 아래쪽 및 왼쪽으로부터 각각 4개의 거리가 옵니다. margin: [top][right][bottom][left]
별도로 설정할 수 있습니다: margin-left: 거리 margin-right: 부모 컨테이너의 오른쪽 테두리까지의 거리 margin-top: 부모 컨테이너의 아래쪽 테두리까지의 거리 상위 컨테이너.
3. 패딩: DIV의 내부 여백(내부 요소와 DIV 경계 사이의 거리)을 설정하는 데 사용됩니다. padding: 그 뒤에 상위 컨테이너의 위쪽, 오른쪽, 아래쪽 및 왼쪽으로부터의 거리인 4개의 거리가 옵니다. margin: [top][right][bottom][left]: 거리는 다음과 같이 설정됩니다. 패딩은 자체 너비 및 높이 내(IE7 및 FF)에 포함되지 않습니다. 예를 들어 DIV의 너비가 100px로 설정되고 padding-left가 50px로 설정된 경우 DIV의 너비는 150px입니다. 페이지에 표시됩니다.
4. 테두리: DIV 표시의 테두리 스타일을 설정합니다. 표시 속성을 설정합니다. 해당 값에는 블록 및 없음이 포함되며, 부동 소수점: 페이지에서 DIV의 흐름 방향을 설정합니다. 해당 값에는 왼쪽(왼쪽에 표시됨), 오른쪽(오른쪽에 표시됨) 및 없음이 포함됩니다.
DIV의 배경 스타일을 설정하면 배경 색상, 배경 이미지, 타일링 방법 및 기타 스타일을 직접 따를 수 있습니다. 다음 속성을 사용하여 별도로 설정할 수도 있습니다.
Background-color: 배경색을 설정합니다. background-attachment: 배경 이미지의 첨부 방법, 해당 값은 스크롤 및 고정입니다. background-image: 기존 배경 이미지를 지정합니다. 배경 이미지의 타일링 방법. 해당 값에는 no-repeat(타일링되지 않음), 반복(두 방향으로 타일링됨),peat-x(가로 타일링),repeat-y(세로 타일링)가 포함됩니다. background-position: DIV에서 배경 위치를 지정합니다. 그 값은 상단 하단 왼쪽 오른쪽의 다양한 조합을 갖습니다. 좌표를 사용하여 특정 위치를 지정할 수도 있습니다.
5. 위치: DIV의 위치 지정 방법을 설정합니다. 위치에는 정적, 고정, 상대 및 절대의 네 가지 속성이 있습니다. 일반적으로 상대적인 것과 절대적인 것이 사용됩니다. 정적으로 지정된 경우 DIV는 HTML 규칙을 따릅니다. 상대 항목으로 지정된 경우 위쪽, 왼쪽, 오른쪽 및 아래쪽을 사용하여 페이지에서 DIV의 오프셋(자체 오프셋을 기준으로)을 설정할 수 있습니다. 현재 레이어는 사용할 수 없습니다. 절대값으로 지정하면 위쪽, 왼쪽, 오른쪽 및 아래쪽을 사용하여 DIV를 가장 가까운 상위 요소에 절대 위치로 지정할 수 있습니다. IE7과 FF의 DIV는 화면을 기준으로 고정되어 있습니다. 변경 사항이 없으며 IE6에서는 효과가 없습니다(이유는 모르겠습니다).
6. DIV의 텍스트 스타일을 지정합니다. 그 뒤에는 다양한 텍스트 스타일이 올 수 있습니다. 글꼴 패밀리: 사용할 글꼴 이름을 설정합니다. 글꼴 무게: 텍스트의 두께를 지정합니다. 해당 값에는 굵은 글꼴, 라이터 등이 포함됩니다. 텍스트 스타일을 지정합니다. 값에는 기울임꼴 일반 경사 등이 포함됩니다. color: 텍스트 색상을 지정합니다. -데코레이터: 텍스트 장식에 사용됩니다. 해당 값에는 밑줄 없음 및 깜박임 조합이 포함됩니다. 텍스트 들여쓰기: 텍스트의 대소문자를 설정합니다. 해당 값에는 소문자 대문자 대문자(첫 글자를 대문자로 표시)가 포함됩니다. 없음 방향: 콘텐츠의 흐름 방향. 해당 값에는 ltr(왼쪽에서 오른쪽으로), rtl(오른쪽에서 왼쪽으로)이 포함됩니다. line-height: 텍스트의 줄 높이를 지정합니다. Word-spacing: 단어 간격.
7. 오버플로: 콘텐츠 오버플로 제어. 해당 값에는 스크롤(스크롤 막대가 항상 표시됨), 표시(스크롤 막대가 표시되지 않지만 초과 부분이 표시됨), 자동(콘텐츠가 표시될 때 스크롤 막대가 표시됨)이 포함됩니다. 초과) 및 숨김(콘텐츠가 초과되면 스크롤 막대가 표시됨)이 있습니다.

3. 일부 특수 효과:

1. z-index: DIV의 스택 순서를 설정합니다. z-index 속성을 사용할 때 위치는 절대값으로 지정되어야 합니다.

2. 커서: DIV의 커서 스타일을 설정합니다.

3. 클립: 클리핑 사각형을 설정합니다. Clip:Rect(top right lower left); 상, 하, 좌, 우 사이의 거리를 설정하는데, 이때 위치는 절대값으로 지정해야 합니다.

4. 불투명도 투명도 필터:alpha(opacity=value) 예: filter:alpha(opacity=50);opacity:0.5;

4.

절대 위치와 상대 위치(위치)
절대 위치:

위치 속성이 네티즌 행복의 열쇠가 될 것입니다:

H4 { 위치: 절대; 왼쪽: 100px; 상단: 43px }

이 CSS 규칙을 사용하면 브라우저는 브라우저 픽셀의 왼쪽에서 정확히 100개의 아이콘의 시작 위치를 설정할 수 있습니다. 상단에서 43픽셀입니다. 여기에서는 왼쪽과 위쪽만 설정됩니다. 즉, 텍스트는 왼쪽에서 오른쪽으로, 위쪽에서 아래쪽으로 브라우저 창에 입력됩니다.

left 및 top 속성은 매우 직관적입니다. Left(왼쪽)는 브라우저 창 왼쪽으로부터의 거리를 설정하고, top(상단)은 브라우저 창 상단으로부터의 거리를 설정합니다. 이러한 거리를 설정할 때 배운 다양한 각도 단위나 척도 값을 사용할 수 있습니다. 스케일 값을 사용할 때 스케일 값은 상위 피처의 치수를 기준으로 합니다.

무엇을 타겟팅할 수 있나요? 아무것! 단락, 단어, GIF 및 JPEG 이미지, QUICKTIME 동영상 등.

상대 위치 지정:

절대 위치 지정을 사용하면 페이지에 있는 다른 요소의 위치 지정 설정에 관계없이 페이지의 독립적인 위치에 요소를 정확하게 배치할 수 있습니다. 상대 위치 지정은 위치를 지정하는 기능의 위치가 파일에서 할당된 위치를 기준으로 함을 의미합니다. 예:

I { position:relative; left: 40px; top: 10px }

상대 위치 지정의 핵심은 위치 지정 요소의 위치가 일반적으로 있어야 하는 위치를 기준으로 한다는 것입니다. . 상대 위치 지정 장치는 일반 정적 위치 지정 장치의 줄 사이에 나타나며 정적 위치 지정 장치와 완전히 분리되지 않은 상태로 위치 지정됩니다. 상대 위치 지정 사용을 중지하면 텍스트 표시 위치가 정상으로 돌아갑니다. 상대 위치 지정을 사용할 때는 주의하십시오. 그렇지 않으면 페이지가 쉽게 복잡해질 수 있습니다.

상대 위치 지정 및 절대 위치 지정 외에도 정적 매개변수 값을 사용할 수도 있습니다. Static은 position 속성의 기본값입니다. 사용법은 일반 HTML의 위치 지정 방법과 동일하며 특별한 위치 지정 설정을 추가할 수 없습니다. 즉, margin 속성이나 float 속성을 사용하여 셀을 부동시키는 것 외에는 다른 어떤 것도 셀 위치 지정에 영향을 줄 수 없습니다.


포지셔닝 유닛 제어(너비, 높이, 가시성)
포지셔닝 유닛의 왼쪽 상단 위치를 제어하는 ​​것 외에도 너비와 높이를 제어할 수도 있습니다. 장치의 높이 및 페이지의 장치 가시성입니다.

너비: 배치된 요소는 페이지에 표시될 때 여전히 왼쪽에서 오른쪽으로 표시됩니다. width 속성을 사용하여 오른쪽 문자 흐름에 대한 제한을 설정할 수 있습니다. 즉, 요소의 너비를 설정할 수 있습니다.

DIV { 위치: 절대; 왼쪽: 40px; 너비: 150px }

브라우저는 이 규칙을 수신하면 규칙에 지정된 효과에 따라 텍스트를 표시합니다. , 단락의 최대 가로 크기를 150픽셀로 제한합니다.

너비 속성은 절대 위치에 있는 지형지물에만 적용됩니다. 우리가 배운 길이 단위를 사용하거나 상위 기능에 상대적인 배율 값을 사용하여 너비를 설정할 수 있습니다. IE 4에서는 이 속성을 이미지에도 사용할 수 있습니다. 너비 설정을 통해 이미지를 인위적으로 넓히거나 압축할 수 있습니다.

높이: 이론적으로 높이는 너비와 유사하게 설정되어야 하지만 세로 방향은 다음과 같습니다.

DIV { position: left: 200px height: 150px; }

여기서는 일부 브라우저가 높이 속성을 지원하지 않기 때문에 "이론적으로"를 사용합니다.

가시성: CSS를 사용하면 요소가 페이지에 표시되지 않도록 숨길 수 있습니다. 이 속성은 발견된 지형지물과 발견되지 않은 지형지물 모두에 적용됩니다.

H4 { visible: hide }

옵션:

visible은 기능을 표시합니다

hidden은 기능을 숨깁니다

inherit 상위 기능의 가시성 설정을 상속합니다.

inherit 값이 기본값입니다. 이렇게 하면 셀이 상위 셀의 가시성을 상속하게 됩니다. 따라서 단락이 숨겨져 있으면 여기에 포함된 인라인 셀도 숨겨집니다. 이 상속은 명시적으로 지정된 가시성을 통해 재정의될 수 있습니다. 예를 들어, 섹션 내의 EM 셀이 표시되도록 지정되고 해당 섹션이 숨겨지면 해당 섹션 내의 다른 모든 콘텐츠는 사라지고 EM 셀의 텍스트만 표시됩니다.

요소가 숨겨져도 브라우저 창의 원래 공간을 차지합니다. 따라서 숨겨진 이미지 주위에 텍스트를 배치하면 텍스트가 빈 공간을 둘러싸는 것처럼 나타납니다. 이번 소식

이 속성은 언어를 작성할 때나 동적 HTML을 사용할 때 유용합니다. 예를 들어 특정 단락이나 이미지를 마우스로 가리킬 때만 표시되도록 할 수 있습니다.


단위 수준(Z-색인)
z-index 속성은 화면에 셀을 쌓는 데 사용됩니다. 기본적으로 단위는 HTML 태그에 나타나는 순서대로 쌓입니다. 즉, 나중에 나타나는 단위는 먼저 나타나는 단위 위에 쌓입니다. Z-index 속성은 실제로 형제 단위의 스택 순서와 상위 단위를 기준으로 한 단위의 스택을 정의합니다. 초안 사양에 따르면 양의 z-index 값을 가진 단위 그룹은 상위 단위 위에 쌓이고 자체 쌓는 순서는 해당 값의 크기에 따라 결정됩니다(더 큰 값을 가진 단위는 위에 있음). 맨 위). 마찬가지로, 음수 z-index 값을 가진 유닛 그룹은 상위 유닛 아래에 쌓이고, 자체적인 쌓는 순서도 값의 크기에 따라 결정됩니다(예를 들어 더 큰 값을 가진 유닛은 상위 레이어에 있음). , 값이 -1인 유닛은 해당 유닛 위의 -2 계층에 있습니다.

이 매개변수 값에는 순수 정수를 사용하세요. Z-색인은 절대 위치 또는 상대적 위치에 있는 지형지물에 사용됩니다. 이미지의 Z-색인을 설정할 수도 있습니다. (커뮤니케이터의 경우 태그를 또는

태그 내에 포함시킨 다음 또는

에 z-index를 적용하는 것이 가장 좋습니다.)

절대적으로 배치된 단위 자르기(클립)

절대적으로 배치된 단위를 잘라낼 수 있습니다. 즉, 사용자에게 표시되는 영역을 잘라서 단위의 일부만 표시하고 나머지는 투명하게 만듭니다. . 이는 전통적인 텍스트 및 이미지 기반 웹 페이지에는 그다지 유용한 기능이 아닙니다. 그러나 이는 멀티미디어 페이지가 필요한 경우 유용합니다. 예를 들어, Netscape Communivator 4와 Internet Explorer 4는 모두 멀티미디어 페이지를 지원합니다. 이들은 문서의 스크립팅 인터페이스를 통해 장치 주변의 클리핑 영역을 동적으로 조정하여 실선 텍스트가 "교차"되고 이미지가 페이드 인되며 기타 표시 기능을 제공합니다.
clip : ret(top,right.bottom,left)

여기서 위쪽, 오른쪽, 아래쪽 및 왼쪽은 직사각형입니다. 클립 상자의 위치는 클립된 장치의 왼쪽 상단 모서리를 기준으로 한 상단, 오른쪽, 하단 및 왼쪽 가장자리의 위치입니다. 위쪽, 오른쪽, 아래쪽 및 왼쪽 값은 절대 또는 상대 길이 값(백분율 값은 아님)이거나 키워드 auto일 수 있습니다. 자동 값은 클리핑 영역의 모든 측면이 배치된 후 클리핑된 단위의 모든 콘텐츠가 이 영역을 초과하지 않음을 의미합니다.


제어 장치 오버플로(overflow)
절대 또는 상대 위치 결정 장치의 너비와 높이를 수정합니다. 지정된 영역이 요구 사항을 충족하지 못할 가능성이 높습니다. 이로 인해 장치 내용이 오버플로됩니다. 오버플로를 사용하여 브라우저가 오버플로를 처리하는 방법을 지정할 수 있습니다. 값 없음(기본값)을 사용하면 브라우저가 오버플로 내용을 표시할 수 있으므로 셀이 지정된 영역을 오버플로할 수 있습니다. 값 클립을 사용하려면 브라우저가 셀의 하단과 오른쪽에 있는 셀 내용을 잘라야 합니다. 그러면 지정된 영역을 벗어나는 셀 내용이 표시되지 않습니다. 값 스크롤을 사용하려면 브라우저가 셀의 아래쪽과 오른쪽에 있는 셀 내용을 잘라야 합니다(클립과 동일). 그러나 브라우저는 사용자가 잘린 내용을 스크롤할 수 있도록 셀에 스크롤 막대를 제공해야 합니다. 콘텐츠.