CSS 텍스트 설정의 주요 속성은 무엇입니까?

CSS 텍스트 설정의 주요 속성은 글꼴 유형, 글꼴 크기, 색상, 텍스트 정렬, 텍스트 장식, 테두리, 텍스트 그림자, 단어 변형, 단어 구분, 방향 등입니다.

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

다양한 CSS 텍스트 속성 모음

1. 글꼴 속성

• font-family: 'Microsoft Yahei' 글꼴 CSS 속성 설정 스타일을 지정합니다

• font-size: 글꼴 크기.

• font-weight: 텍스트의 두께를 설정합니다.

• font-style: 글꼴 기울기를 설정합니다. 가능한 속성은 Normal, italic, oblique입니다.

• line-height: 글꼴의 줄 간격을 설정합니다.

• color 글꼴 색상

2. 텍스트 속성

• text-align: 텍스트 정렬을 제어합니다.

• text-indent: 텍스트 첫 줄의 들여쓰기를 제어합니다. px 또는 %;

• white-space: 문서 내 공백

  속성 값:

  • noraml: 기본적으로 여러 개의 공백은 무시되고 하나의 공백만 출력됩니다.

  • nowrap: Force. 줄바꿈 없음

  • pre: 공백/들여쓰기/줄바꿈이 유지됩니다

  • pre-line: 빈 테이블 병합(여러 공백은 하나의 공백만 출력)

  • pre-warp: 공백/들여쓰기는 유지됩니다.

• letter-spacing: 문자 사이의 거리를 제어합니다.

• text-overflow: 텍스트가 포함된 요소를 넘치면 어떻게 되나요?

  • 클립 텍스트 자르기.

  • ellipsis 잘린 텍스트를 나타내는 타원을 표시합니다.

  • string 주어진 문자열을 사용하여 잘린 텍스트를 나타냅니다.

  • 단어 간격을 조절하고, 공백을 사용하여 단어를 구분합니다. 중국어와 영어 모두 괜찮습니다.

• 3. 밑줄 속성

• overline 텍스트에 한 줄을 정의합니다.

• line-through는 텍스트 아래를 통과하는 선을 정의합니다.

• underline은 텍스트 아래 줄을 정의합니다.

• 4. 대소문자 변환

속성 값:

• lowercase: 소문자로 변환

• [추천 튜토리얼:
CSS 비디오 튜토리얼
• ]

5.

• 설명

border 약어 속성으로, 하나의 명령문에서 네 면에 대한 속성을 설정하는 데 사용됩니다.

border-style

6. 상자 그림자

box-shadow: 상자 그림자;box-shadow:盒子阴影;

可以有五个值  (h-shadow水平阴影位置,v-shadow垂直阴影位置,blur模糊距离,spread阴影尺寸, color， inset/outset内外阴影 ) 

eg:

box-shadow: 10px 5px 10px red inset;

7、文本超出换行

• Word-warp:允许长单词转换到下一行

• Word-break:允许在单词内转行(自动换行)

8、文字摆放形式

direction

5개의 값을 가질 수 있습니다(h-그림자 수평 그림자 위치, v-그림자 수직 그림자 위치, 흐림 흐림 거리, 확산 그림자 크기, 색상, 삽입/외부 그림자)

{
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

로그인 후 복사

• 7 텍스트가 줄 바꿈을 초과합니다

단어 뒤틀기: 길게 허용 다음 줄로 변환할 단어

단어 나누기: 단어 내 줄 바꿈 허용(자동 줄 바꿈)

• 8. 텍스트 배치 형식

• <코드>방향: 텍스트 배치 방향

속성 값:

ltl: 왼쪽에서 오른쪽으로

• rtl: 오른쪽에서 왼쪽으로

9 텍스트가 줄바꿈을 초과합니다

단어 뒤틀기: 길게 허용 다음 줄로 변환할 단어

단어 나누기: 단어 내 줄 바꿈 허용(자동 줄 바꿈)

{
  overflow:hidden;
  word-break: break-all;
  display: -webkit-box;
  -webkit-line-clamp: 3; /*限制在一个块元素显示的文本的行数*/
  -webkit-box-orient: vertical;
  text-overflow:ellipsis;
}

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