CSS 튜토리얼 (6) DW4의 CSS 속성에 대한 자세한 설명

Dreamweaver4의 CSS 스타일에는 W3C 사양에 정의된 모든 CSS1 속성이 포함되어 있습니다. Dreamweaver4는 이러한 속성을 유형, 배경, 블록, 상자 및 테두리, 목록(List), 위치 지정(Positioning) 및 확장(Extensions)으로 나눕니다. 아래 그림과 같이 8개 부분에 대해 자세히 설명하겠습니다.

1. 유형

유형 패널은 주로 텍스트 글꼴, 크기, 색상, 효과 등 기본 스타일을 설정하는 데 사용됩니다. 설정 시 변경이 필요한 속성만 설정하고, 변경할 필요가 없는 속성은 비워둡니다.

참고: 속성 이름에 *가 있는 것은 문서 편집 시 스타일 효과를 표시할 수 없다는 의미입니다. 효과를 보려면 브라우저에서 열어야 합니다.

글꼴: 글꼴 모음을 설정합니다. 글꼴 모음이란 무엇입니까? 텍스트에 여러 글꼴을 설정하는 것을 의미합니다. 첫 번째 글꼴로 표시할 수 없는 텍스트가 있는 경우 시리즈의 두 번째 글꼴 또는 후속 글꼴이 자동으로 표시됩니다. 해당 CSS 속성은 "font-family"입니다.

참고: Dreamweaver4에는 6가지 영어 글꼴 시리즈가 내장되어 있습니다. 일반적으로 더 보기 좋은 "Verdana, Arial, Helvetica, sans-serif" 시리즈의 영어 글꼴을 사용합니다. 이러한 글꼴 모음을 사용하지 않는 경우 글꼴 시리즈를 직접 편집해야 합니다. 드롭다운 상자 하단의 "글꼴 목록 편집"을 통해 새 글꼴 모음을 생성하거나 글꼴 이름을 직접 작성할 수 있습니다. 드롭다운 상자에서 쉼표로 구분하여 수동으로 입력합니다. 중국어 웹페이지의 기본 글꼴은 송나라입니다. 일반적으로 공백으로 두고 글꼴을 선택하지 마세요.

크기: 텍스트의 크기를 정의합니다. 숫자와 측정 단위를 선택하여 특정 글꼴 크기를 선택하거나 상대적인 글꼴 크기를 선택할 수 있습니다. 브라우저에서 텍스트가 왜곡되지 않도록 픽셀을 단위로 사용하는 것이 가장 좋습니다. 일반적으로 작은 글꼴에는 비교적 표준적인 12px가 사용됩니다. 해당 CSS 속성은 "font-size"입니다.

참고: CSS의 길이 단위는 절대 길이 단위와 상대 길이 단위로 구분됩니다. 일반적으로 우리가 일반적으로 사용하는 절대 길이 단위는 다음과 같습니다. px: (픽셀) 길이는 해상도에 따라 결정됩니다. 디스플레이.

pt: (글꼴 크기) Windows 시스템에서 정의한 글꼴 크기에 따라 길이를 결정합니다.

mm, cn, in: (밀리미터, 센티미터, 인치) 표시된 실제 크기를 기준으로 길이를 결정합니다. 이러한 단위는 모니터의 해상도가 변경되더라도 변경되지 않습니다.

상대 길이 단위는 다음과 같습니다.

em: 현재 텍스트의 크기. 예를 들어, {font-size:2em}은 텍스트 크기가 원래 크기의 두 배라는 의미입니다.

예: 현재 문자 "x"의 높이는 일반적으로 글꼴 크기의 절반입니다.

%: 현재 텍스트의 백분율로 크기를 정의합니다. 예를 들어, {font-size:300%}는 텍스트 크기가 원래 크기의 3배임을 의미합니다.

소형, 대형: 현재 크기보다 한 단계 작거나 한 단계 큰 크기를 나타냅니다. 스타일: 글꼴 스타일을 Normal, Italic 또는 Oblique로 정의합니다. Italic 및 Oblique는 기울임꼴 글꼴입니다. 기본 설정은 보통입니다. 해당 CSS 속성은 "font-style"입니다.

참고: Italic과 Oblique는 모두 기울임꼴 글꼴입니다. 차이점은 Italic은 italic 글꼴이고 Oblique는 italic 글꼴인 경우 Oblique를 사용해야 한다는 것입니다.

줄 높이: 텍스트가 위치한 줄의 줄 높이를 설정합니다. 기본값은 보통이지만 정확한 값을 직접 입력하고 측정 단위를 선택할 수도 있습니다. 보다 직관적인 작성 방법은 백분율을 사용하는 것입니다. 예를 들어 140%는 줄 높이가 텍스트 크기의 1.4배와 같다는 의미입니다. 해당 CSS 속성은 "line-height"입니다.

데코레이션: 텍스트에 밑줄, 윗줄, 줄바꿈, 깜박임을 추가합니다. 이러한 효과는 동시에 존재할 수 있으므로 효과 앞의 확인란을 선택하면 됩니다. 해당 CSS 속성은 "text-design"입니다.

참고: 링크의 기본 설정은 밑줄입니다. 없음을 선택하면 밑줄을 제거할 수 있습니다. 블링크(플래시 효과)는 NC 브라우저에서만 볼 수 있습니다.

굵기: 글꼴의 굵은 텍스트의 포인트 크기를 지정합니다. Normal은 400에 해당하고 Bold는 700에 해당합니다. 굵은 문자의 경우 일반적으로 굵은 글씨가 사용됩니다. 해당 CSS 속성은 "font-weight"입니다.

변형: 글꼴의 변형을 선택할 수 있습니다. 작은 대문자를 선택하면 이 스타일 영역의 모든 문자가 대문자로 표시됩니다. 해당 CSS 속성은 "font-variant"입니다.

대소문자: 선택 항목에 있는 각 단어의 첫 글자를 대문자로 변환하거나 단어를 모두 대문자 또는 모두 소문자로 만듭니다. 매개변수: capitalize(단어의 첫 글자를 대문자로 표시), uppercase(대문자로 변환), lowercase(소문자로 변환), none(변환하지 않음). 해당 CSS 속성은 "text-transform"입니다.

색상: 텍스트 색상을 정의합니다. 해당 CSS 속성은 "color"입니다.

참고: CSS에서 색상 값을 나타내는 세 가지 방법이 있습니다.

l #RRGGBB 형식은 빨간색, 녹색, 파란색 색상 값의 조합이며 각 색상의 값은 "00 – FF"는 두 자리 16진수 양의 정수입니다. 예를 들어 #FF0000은 빨간색을 의미하고 #FFFF00은 노란색을 의미합니다.

l rgb(R,G,B) 형식, RGB는 0~255 범위의 세 가지 색상 값입니다. 예: rgb(255,0,0)은 빨간색을 의미하고 rgb(255,255,0) )는 노란색을 의미합니다.

l 색상 이름을 사용하세요. CSS는 이미 정의된 색상 이름을 사용할 수 있습니다. 예를 들어 빨간색은 빨간색을 의미하고 노란색은 노란색을 의미합니다.

2. 배경

배경 패널은 주로 배경색, 배경 이미지, 배경 이미지 제어 등 요소의 배경을 설정하는 데 사용됩니다. 일반적으로 BODY(페이지), TABLE(테이블), p(영역)의 설정입니다.

배경색상: 요소의 배경색을 설정합니다. 해당 CSS 속성은 "배경색"입니다.

배경 이미지: 요소의 배경 이미지를 설정합니다. 해당 CSS 속성은 "배경 이미지"입니다.

반복: 배경 이미지의 반복 여부와 방식을 결정합니다. 반복 없음: 요소 시작 부분에 이미지를 한 번 표시합니다. 반복: 요소의 배경 부분에 걸쳐 이미지를 가로 및 세로로 타일링합니다. Repeat-x 및 Repeat-y: 각각 가로 및 세로 방향으로 반복합니다. 기본값은 반복입니다. 해당 CSS 속성은 "Background-repeat"입니다.

참고: 요소의 BODY를 정의하면 페이지 배경 반복 여부를 제어할 수 있습니다.

첨부파일: 배경 이미지 또는 콘텐츠와 함께 스크롤되는 현상을 수정했습니다. 고정 매개변수는 고정된 배경을 나타내고, 스크롤은 콘텐츠와 함께 스크롤되는 배경을 나타냅니다. 해당 CSS 속성은 "Background-attachment"입니다.

참고: 요소의 BODY를 정의하면 페이지 배경을 고정할 수 있습니다.

가로: 배경 이미지의 가로 위치를 지정합니다. 왼쪽(왼쪽), 가운데(가운데), 오른쪽(오른쪽)을 지정할 수 있습니다. 숫자 값도 지정할 수 있습니다. 예를 들어 20px는 배경이 왼쪽에서 20픽셀 떨어져 있음을 의미합니다. 해당 CSS 속성은 "배경 위치"입니다.

세로: 배경 이미지의 세로 위치를 지정합니다. 상단(top), 중앙(center), 하단(bottom)으로 지정할 수 있으며 숫자 값도 지정할 수 있습니다. 해당 CSS 속성은 "배경 위치"입니다.

참고: 가로 위치와 세로 위치는 동일한 CSS 속성을 사용하므로 설정 시 주의하세요.

3. 블록

블록 패널은 주로 개체 텍스트의 텍스트 간격, 정렬, 위 첨자, 아래 첨자, 배열, 첫 줄 들여쓰기 등을 설정하는 데 사용됩니다.

단어 간격: 단어 사이의 간격을 설정합니다. 음수 값을 설정할 수 있습니다. 해당 CSS 속성은 "단어 간격"입니다.

참고: 일반적으로 IE는 이 속성을 지원하지 않으며 MAC 플랫폼의 IE4+에서만 사용할 수 있습니다.

문자 간격: 문자 사이의 간격을 설정합니다. 음수 값을 지정할 수 있습니다. 한자도 문자이기 때문에 이 매개변수를 사용하면 문자 사이의 간격을 설정할 수 있습니다. 해당 CSS 속성은 "letter-spacing"입니다.

세로 정렬: 요소의 세로 정렬을 지정합니다. sub(아래 첨자), super(위 첨자), top(위 첨자 정렬), middle(가운데 정렬), Bottom(아래 첨자 정렬) 등을 지정할 수 있습니다. 해당 CSS 속성은 "vertical-align"입니다.

텍스트 정렬: 텍스트 정렬을 설정합니다. 왼쪽(왼쪽 정렬), 오른쪽(오른쪽 정렬), 가운데(가운데), 양쪽 끝 정렬(양쪽 끝 정렬). 해당 CSS 속성은 "text-align"입니다.

텍스트 들여쓰기: 텍스트 첫 줄의 들여쓰기 값을 설정합니다. 음수 값은 텍스트의 첫 번째 줄을 바깥쪽으로 당깁니다. 각 단락 앞에 두 개의 공백을 두려면 2em으로 설정하십시오. 왜냐하면 em은 현재 글꼴 크기이고 2em은 두 문자의 크기이기 때문입니다. 해당 CSS 속성은 "text-indent"입니다.

공백: 요소 내 공백 문자 처리 방법을 설정합니다. 선택할 수 있는 세 가지 옵션이 있습니다. Normal은 모든 공백 문자를 압축합니다. Pre는 이러한 공백 문자를 pre 태그의 텍스트처럼 처리합니다(즉, 공백, 탭, 캐리지 리턴 등을 포함한 모든 공백 문자가 압축됩니다). ) 예약됨) Nowrap은 텍스트가 br 태그를 만날 때만 줄 바꿈되도록 지정합니다. 해당 CSS 속성은 "white-space"입니다.
4. Box

Box 패널은 주로 객체의 경계, 간격, 높이, 너비, 플로팅 방식을 설정합니다.

너비: 요소의 너비를 정의합니다. 해당 CSS 속성은 "width"입니다.

높이: 요소의 높이를 정의합니다. 해당 CSS 속성은 "height"입니다.

참고: 너비와 높이로 정의된 개체는 대부분 그림, 표, 레이어 등입니다.

부동: 요소가 부동하는 방식을 정의합니다. 왼쪽은 객체가 왼쪽에 떠 있다는 것을 의미하고, 오른쪽은 객체가 오른쪽에 떠 있다는 것을 의미하며, 없음은 객체가 부동하지 않는다는 것을 의미합니다. 해당 CSS 속성은 "float"입니다.

클리어: 요소의 부동은 허용되지 않습니다. left는 부동 객체가 왼쪽에 허용되지 않음을 의미하고, right는 부동 객체가 오른쪽에 허용되지 않음을 의미하며, none은 부동 객체가 양쪽에서 허용되지 않음을 의미하며 둘 다 부동 객체를 가질 수 없음을 의미합니다. 해당 CSS 속성은 "clear"입니다.

패딩: 요소 콘텐츠와 테두리 사이의 공간을 정의합니다(요소에 테두리가 없는 경우 페이지의 여백을 나타냅니다). 위쪽(상단 패딩), 오른쪽(오른쪽 패딩), 아래쪽(하단 패딩), 왼쪽(왼쪽 패딩)의 값을 각각 설정할 수 있습니다. 해당 CSS 속성은 "padding; padding-top; padding-right; padding-bottom; padding-left"입니다.

여백: 요소의 테두리와 다른 요소 사이의 거리를 정의합니다(경계가 없는 경우 콘텐츠 사이의 거리를 의미합니다). 위쪽(위쪽 테두리), 오른쪽(오른쪽 테두리), 아래쪽(아래쪽 테두리), 왼쪽(왼쪽 테두리)의 값을 각각 설정할 수 있습니다. 해당 CSS 속성은 "margin; margin-top; margin-right; margin-bottom; margin-left"입니다.

패딩, 테두리, 테두리의 관계도는 다음과 같습니다.

5. 테두리

테두리 패널에서는 개체 테두리의 너비, 색상, 스타일을 설정할 수 있습니다.

너비: 요소 측면의 너비를 설정합니다. Top(상단 너비), Right(오른쪽 너비), Bottom(하단 너비), Left(왼쪽 너비)의 값을 각각 설정할 수 있습니다. 해당 CSS 속성은 "border; border-top; border-right; border-bottom; border-left"입니다.

색상: 테두리 색상을 설정합니다. 각 가장자리의 색상을 개별적으로 설정할 수 있습니다. 해당 CSS 속성은 "border-color; border-top-color; border-right-color; border-bottom-color; border-left-color"입니다.

참고: 요소가 3차원으로 보이도록 다양한 색상을 설정하여 밝고 어두운 가장자리를 만들 수 있습니다.

스타일: 테두리 스타일을 설정합니다. 없음(경계 없음), 점선(점선), 점선(점선), 실선(실선), 이중선(이중선), 홈(홈), 능선(볼록한 홈), 삽입(오목한 모서리)으로 설정 가능 , 아웃세트(볼록한 가장자리) 및 기타 테두리 스타일. 해당 CSS 속성은 "border-style"입니다.

참고: 점선(점선) 및 점선(점선)은 IE5.5 이상 또는 MAC 플랫폼에서 지원되어야 하며, 그렇지 않으면 효과가 실선으로 표시됩니다.

6. 목록

목록 패널에서는 목록 항목 스타일, 목록 항목 이미지, 위치를 설정할 수 있습니다.

유형: 목록 항목에 사용되는 기본 태그를 설정합니다. 설정할 수 있는 스타일은 disc(속이 채워진 원), Circle(빈 원), Square(사각형), Decimal(아라비아 숫자), Lower-Roman(소문자 로마 숫자), Upper-Roman(대문자 로마 숫자), Lower입니다. -alpha(영문 소문자), upper-alpha(영문 대문자), 없음(글머리 기호 없음). 해당 CSS 속성은 "list-style-type"입니다.

글머리 기호 이미지: 목록 항목의 이미지를 설정합니다. 값은 이미지의 URL 주소 또는 경로입니다. 해당 CSS 속성은 "list-style-image"입니다.

위치: 목록 항목이 텍스트 내부에 있는지, 텍스트 외부에 있는지를 설정합니다. Inside: 목록 항목 표시가 텍스트 내부에 배치됩니다. Outside: 목록 항목 표시가 텍스트 외부에 배치됩니다. 해당 CSS 속성은 "list-style-position"입니다.

7. 위치 지정

위치 지정 패널은 위치 지정을 위해 개체를 배치하는 것과 동일합니다. 정의는 CSS 정의의 레이어로 생각할 수 있습니다.

유형: 개체의 위치 지정 방법을 설정합니다. Absolute(절대 위치 지정), Relative(상대 위치 지정), Static(특별한 위치 지정 없음)의 세 가지 방법이 있습니다. 해당 CSS 속성은 "position"입니다.

가시성: 개체 위치 지정 레이어의 초기 표시 상태를 설정합니다. 상태는 상속(상위 레이어의 표시 속성 상속), 표시(개체가 표시됨) 및 숨김의 세 가지 상태입니다. 해당 CSS 속성은 "visibility"입니다.

Z-Index: 개체의 스택 순서를 설정합니다. 숫자가 높은 레이어는 숫자가 낮은 레이어 위에 나타납니다. 변수 값은 양수 또는 음수일 수 있습니다. 해당 CSS 속성은 "z-index"입니다.

오버플로우: 레이어 내용이 레이어 크기를 초과하는 경우 처리 방법을 설정합니다. 처리 방법에는 네 가지가 있습니다. 레이어의 크기를 늘려 레이어의 모든 내용을 표시하는 표시, 레이어의 크기를 변경하지 않고 레이어 너머의 내용을 잘라내는 숨김, 항상 스크롤을 표시하는 스크롤; bar; 콘텐츠가 레이어 경계를 초과할 때만 스크롤 막대가 표시되는 Auto. 해당 CSS 속성은 "overflow"입니다.

배치: 개체 위치 지정 레이어의 위치와 크기를 설정합니다. 왼쪽(왼쪽 위치), 위쪽(상단 위치), 너비(너비), 높이(높이)를 각각 설정할 수 있습니다. 해당 CSS 속성은 "왼쪽; 위쪽; 너비; 높이"입니다.

클립: 포지셔닝 레이어의 가시 영역을 정의합니다. 영역 밖의 부분은 보이지 않는 영역이며 투명합니다. 이는 포지셔닝 레이어에 직사각형 마스크를 배치한 효과로 이해될 수 있습니다. 해당 CSS 속성은 "clip"입니다.

참고: 이 매개변수는 절대 위치 지정 중에만 유효합니다.

참고: 유형에 절대 위치 지정이 설정된 경우 절대 위치 지정 레이어가 개체에 추가됩니다. 이 CSS로 생성된 레이어는 일반 레이어와 마찬가지로 속성 패널을 가지며 레이어 관리 패널에도 표시됩니다. 이 포지셔닝 레이어의 속성 패널을 설정하여 위의 매개변수를 수정할 수 있지만, 이 속성 패널에서 변경된 값은 객체 태그 뒤에 인라인 스타일로 추가됩니다. 다음 그림은 포지셔닝 레이어의 속성 패널입니다.

8 . 확장(Extensions)

페이지 나누기: 인쇄 시 스타일 제어 개체 앞뒤에 페이지 나누기를 강제합니다.

이전: 개체 앞에 표시되는 페이지 구분 기호를 설정합니다. 항상으로 설정하면 페이지 구분 기호가 항상 개체 앞에 삽입됩니다. 해당 CSS 속성은 "page-break-before"입니다.

이후: 개체 설정 후 나타나는 페이지 구분선입니다. 항상으로 설정하면 페이지 나누기가 항상 개체 뒤에 삽입됩니다. 해당 CSS 속성은 "'>입니다.

참고: 위 IE5는 항상 값과 공백 값(null)만 지원합니다.

커서: 제어되는 개체 위로 마우스를 이동할 때 변경됩니다. 스타일 마우스 모양을 손(손 유형), 십자선("10" 유형), 텍스트("I" 유형), 대기(대기), 기본값(기본값), 도움말(도움말), e-크기 조정(")으로 설정할 수 있습니다. 동쪽 화살표) , ne-resize(북동쪽 화살표), n-resize(북쪽 화살표), nw-resize(북서쪽 화살표), w-resize(서쪽 화살표), sw-resize(남서쪽 화살표), s-resize(남쪽 화살표) ), se -resize(남동쪽 화살표) 및 auto(자동)

.필터: 스타일에 필터 효과를 추가합니다. 이 속성에는 내용이 많기 때문에 다음 장에서 필터를 별도로 소개하겠습니다.

2. 필터

CSS는 내장된 멀티미디어 필터 효과를 제공합니다. 이 기술을 사용하면 이미지, 텍스트 컨테이너와 같은 표준 HTML 요소에 시각적 필터 및 변환 효과를 추가할 수 있습니다. 그리고 다른 개체. Dreamweaver4는 아래와 같이 선택할 수 있는 16개의 필터를 제공합니다.

다음으로 Dreamweaver4에서 이러한 CSS 필터를 편리하게 사용하는 방법을 살펴보겠습니다.

사용자 정의 스타일 ".filter"를 만들고 필터 드롭다운 상자에서 알파 필터를 선택하면 "Alpha(Opacity=?, FinishOpacity=?, style=?, StartX=?, StartY= ? , FinishX=?, FinishY=?)"는 아래와 같이 Opacity 매개변수를 50으로 설정하고 모든 후속 매개변수를 삭제합니다.

확인을 누르면 ".filter"라는 사용자 정의 스타일이 생성됩니다. 이 스타일을 이미지에 적용하면 이미지가 반투명해집니다. 이 스타일을 표에 적용하면 표도 반투명해집니다. 모든 필터 효과는 브라우저에서만 볼 수 있습니다. 다음은 원본 코드입니다:



참고: 이 예에서는 다음 매개변수를 사용하지 않고 불투명도 매개변수만 사용했습니다. 다른 매개변수를 삭제하세요.

각 필터의 ​​효과와 매개변수를 설명해 보겠습니다.

1. 알파: 투명도 설정

Alpha(Opacity=?, FinishOpacity=?, style=? , StartX= ?, StartY=?, FinishX=?, FinishY=?)

불투명도: 투명도 수준, 범위는 0-100, 0은 완전히 투명함을 나타내고 100은 완전히 불투명함을 나타냅니다.

FinishOpacity: 그라디언트의 투명도 효과를 설정할 때 마지막에 투명도를 지정하는 데 사용되며 범위도 0~100입니다.

스타일: 그라디언트 투명도 스타일을 설정합니다. 값 0은 균일한 모양을 나타내고, 1은 선형 모양을 나타내고, 2는 방사형 모양을 나타내고, 3은 직사각형을 나타냅니다.

StartX 및 StartY: 그라데이션 투명도 효과의 시작 X 및 Y 좌표를 나타냅니다.

FinishX 및 FinishY: 그라데이션 투명 효과 끝의 X 및 Y 좌표를 나타냅니다.

2. BlendTrans: 이미지 간 페이드인 및 페이드아웃 효과

BlendTrans(Duration=?)

기간: 페이드인 또는 페이드아웃 시간.

참고: 사진 사이에 효과를 만들려면 JS와 함께 이 필터를 사용하여 사진 시퀀스를 만들어야 합니다.

3. Blur: 블러 효과 만들기

Blur(Add=?, Direction=?, Strength=?)

Add: 한 방향으로 블러할지 여부, 매개변수는 부울 값, true(0 아님) 또는 false(0)입니다.

방향: 흐림 방향을 설정합니다. 여기서 0도는 수직 위쪽을 나타내고 45도마다 단위가 됩니다.

강도: 흐릿한 픽셀 값을 나타냅니다.

4. Chroma : 지정한 색상을 투명하게 설정합니다.

Chroma(Color=?)

Color : 투명하게 설정할 색상을 말합니다.

5. DropShadow: 그림자 효과 만들기

DropShadow(Color=?, OffX=?, OffY=?, Positive=?)

Color: 색상을 지정합니다. 그림자.

OffX: 요소를 기준으로 그림자의 수평 오프셋을 정수로 지정합니다.

OffY: 요소를 기준으로 그림자의 수직 오프셋을 정수로 지정합니다.

양수: 부울 값입니다. 값이 true(0이 아님)이면 외부 그림자를 설정한다는 의미이고, false(0)이면 내부 그림자를 설정한다는 의미입니다.

6. FlipH: 요소를 수평으로 뒤집습니다

7. FlipV: 요소를 수직으로 뒤집습니다

8. Glow: 외부 광선 효과 만들기

(Color=?, Strength=?)

Color: 빛의 색상을 지정합니다.

강도: 빛의 강도. 1에서 255 사이의 정수일 수 있습니다. 숫자가 클수록 빛의 범위가 넓어집니다.

9. 회색: 이미지의 색상을 제거하고 흑백 이미지로 표시합니다

10. 반전: 이미지의 색상을 반전시켜 영화 같은 효과를 연출합니다

11. 조명: 광원을 배치하는 효과로, 물체에 광원의 투영 효과를 시뮬레이션하는 데 사용할 수 있습니다.

참고: 이 효과를 사용하려면 JS에서 위치와 강도를 설정해야 합니다. 빛의.

12. 마스크 : 투명한 마스크를 생성합니다

마스크(Color=?)

색상 : 배경을 덮고 있는 물체의 부분을 투명하게 하기 위한 배경색을 설정합니다.

13. RevealTrans: 전환 효과 만들기

RevealTrans(Duration=?, Transition=?)

Duration: 초 단위의 전환 시간입니다.

전환: 전환 방식이며 0~23까지 설정할 수 있습니다.

참고: 페이지 간에 전환하려면 영역에 다음 코드 줄을 추가할 수 있습니다. . 요소가 페이지에서 사용되는 경우 JS와 함께 사용해야 합니다.

14. 그림자: 또 다른 그림자 효과 만들기

그림자(색상=?, 방향=?)

색상: 그림자의 색상을 말합니다.

방향: 투영 방향을 설정합니다. 0도는 수직 위쪽을 의미하고 45도마다 하나의 단위입니다.

15. Wave: 파급 효과

Wave(Add=?, Freq=?, LightStrength=?, Phase=?, Strength=?)

Add: 여부를 ​​나타냅니다. 원본 객체를 표시하고, 0은 표시하지 않음을 의미하고, 0이 아닌 경우 원본 객체를 표시함을 의미합니다.

Freq: 변동 횟수를 설정합니다.

LightStrength: 파도 효과의 빛 강도를 0에서 100까지 설정합니다. 0은 가장 약한 것을 나타내고 100은 가장 강한 것을 나타냅니다.

위상: 파동의 시작 위상 각도입니다. 0에서 100까지의 백분율 값입니다. (예: 25는 90도에 해당하고, 50은 180도에 해당합니다.)

강도: 파도 스윙의 진폭을 설정합니다.

16. Xray: 사진의 윤곽선 표시, X-ray 효과

참고: CSS 필터를 사용할 때는 표, 그림 등 영역이 있는 요소를 사용해야 합니다. 텍스트나 단락과 같이 영역이 없는 요소는 CSS 필터를 사용할 수 없습니다. 이러한 요소의 경우 이를 달성하기 위해 요소의 높이 및 너비 스타일이나 좌표를 설정할 수 있습니다.

아래 예를 보면 텍스트 줄에 그림자 효과(dropshadow)를 만들고 새 사용자 정의 style.shadow를 만든 다음 "DropShadow(Color=?, OffX=?, OffY=? ,) 필터 드롭다운 상자에서 Positive=?)", "DropShadow(Color=999999, OffX=2, OffY=2, Positive=1)"로 설정합니다. 그런 다음 정의된 스타일을 페이지에 적용합니다. 표의 텍스트에는 그림자가 있지만 단락의 텍스트에는 그림자가 없습니다. CSS 스타일 패널에서 스타일 시트 편집 버튼을 클릭하고 스타일에 Hight 속성을 추가합니다.

원본 개체의 높이에 영향을 주지 않기 위해 설정한 높이는 글꼴 자체의 높이를 초과할 수 없습니다. . 확인 후 브라우저에서 단락의 텍스트에도 그림자가 있는 것을 볼 수 있습니다.

위 내용은 CSS 튜토리얼 (6) DW4의 CSS 속성에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!