CSS 텍스트 스타일
CSS 텍스트 스타일은 콘텐츠와 관련된 스타일 수정입니다. 계단식 관계에서는 내용이 배경보다 높기 때문입니다. 따라서 텍스트 스타일이 상대적으로 더 중요합니다.
CSS 컨트롤 텍스트 속성:
1. 텍스트 들여쓰기 설정: text-indent:length (길이 단위) 음수일 수 있음
2. 텍스트 가로 정렬: 텍스트 정렬: 왼쪽, 가운데, 오른쪽
3. 공백 처리: white-space:nowrap (nowrap은 강제로 한 줄로 표시되고, 이전 줄바꿈과 공백은 유지되며, 일반 자동으로 줄 바꿈)
4 , 대소문자 제어: 텍스트 변환: (각 단어의 첫 글자는 대문자로, 모든 글자는 대문자로, 모든 글자는 소문자로, 일반 크기 없음)
5. 텍스트 수직 정렬: 수직 정렬: (sub는 텍스트를 아래 첨자로 설정하고, super는 텍스트를 위 첨자로 설정하며, 위쪽은 위쪽에 정렬되고, text-bottom은 아래쪽으로 정렬됩니다)
6, 텍스트 색상: 색상은 텍스트의 색상을 설정합니다.
첫 줄 들여쓰기
정의: 첫 줄 들여쓰기는 단락의 첫 줄을 들여쓰는 것으로, 이는 일반적인 텍스트 서식 효과입니다. 일반적으로 중국어로 글을 쓸 때 이와 비슷하게 시작 부분에 공백이 두 개 있습니다.
[참고] 이 속성은 음수일 수 있습니다.
text-indent
값: <length> 백분율> 상속
초기값: 0
적용 대상: 블록 수준 요소(블록 및 인라인 블록 포함)
상속: 예
백분율: 포함 블록의 너비에 비례
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
p {text-indent:50px;}
</style>
</head>
<body>
<p>亚冠联赛是亚洲最高等级的俱乐部赛事，相当于欧洲的欧洲冠军联赛及南美洲的南美解放者杯，高于亚足联杯和亚足联主席杯，
获得冠军的球队将代表亚洲参加当年12月举行的国际足联世界俱乐部杯。期待恒大在世俱杯中为中国足球争光添彩。</p>
</body>
</html>가로 정렬
정의: 수평 정렬은 요소 내의 텍스트에 영향을 미치는 수평 정렬입니다.
텍스트 정렬
값: 왼쪽 | 오른쪽 | 상속
초기값: 왼쪽
적용 대상: 블록 수준 요소(블록 및 인라인 블록 포함)
상속: 예
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>格式</title>
<style>
.center
{
margin:auto;
width:70%;
background-color:#b0e0e6;
}
</style>
</head>
<body>
<div class="center">
<p>亚冠联赛是亚洲最高等级的俱乐部赛事，相当于欧洲的欧洲冠军联赛及南美洲的南美解放者杯，高于亚足联杯和亚足联主席杯，</p>
<p>获得冠军的球队将代表亚洲参加当年12月举行的国际足联世界俱乐部杯。期待恒大在世俱杯中为中国足球争光添彩。</p>
</div>
</body>
</html>텍스트 변환
Text-transform은 영어 대소문자 변환을 처리하는 데 사용됩니다.
text-transform
값: 대문자(모두 대문자) | 대문자) 소문자) | 대문자화(첫 글자를 대문자로 표시) | 없음 | 상속
초기 값: 없음
적용 대상: 모든 요소
상속: 예
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>转换</title>
<style>
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}
</style>
</head>
<body>
<p class="uppercase">hello css</p>
<p class="lowercase">hello css</p>
<p class="capitalize">hello css</p>
</html> 텍스트 수정
정의: 텍스트 수정은 텍스트 수정 줄을 제공하는 데 사용됩니다.
[참고] 텍스트 수정 색상 행은 텍스트 색상과 동일합니다
텍스트 장식
값: 없음 | [밑줄(밑줄) || centerline)] | 상속
초기값: 없음
적용 대상: 모든 요소
상속: 없음
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文本修饰</title>
<style>
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
</style>
</head>
<body>
<h1>这是用来进行文本修饰的</h1>
<h2>这是用来进行文本修饰的</h2>
<h3>这是用来进行文本修饰的</h3>
</body>
</html>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
