CSS 실용 튜토리얼(2)

일곱. 텍스트 스타일 제어

제어 텍스트 스타일에는 텍스트 대소문자와 텍스트 수정의 두 부분이 포함됩니다.

1． 텍스트 케이싱

텍스트 케이싱을 사용하면 웹 디자이너가 텍스트를 입력할 때 텍스트의 케이싱을 완료할 필요가 없으며 대신 입력 후 필요에 따라 부분 텍스트의 대소문자를 설정할 수 있습니다.

기본 형식은 다음과 같습니다.

text-transform: Parameter

매개변수 값 범위:

·대문자: 모든 텍스트가 대문자로 표시됩니다.

·소문자: 모든 텍스트가 소문자로 표시됩니다.

·capitalize: 각 단어의 첫 글자가 대문자로 표시됩니다.

·none: 상위 텍스트 변형 매개변수는 다음과 같습니다. 상속되지 않음

참고: 상속 이는 자체 식별자가 포함된 매개변수에 대해 HTML 식별자가 상속된다는 의미입니다.

2． 텍스트 수정

텍스트 수정의 주요 목적은 브라우저가 텍스트 링크를 표시할 때 밑줄을 변경하는 것입니다.

기본 형식은 다음과 같습니다.

text-꾸밈: Parameter

매개변수 값 범위:

·underline: 텍스트에 밑줄을 긋습니다

·overline: 텍스트 밑줄

·line-through: 텍스트에 취소선

·blink: 텍스트를 깜박이게 합니다

·none: 위 내용을 표시하지 않습니다. 효과

8. 텍스트 스타일 제어

텍스트 제어 스타일은 단어 거리, 글자 거리, 텍스트 줄 간격, 텍스트 가로 정렬, 텍스트 세로 정렬, 텍스트 들여쓰기의 6가지 부분으로 구성됩니다.

1． 자간

자간이란 한자를 제외한 영어의 각 단어 사이의 거리를 말합니다.

기본 형식은 다음과 같습니다.

단어 간격: 간격 거리

간격 거리 값: 포인트, em, 픽셀, in, cm, mm, pc , ex, 일반 등

2． 자간

자간이란 영문자 사이의 간격을 의미하며, 기능, 사용법, 매개변수 설정 등은 자간과 매우 유사합니다.

기본 형식은 다음과 같습니다.

letter-spacing : 자간

3. 행간 간격

행간 간격은 위쪽 기준선과 아래쪽 기준선 사이의 수직 거리를 나타냅니다. 일반적으로 영어 5줄 연습문제에서는 위에서 아래로 세 번째 수평선이 컴퓨터가 해당 선의 기준선으로 간주하는 부분입니다.

기본 형식은 다음과 같습니다.

line-height: 줄 사이의 거리

줄 사이의 거리 값:

·단위가 없는 숫자: 1 는 기본수, 비례관계 100%에 해당

·길이 단위가 있는 숫자: 특정 단위 참조

·비례관계

참고: 텍스트의 경우 글꼴이 매우 작습니다. 줄 간격이 상대적으로 작을 경우 텍스트의 위쪽 줄과 아래쪽 줄이 서로 겹칠 수 있습니다.

4． 텍스트 가로 정렬

텍스트 가로 정렬은 텍스트의 가로 정렬을 제어할 수 있으며 텍스트 내용뿐만 아니라 그림 및 이미지 자료의 정렬 설정도 포함합니다.

기본 형식은 다음과 같습니다.

text-align: 매개변수

매개변수 값:

·왼쪽: 왼쪽 정렬

· right: 오른쪽 정렬

·center: 가운데 정렬

·justify: 상대적인 왼쪽 및 오른쪽 정렬

그러나 text-alight는 블록 수준이라는 점에 유의해야 합니다. 속성이며

, ,

,

~

과 같은 식별자에만 사용할 수 있습니다.

5． 텍스트의 수직 정렬

텍스트의 수직 정렬은 웹 페이지의 텍스트 수직 정렬이 아니라 텍스트 상위 위치를 기준으로 해야 합니다. 예를 들어, 표 셀에 텍스트 섹션이 있는 경우 이 텍스트의 수직 중심 설정은 셀을 기준으로 측정됩니다. 즉, 텍스트는 셀 중앙이 아닌 셀 중앙에 표시됩니다. 전체 웹페이지.

기본 형식은 다음과 같습니다.

vertical-align: 매개변수

매개변수 값:

·top: 상단 정렬

·하단 : 하단 정렬

·text-top: 상대 텍스트 상단 정렬

·text-bottom: 상대 텍스트 하단 정렬

·baseline: 기준선 정렬

·middle : 가운데 정렬

·sub : 아래 첨자로 표시

·super : 위 첨자

형식으로 표시 6. 텍스트 들여쓰기

텍스트 들여쓰기를 사용하면 기본값보다 좁은 영역에 텍스트를 표시할 수 있습니다. 주로 중국어 스타일의 첫 줄을 들여쓰거나 인용문 및 메모의 큰 단락을 들여쓸 때 사용됩니다. .

기본 형식은 다음과 같습니다.

text-indent: 들여쓰기 거리

들여쓰기 거리 값:

·길이 단위의 숫자

·비례 관계

그러나 비례 관계를 사용할 때 일부 사람들은 브라우저의 기본 비율이 단락 너비에 상대적이라고 생각할 수 있습니다. 실제로는 그렇지 않습니다. 전체 브라우저 창은 브라우저의 기본 참조입니다.

또한, text-indent는 블록 수준 속성이며 < blockquqte>, < h1>~< ;.
아홉. 색상 및 배경 제어 스타일

색상 및 배경 제어 스타일은 색상 속성, 배경색, 배경 이미지, 배경 이미지 반복, 배경 이미지 고정, 배경 위치 지정의 6가지 부분으로 구성됩니다.

1． 색상 속성

의 기본 형식은 다음과 같습니다.

color: 매개변수

색상 매개변수 값 범위:

·RGB 값으로 표현

·16진수(hex) 색상값으로 표현

·기본 색상의 영문명으로 표현

기본 색상은 당연히 영어 이름으로 표현하는 것이 가장 편리하지만, 미리 정의된 색상 종류가 너무 적기 때문에 RGB를 선호하는 웹 디자이너들이 늘어나고 있습니다. RGB 방식은 많은 이점을 가지고 있습니다. 이는 디지털 형식으로 색상을 정확하게 표현할 수 있을 뿐만 아니라 많은 이미지 제작 소프트웨어(예: Photoshop)에서 사용되는 기본 사양이기도 합니다. 이는 사진과 웹 페이지의 더 나은 통합을 위한 견고한 기반을 마련합니다. .

2． 배경색

HTML에서 개체에 배경색을 추가하는 방법은 한 가지뿐입니다. 먼저 테이블을 만들고 테이블에서 배경색을 설정한 다음 개체를 셀에 넣는 것입니다. . 이는 더 많은 코드를 필요로 할 뿐만 아니라 테이블의 크기와 위치에도 약간의 문제가 발생합니다. 이제 CSS를 사용하여 직접 수행하는 것이 쉽고 개체 범위가 매우 넓어 텍스트 조각이 될 수도 있고 단어나 문자가 될 수도 있습니다.

기본 형식은 다음과 같습니다.

background-color: 매개변수

매개변수 값은 color 속성과 동일합니다.

3． 배경 이미지

의 기본 형식은 다음과 같습니다.

background-image: url(URL)

URL은 배경 이미지의 저장 경로입니다. 배경 이미지 저장 경로 대신 "none"을 사용하면 아무것도 표시되지 않습니다.

4． 배경 이미지 반복

배경 이미지 반복은 배경 이미지의 타일링 여부를 제어합니다. 즉, 배경 위치 제어와 결합하여 웹 페이지의 어딘가에 배경 이미지를 별도로 표시할 수 있습니다.

기본 형식은 다음과 같습니다.

background-repeat: 매개 변수

매개 변수 값 범위:

·no-repeat: 타일 배경을 반복하지 않습니다. Images

·repeat-x: 가로 방향으로만 그림 타일 만들기

·repeat-y: 세로 방향으로만 그림 타일 만들기

배경이 없을 경우 이미지가 지정되었습니다. 반복 속성의 경우 브라우저 기본값은 배경 이미지가 수평 및 수직 방향으로 타일링되는 것입니다.

5． 배경 이미지 고정

배경 이미지 고정은 웹 페이지 스크롤에 따라 배경 이미지가 스크롤되는지 여부를 제어합니다. 배경 이미지 고정 속성을 설정하지 않으면 웹 페이지 스크롤에 따라 브라우저의 기본 배경 이미지도 함께 스크롤됩니다. 지나치게 화려한 배경 이미지가 스크롤 시 시청자의 시력을 손상시키는 것을 방지하기 위해 브라우저 창에 번들로 포함되어야 하는 배경 이미지와 텍스트 콘텐츠를 분리할 수 있습니다.

기본 형식은 다음과 같습니다.

Background-attachment: Parameter

Parameter 값 범위:

·fixed: 웹 페이지를 스크롤할 때, 배경 이미지는 브라우저에 상대적입니다. 브라우저 창의 경우 고정

·스크롤: 웹페이지를 스크롤할 때 배경 이미지도 브라우저 창과 함께 스크롤됩니다

6. 배경 위치 지정

배경 위치 지정은 웹 페이지에 표시되는 배경 이미지의 위치를 ​​제어하는 ​​데 사용됩니다.

기본 형식은 다음과 같습니다.

배경 위치: 매개변수 테이블

매개변수 값 범위:

·길이 단위의 숫자 매개변수

·위: 전경 개체를 기준으로 위쪽 정렬

·아래: 전경 개체를 기준으로 아래쪽 정렬

·왼쪽: 전경 개체를 기준으로 왼쪽 정렬

·right : 전경 객체를 기준으로 오른쪽 정렬

·center : 전경 객체를 기준으로 중심 정렬

·비례 관계

매개변수의 중심을 사용하는 경우 다른 매개변수 앞에 사용되면 수평 중심을 의미하고, 다른 매개변수 뒤에 사용되면 수직 중심을 의미합니다.

10. 목록 스타일 제어

목록은 HTML에서 관련 병렬 콘텐츠를 수직으로 깔끔하게 배열하여 웹 페이지를 깔끔하고 전문적으로 보이게 하며 보는 사람에게 명확한 느낌을 줄 수 있는 매우 유용한 표시 방법입니다.

스타일 시트는 목록에 몇 가지 기능을 추가합니다. 컨트롤 목록의 스타일은 목록 스타일, 그래픽 기호, 목록 위치의 세 부분으로 구성됩니다.

1． 목록 기호

목록 기호는 각 목록 항목 앞에 표시되는 기호를 나타냅니다.

기본 형식은 다음과 같습니다.

list-style-type: 매개변수

매개변수 값 범위:

·디스크: 원형

·원: 속이 빈 원

·사각형: 정사각형

·decimal: 십진수

·lower-roman: 소문자 로마숫자

·upper - roman: 대문자 로마숫자

· lower-alpha: 그리스 소문자

· upper-alpha: 그리스 대문자

· none: 기호 표시 없음

2． 그래픽 기호

그래픽 기호는 원래 목록의 글머리 기호가 그래픽으로 대체될 수 있음을 의미합니다.

기본 형식은 다음과 같습니다.

list-style-image: URL

URL은 글머리 기호를 대체하는 데 사용되는 그래픽 파일의 주소이며 다음을 사용할 수 있습니다. 상대 주소 또는 절대 주소.

3． 목록 위치

목록 위치는 목록이 표시되는 위치를 설명합니다.

기본 형식은 다음과 같습니다.

list-style-position: 매개변수

매개변수 값 범위:

·inside: BOX 모델 내부에 표시됩니다.

·외부: BOX 모델 외부에 표시

여기서 새로운 개념이 등장합니다: BOX 모델. BOX는 스타일 규칙이 적용되는 객체를 포함하는 컨테이너를 의미합니다. 자세한 내용은 나중에 설명하겠습니다.

일레븐. 사용자 인터페이스 스타일 제어

웹 페이지에서 마우스는 보통 화살표 모양이고, 링크를 가리킬 때는 손 모양이 되고, 웹 페이지 다운로드를 기다릴 때는 모래시계 모양이 되는데… 컨벤션. 이 디자인을 통해 브라우저의 현재 상태나 할 수 있는 작업을 알 수 있지만, 우리의 요구 사항을 완전히 충족할 수는 없는 것 같습니다. 예를 들어 링크를 사용하면 도움말 파일을 가리킬 수도 있고 한 페이지 앞으로 이동하거나 한 페이지 뒤로 이동할 수도 있습니다. 동일한 손 모양 마우스만으로는 문제를 설명할 수 없습니다. 다행히 CSS는 선택할 수 있는 마우스 모양을 최대 13개까지 제공합니다.

기본 형식은 다음과 같습니다.

커서: 마우스 모양 매개변수

CSS 마우스 모양 매개변수 표:

CSS 코드

마우스 모양

style="cursor:hand"

손 모양

style="cursor:crosshair"

십자 모양

style="cursor :text"

텍스트 모양

style="cursor:wait"

모래시계 모양

style="cursor:move"

십자 화살표 모양

style="cursor:help"

물음표 모양

style="cursor:e-resize"

오른쪽 화살표 모양

style="cursor:n-resize"

위쪽 화살표 모양

style="cursor:nw-resize"

위쪽 화살표 모양 왼쪽 화살표 모양

style="cursor:w-resize"

왼쪽 화살표 모양

style="cursor:s-resize"

아래쪽 화살표 모양

style="cursor:se-resize"

아래쪽 오른쪽 화살표 모양

style="cursor:sw-resize"

아래쪽 왼쪽 화살표 모양

위 내용은 CSS Practical Tutorial(2) 내용입니다. 더 많은 관련 글은 PHP 중국어 홈페이지(www.php.cn)를 참고해주세요!