목차
텍스트 CSS 스타일
웹 프론트엔드 CSS 튜토리얼 텍스트 CSS 스타일은 무엇입니까?

텍스트 CSS 스타일은 무엇입니까?

Dec 09, 2021 am 11:13 AM
css

텍스트 CSS 스타일에는 다음이 포함됩니다: 텍스트 색상 "색상", 텍스트 방향 "방향", 문자 간격 "문자 간격", 텍스트 가로 정렬 "텍스트 정렬", 텍스트 장식 "텍스트 장식", 첫 번째 줄 들여쓰기 " 텍스트- 들여쓰기" 등

텍스트 CSS 스타일은 무엇입니까?

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

텍스트 CSS 스타일

Property Description
color 텍스트 색상 설정
방향 텍스트 방향을 설정합니다.
letter-spacing 문자 간격 설정
line-height line-height 설정
text-align 텍스트 가로 정렬
text-꾸밈 텍스트에 장식 추가
text-indent 요소에서 텍스트의 첫 번째 줄 들여쓰기
text-shadow 텍스트 그림자 설정
text-transform 요소의 제어 문자
unicode- bidi 텍스트 재작성 여부 설정 또는 반환
vertical-align 텍스트 수직 정렬
white-space 요소의 공백 처리 방식 설정
word-spacing 단어 간격 설정

몇 가지 CSS 텍스트 스타일을 소개하겠습니다.

text-indent 첫 줄 들여쓰기

첫 줄 들여쓰기는 문단의 첫 줄을 들여쓰기하는 것으로, 일반적으로 사용되는 텍스트 서식 효과입니다. 일반적으로 중국어로 글을 쓸 때 이와 비슷하게 시작 부분에 공백이 두 개 있습니다.

이 속성의 값은 음수일 수 있습니다.

구문: ​​

text-indent:<length> | <percentage> | inherit
로그인 후 복사

tip: 초기 값은 0입니다.

적용 대상: 블록 수준 요소(블록 및 인라인 블록 포함)

상속: 예

백분율: 포함 블록의 너비에 상대적입니다.

사례: 첫 번째 문자 삭제

div {
    width: 200px;
    border: 1px solid black;
    text - indent: 0.5em;
}
div: first - letter {
    font - size: 30px;
    float: left;
}
로그인 후 복사

text-align 수평 정렬

수평 정렬은 요소의 텍스트에 영향을 미치는 수평 정렬입니다.

구문: ​​

text-align: left | center | right | justify | inherit
로그인 후 복사

초기 값: left

적용 대상: 블록 수준 요소(블록 및 인라인 블록 포함)

상속: Yes

IE7 브라우저의 경우 text-align을 사용하면 가로만 변경되지 않습니다. 텍스트 정렬은 하위 블록 수준 요소의 가로 정렬도 변경합니다.

word-spacing

Word-spacing은 단어 간격을 말하며 텍스트나 단어 사이의 간격을 설정하는 데 사용됩니다. 실제로 "단어"는 일종의 공백으로 둘러싸인 공백이 아닌 문자의 문자열을 나타냅니다.

참고: 단어는 공백으로 구분됩니다. 단어 사이의 간격 = 단어 간격 + 공백 크기

참고: 단어 간격은 음수일 수 있습니다.

구문: ​​

word-spacing: <length> | normal | inherit
로그인 후 복사

초기 값: 보통(기본값은 0)

적용 대상 : 모든 요소

상속: 예

letter-spacing 문자 간격

Letter 간격은 문자 간격을 나타냅니다.

참고: 문자 간격은 음수일 수 있습니다.

letter-spacing:<length> | normal | inherit
로그인 후 복사

초기 값: 일반(기본값은 0)

적용 대상: 모든 요소

상속:

text-transform text-transform

text-transform은 영어 대소문자 변환을 처리하는 데 사용됩니다.

구문: ​​

text-transform:uppercase(全大写) | lowercase(全小写) | capitalize(首字母大写) | none | inherit
로그인 후 복사

초기 값: 없음

적용 대상: 모든 요소

상속: 예

text-장식Text-장식

텍스트 장식은 텍스트에 장식 선을 제공하는 데 사용됩니다.

참고: 텍스트 수정 줄의 색상은 텍스트 색상과 동일합니다.

구문: ​​

text-decoration:none | [underline(下划线) || overline(上划线) || line-through(中划线)] | inherit
로그인 후 복사
초기 값: none

적용 대상: 모든 요소

상속: none

(학습 동영상 공유:

css 동영상 튜토리얼)

위 내용은 텍스트 CSS 스타일은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

vue에서 자리 표시자는 무엇을 의미합니까? vue에서 자리 표시자는 무엇을 의미합니까? May 07, 2024 am 09:57 AM

vue에서 자리 표시자는 무엇을 의미합니까?

Vue에서 공백을 쓰는 방법 Vue에서 공백을 쓰는 방법 Apr 30, 2024 am 05:42 AM

Vue에서 공백을 쓰는 방법

Vue에서 DOM을 얻는 방법 Vue에서 DOM을 얻는 방법 Apr 30, 2024 am 05:36 AM

Vue에서 DOM을 얻는 방법

js에서 스팬은 무엇을 의미하나요? js에서 스팬은 무엇을 의미하나요? May 06, 2024 am 11:42 AM

js에서 스팬은 무엇을 의미하나요?

js에서 rem은 무엇을 의미합니까? js에서 rem은 무엇을 의미합니까? May 06, 2024 am 11:30 AM

js에서 rem은 무엇을 의미합니까?

Vue에 이미지를 삽입하는 방법 Vue에 이미지를 삽입하는 방법 May 02, 2024 pm 10:48 PM

Vue에 이미지를 삽입하는 방법

스팬 태그의 기능은 무엇입니까 스팬 태그의 기능은 무엇입니까 Apr 30, 2024 pm 01:54 PM

스팬 태그의 기능은 무엇입니까

js에서 프롬프트를 래핑하는 방법 js에서 프롬프트를 래핑하는 방법 May 01, 2024 am 06:24 AM

js에서 프롬프트를 래핑하는 방법

See all articles