CSS의 6가지 일반적인 텍스트 스타일(요약)

CSS 텍스트 스타일은 콘텐츠와 관련된 스타일 수정입니다. 계단식 관계에서는 내용이 배경보다 높기 때문입니다. 따라서 텍스트 스타일이 상대적으로 더 중요합니다. 어떤 사람들은 텍스트와 글꼴 스타일의 차이를 잘 이해하지 못합니다. 간단히 말해서 텍스트는 콘텐츠이고 글꼴은 이 콘텐츠를 표시하는 데 사용됩니다. 이 장에서는 일상적인 웹 개발에 누구나 사용할 수 있도록 CSS의 6가지 일반적인 텍스트 스타일(요약)을 자세히 소개합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

1. 첫 줄 들여쓰기

1. 정의

첫 줄 들여쓰기는 일반적으로 사용되는 텍스트 서식 효과로 문단의 첫 줄을 들여쓰는 것입니다. 일반적으로 중국어로 작성할 때 다음과 유사하게 두 개의 공백이 있습니다.

참고: 이 속성은 음수일 수 있습니다.

2. 사용법:

text-indent: <length> | <percentage> | inherit;

초기값: 0

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

상속: 예

백분율: 포함 블록의 너비에 비례

3 애플리케이션(코드 예)

내어쓰기:

div{
    width: 200px;
    border: 1px solid black;
    text-indent: -1em;//关键代码
    padding-left: 1em;//关键代码
}

렌더링:

헤더 단어 침몰:

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

렌더링:

2. 가로 정렬

1. 정의

가로 정렬은 요소의 텍스트에 영향을 주는 가로 정렬입니다

2.

text-align: left | center | right | justify | inherit

초기값: left

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

상속: Yes

Align 양쪽 끝

가로 정렬이 정렬되면 , 텍스트가 줄에 정확히 맞도록 단어 간격이 조정될 수 있습니다. letter-spacing의 길이 값을 지정하면 letter-spacing 값이 정상이 아닌 한 letter-spacing은 정렬의 영향을 받지 않습니다.

IE 호환

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

.box{
    width: 200px;
    height: 200px;
    background-color: pink;
    border: 1px solid black;
    text-align: right;
}    
.in{
    height: 100px;
    width: 100px;
    background-color: lightgreen;
}

<div class="box">
    <div class="in">测试文字</div>
</div>

Rendering:

3. 단어 간격

1. 정의

문자 간격 단어를 참조합니다. 간격은 텍스트나 단어 사이의 간격을 설정하는 데 사용됩니다. 실제로 "단어"는 일종의 공백 문자로 둘러싸인 공백이 아닌 문자로 구성된 문자열을 의미합니다.

참고: 단어는 공백으로 구분되며, 단어 사이의 간격은 단어 간격 + 공백 크기

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

2. Usage

word-spacing: <length> | normal | inherit

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

적용 대상: 모든 요소

상속: Yes

four , 문자 간격

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

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

사용법:

letter-spacing: <length> | normal | inherit

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

적용 대상: 모든 요소

상속 속성: Yes

5. 텍스트 변환

텍스트 변환은 영어 대소문자 변환을 처리하는 데 사용됩니다.

사용법:

text-transform: uppercase(全大写) | lowercase(全小写) | capitalize(首字母大写) | none | inherit

초기값: 없음

적용 대상: 모든 요소

상속: Yes

6. 텍스트 수정

1. 정의

텍스트 수정은 텍스트에 대한 수정 줄을 제공하는 데 사용됩니다

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

2 . Usage

text-decoration: none | [underline(下划线) || overline(上划线) || line-through(中划线)] | inherit

초기값: 없음

적용 대상: 모든 요소

상속: None

Inheritance

텍스트 수정 속성은 상속될 수 없습니다. 즉, 하위 요소 텍스트의 모든 수정 줄은 상속되지 않았습니다. 상위 요소의 색상이 동일합니다. 하위 요소의 텍스트에 있는 장식선은 실제로 상위 요소에 속하며 단지 상위 요소를 "통과"할 뿐입니다.

참고: 충돌하지 않는 여러 텍스트 수정 줄이 나타날 수 있습니다.

7. 마지막으로

　 들여쓰기(text-index), 가로 정렬(text-align), 단어 간격(word-spacing), 자간(letter-spacing), 텍스트 변환(text-transform), 텍스트 장식(text-design) 첫 번째 line) 이 6가지 텍스트 스타일 중 첫 번째 줄 들여쓰기(text-index)와 가로 정렬(text-align)은 블록 수준 요소(block 및 inline-block 포함)에만 적용할 수 있는 것이 가장 중요합니다. 주목

위 내용은 CSS의 6가지 일반적인 텍스트 스타일(요약)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!