CSS 레이아웃에서 일반적으로 사용되는 텍스트 레이아웃 관련 속성에 대한 자세한 설명

이 글은 CSS 레이아웃에서 일반적으로 사용되는 텍스트 레이아웃 관련 속성에 대한 자세한 설명을 제공합니다. 필요한 친구들이 참고할 수 있기를 바랍니다.

CSS 레이아웃에서 일반적으로 사용되는 텍스트 레이아웃 관련 속성에 대한 자세한 설명

1. 글꼴 등을 사용하여 텍스트 글꼴, 색상, 크기 등을 설정합니다.

font-style 이탤릭체를 설정합니다(예: Font-style: italic;

font-weight는 텍스트 두께를 설정합니다(예:font-weight:bold;

#) 🎜🎜#font-size는 텍스트 크기를 설정합니다(예: 글꼴 크기: 12px(또는 9pt, 다른 단위의 표시 문제는 CSS 설명서 참조))

line-height는 줄 간격을 설정합니다. , 예: line-height: 150%;

color는 텍스트 색상을 설정합니다(font-color 아님 참고). 예: color: red;

font-family는 텍스트 색상을 설정합니다. 글꼴, 예: " Lucida Grande", Verdana, Lucida, Arial, Helvetica, Song Dynamise, sans-serif(일반적인 작성 방법)

2. 단락 서식: 사용 여백, 패딩 및 텍스트 정렬.

중국어 단락은 e388a4556c0f65e1904146cc1a846bee 태그(다른 컨테이너일 수도 있음)를 사용하며 왼쪽 및 오른쪽(들여쓰기와 동일) 및 단락 전후의 공백은 여백 또는 심. 예:

샘플 코드

p{
margin: 18px 6px 6px 18px;
/*分别是上、右、下、左，十二点开始的顺时针方向*/
}

텍스트 정렬을 위해 텍스트 정렬을 사용합니다. 예:

샘플 코드

p{
text-align: center; /*居中对齐*/
}

#🎜 🎜 #정렬 방법에는 왼쪽, 오른쪽, 양쪽 맞춤(양쪽 끝 정렬)이 포함됩니다.

3. 세로 텍스트: 쓰기 모드를 사용합니다.

쓰기 모드 속성에는 lr-tb와 tb-rl의 두 가지 값이 있습니다. 전자는 기본적으로 왼쪽-오른쪽, 위-아래이고 후자는 위-아래, 오른쪽-왼쪽입니다.

예:

샘플 코드

p{
writing-mode: tb-rl;
}

는 방향 조판과 결합될 수 있습니다.

4. 글머리 기호 관련 문제: 목록 스타일 사용

CSS 글머리 기호에는 디스크(속이 채워진 점), 원(빈 원), 사각형(속이 채워진 사각형) ), 소수가 포함됩니다. (아라비아 숫자), lower-roman(로마 숫자 소문자), upper-roman(로마 숫자 대문자), lower-alpha(영문 소문자), upper-alpha(영문 대문자), none(없음). 예를 들어 목록(ul 또는 ol)의 글머리 기호를 다음과 같이 사각형으로 설정합니다.

샘플 코드

li{
list-style: square;
}

또한 목록 스타일에는 몇 가지 값이 있습니다. 예를 들어, 작은 사진을 글머리 기호로 사용할 수 있습니다. URL("사진 주소")을 목록 스타일로 직접 작성하면 됩니다. 그러나 Mb5u.com은 이러한 접근 방식을 강력히 권장하지 않습니다. 사진을 리의 배경으로 설정하는 것이 좋습니다.

5. 첫 글자 장식 효과

의사 객체: 첫 글자에 글꼴 크기 및 부동 소수점을 결합하면 첫 글자 장식 효과를 만들 수 있습니다.

예:

샘플 코드

p:first-letter{
padding: 6px;
font-size: 32pt;
float: left;
}

6. 텍스트 들여쓰기: text-indent 사용

text-indent 컨테이너의 첫 번째 줄을 특정 단위로 들여쓰기할 수 있습니다. 예를 들어, 중국어 단락은 일반적으로 각 단락 앞에 두 개의 한자가 있습니다. 다음과 같이 작성할 수 있습니다:

Sample code

p{
text-indent: 2em; /*em是相对单位，2em即现在一个字大小的两倍*/
}

Iffont-size가 12px이면 text-indent: 2em은 24px만큼 들여쓰기됩니다.

7. 고정폭 한자 잘림: 텍스트 오버플로 사용(줄임표 효과 표시)

배경 언어를 사용하면 데이터베이스의 필드 내용을 자를 수 있습니다. 잘린 12개의 한자(뒤에 타원이 옴)로 표시됩니다. 하지만 때로는 html 태그 등을 필터링해야 할 때도 있지만 CSS를 사용하여 제어하면 이러한 문제가 발생하지 않습니다. 예를 들어 목록에 다음 스타일을 적용합니다.

Sample code

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

8. 고정폭 한자(단어) 줄 바꿈: word-break#🎜🎜 사용 #

예를 들어, 고정 너비 컨테이너에 많은 장소 이름(공백으로 구분된 것으로 가정)을 표시하려는 경우 장소 이름이 중간에 깨지는 것을 방지하기 위해(즉, 한 단어가 맨 위에 있고 다른 단어는 다음 줄로 구분됩니다.) 그런 다음 단어 나누기를 사용할 수 있습니다. 예:

샘플 코드

<div style="width:210px;height: 200px;background: #ccc;word-break:keep-all">
南京上海 上海上 南 上海上海 南京 上海上海上海 南京上海 上海 南京上海 上海 南京 上海 南京 上海 南京 上海 南京 上海 南京 上海 南京上海 上海 南京上海 上海
</div>

내부 공백은 교체할 수 없다는 점에 주목할 가치가 있습니다(소프트 공간이 하나 이상 있어야 함).

9. 중국어 음성 표기법: Ruby 태그 및 ruby-align 속성을 사용합니다.

예: ec41f2147470148e85ad0337a362103e rt style="font-size: 11px;">zhu yine1cd1ef8331b2927cc680afad7b5de598724a7e8dc86cc99e3aa1ae8f042e0e8, ruby-align을 사용하여 정렬을 설정할 수 있습니다. 자세한 내용은 CSS 매뉴얼에서 확인할 수 있습니다.

위 내용은 CSS 레이아웃에서 일반적으로 사용되는 텍스트 레이아웃 관련 속성에 대한 자세한 소개입니다.

CSS3 튜토리얼

에 대해 자세히 알고 싶으시면 주의하세요. PHP 중국어 웹사이트.

위 내용은 CSS 레이아웃에서 일반적으로 사용되는 텍스트 레이아웃 관련 속성에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!