CSS 텍스트 속성은 무엇입니까?

CSS 텍스트 속성에는 1. 색상 속성, 2. 텍스트 방향 방향, 3. 줄 높이, 문자 간격, 5. 텍스트 그림자, unicode-bidi 등이 있습니다.

css 텍스트 속성:

(동영상 공유 학습: java 비디오 튜토리얼)

color    设置文本颜色    
direction    设置文本方向。    
line-height    设置行高。    
letter-spacing    设置字符间距。    
text-align    对齐元素中的文本。    
text-decoration    向文本添加修饰。    
text-indent    缩进元素中文本的首行。    
text-shadow    设置文本阴影。CSS2 包含该属性，但是 CSS2.1 没有保留该属性。    
text-transform    控制元素中的字母。    
unicode-bidi    设置文本方向。    
white-space    设置元素中空白的处理方式。    
word-spacing    设置字间距。

CSS 텍스트 속성은 텍스트의 모양을 정의합니다.

텍스트 속성을 사용하면 텍스트 색상, 문자 간격, 텍스트 정렬, 텍스트 장식, 텍스트 들여쓰기 등을 변경할 수 있습니다.

1. 텍스트 들여쓰기

CSS는 텍스트 들여쓰기를 쉽게 구현할 수 있는 text-indent 속성을 제공합니다.

text-indent 속성을 사용하면 모든 요소의 첫 번째 줄을 주어진 길이만큼 들여쓸 수 있으며 길이도 음수 값이 될 수 있습니다.

이 속성의 가장 일반적인 용도는 단락의 첫 번째 줄을 들여쓰는 것입니다. 다음 규칙은 모든 단락의 첫 번째 줄을 5em씩 들여쓰는 것입니다.

p {text-indent: 5em;}

참고: 일반적으로 말하면 텍스트-는 모든 블록에 적용될 수 있습니다. -level 요소. indent. 그러나 인라인 요소에는 속성을 적용할 수 없으며 이미지와 같은 대체 요소에는 text-indent 속성을 적용할 수 없습니다. 그러나 블록 수준 요소(예: 단락)의 첫 번째 줄에 이미지가 있는 경우 해당 줄의 나머지 텍스트와 함께 이동합니다.

팁: 인라인 요소의 첫 번째 줄을 "들여쓰기"하려면 왼쪽 패딩이나 여백을 사용하여 이 효과를 만들 수 있습니다.

2. 가로 정렬

text-align은 요소의 텍스트 줄 정렬에 영향을 주는 기본 속성입니다. 처음 3개 값은 매우 간단하지만 4번째와 5번째 값은 좀 더 복잡합니다.

left, right 및 center 값을 사용하면 요소의 텍스트가 각각 왼쪽 정렬, 오른쪽 정렬 및 가운데 정렬됩니다.

팁: 블록 수준 요소 또는 테이블 요소에 왼쪽 및 오른쪽 여백을 적절하게 설정하여 중앙에 배치하세요.

3. 단어 간격

단어 간격 속성은 단어(단어) 사이의 표준 간격을 변경할 수 있습니다. 기본값인 Normal은 값을 0으로 설정하는 것과 같습니다.

단어 간격 속성은 양수 또는 음수 길이 값을 허용합니다. 양수 길이 값이 제공되면 단어 사이의 간격이 늘어납니다. word-spacing에 음수 값을 설정하면 더 가까워집니다.

p.spread {word-spacing: 30px;}
p.tight {word-spacing: -0.5em;}

<p class="spread">
This is a paragraph. The spaces between words will be increased.
</p>

<p class="tight">
This is a paragraph. The spaces between words will be decreased.
</p>

4. 문자 간격

letter-spacing 속성과 word-spacing의 차이점은 문자 간격이 문자 또는 문자 사이의 간격을 수정한다는 것입니다.

word-spacing 속성과 마찬가지로 letter-spacing 속성에도 가능한 값에는 모든 길이가 포함됩니다. 기본 키워드는 Normal입니다(letter-spacing:0과 동일). 입력된 길이 값은 문자 사이의 간격을 지정된 양만큼 늘리거나 줄입니다:

h1 {letter-spacing: -0.5em}
h4 {letter-spacing: 20px}

<h1>This is header 1</h1>
<h4>This is header 4</h4>

관련 권장 사항: CSS Tutorial

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