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. 밑줄 속성

텍스트 장식: 텍스트에 밑줄이 그어져 있습니다. 가능한 값은

none 밑줄 없음

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

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

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

• 4. 대소문자 변환

text-transform:

속성 값:

none(기본값) 변환 없음: 각 단어의 첫 글자는 대문자입니다.

upercase: 대문자로 변환

• lowercase: 소문자로 변환

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

5.

• 설명

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

border-style

은 요소의 모든 테두리 스타일을 설정하거나 각 측면의 테두리 스타일을 개별적으로 설정하는 데 사용됩니다. border-width 요소의 모든 테두리 너비를 설정하거나 각 테두리의 너비를 개별적으로 설정하는 데 사용되는 단축 속성입니다. border-color 약식 속성으로, 요소의 모든 테두리에서 보이는 부분의 색상을 설정하거나 4개 면 각각의 색상을 설정합니다. border-bottom 약어 속성, 하단 테두리의 모든 속성을 하나의 명령문으로 설정하는 데 사용됩니다. border-bottom-color요소의 아래쪽 테두리 색상을 설정합니다. border-bottom-style요소의 하단 테두리 스타일을 설정합니다. border-bottom-width요소의 하단 테두리 너비를 설정합니다. border-left 약어 속성, 왼쪽 테두리의 모든 속성을 하나의 명령문으로 설정하는 데 사용됩니다. border-left-color요소의 왼쪽 테두리 색상을 설정합니다. border-left-style요소의 왼쪽 테두리 스타일을 설정합니다. border-left-width요소의 왼쪽 테두리 너비를 설정합니다. border-right 약어 속성, 오른쪽 테두리의 모든 속성을 하나의 명령문으로 설정하는 데 사용됩니다. border-right-color요소의 오른쪽 테두리 색상을 설정합니다. border-right-style요소의 오른쪽 테두리 스타일을 설정합니다. border-right-width요소의 오른쪽 테두리 너비를 설정합니다. border-top약어 속성, 상단 테두리의 모든 속성을 하나의 명령문으로 설정하는 데 사용됩니다. border-top-color요소의 상단 테두리 색상을 설정합니다. border-top-style요소의 상단 테두리 스타일을 설정합니다. border-top-width요소의 상단 테두리 너비를 설정합니다.

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-그림자 수직 그림자 위치, 흐림 흐림 거리, 확산 그림자 크기, 색상, 삽입/외부 그림자)

eg:

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

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

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

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

• 8. 텍스트 배치 형식

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

속성 값:

ltl: 왼쪽에서 오른쪽으로

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

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

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

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

🎜🎜10. 텍스트 그림자 🎜🎜🎜🎜🎜🎜텍스트 그림자: 참조 상자 그림자 🎜 🎜🎜🎜🎜11. 한 줄의 텍스트가 줄임표 표시를 초과합니다. 🎜🎜

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

🎜🎜 12. 여러 줄의 텍스트 줄 수가 제한을 초과하는 경우 줄임표로 바꿉니다. 🎜🎜🎜rrreee🎜자세한 프로그래밍은- 관련 지식이 있으면 🎜프로그래밍 비디오🎜를 방문하세요! ! 🎜

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