웹 표준을 배우고 개발 및 생산을 위한 웹 표준을 따릅니다. 52CSS.com에서는 레이아웃과 관련된 많은 문제에 대해 논의해 왔으며, 페이지에 표시되는 주요 내용은 그림과 텍스트입니다. 오늘은 CSS 웹 페이지 레이아웃의 텍스트 레이아웃과 관련된 문제에 대해 논의하겠습니다.
글꼴, 색상, 크기, 단락 간격, 첫 줄 첫 줄 들여쓰기를 설정하는 방법입니다. 마지막으로 한자 잘림, 고정 너비 단어 줄 바꿈(단어 줄 바꿈 및 단어 분리) 등과 같이 웹 페이지에서 일반적으로 사용되는 중국어 레이아웃에 대해 설명합니다. 저는 단지 몇 가지 응용 프로그램 경험을 작성하고 있기 때문에 CSS 속성에 대한 완전한 소개와 보다 심층적인 연구가 필요한 경우 52CSS.com에서 더 많은 튜토리얼을 참조할 수 있습니다.
1. 글꼴 등을 이용하여 텍스트의 글꼴, 색상, 크기 등을 설정합니다.
글꼴 스타일은 기울임꼴을 설정합니다(예: 글꼴 스타일: 기울임꼴).
글꼴 가중치는 글꼴 두께와 같은 텍스트 두께를 설정합니다: 굵게;
글꼴 크기는 글꼴 크기: 12px(또는 9pt, 다른 단위의 표시 문제에 대해서는 CSS 설명서를 참조하세요)와 같은 텍스트 크기를 설정합니다.
line-height는 line-height: 150%와 같이 줄 간격을 설정합니다.
color는 텍스트 색상을 설정합니다(글꼴 색상 아님). 예: color: red;
Font-family는 글꼴을 설정합니다(예: "Lucida Grande", Verdana, Lucida, Arial, Helvetica, Song Dynamise, sans-serif).
2. 단락 레이아웃: 여백, 패딩 및 텍스트 정렬을 사용합니다.
중국어 단락은 <p> 태그(또는 다른 컨테이너)를 사용합니다. 왼쪽 및 오른쪽(들여쓰기와 동일) 및 단락 앞과 뒤의 공백에 여백이나 패딩을 사용할 수 있습니다. 예를 들어:
예제 소스 코드 [www.downcodes.com]
피{
여백: 18px 6px 6px 18px;
/*12시부터 시작하여 위쪽, 오른쪽, 아래쪽, 왼쪽, 시계 방향입니다*/
}
텍스트 정렬을 위해 text-align을 사용하세요. 예를 들면 다음과 같습니다.
예제 소스 코드 [www.downcodes.com]
피{
text-align: /*가운데 정렬*/
}
정렬 방법에는 왼쪽, 오른쪽 및 양쪽 맞춤(양쪽 끝 맞춤)이 포함됩니다.
마진과 패딩에 대해 잘 모르는 초보자들이 많습니다. 표현은 아래 그림을 참조하세요.
3. 세로 텍스트: 쓰기 모드를 사용합니다.
쓰기 모드 속성에는 lr-tb와 tb-rl의 두 가지 값이 있습니다. 전자는 기본적으로 왼쪽-오른쪽, 위-아래이고 후자는 위-아래, 오른쪽-왼쪽입니다.
예를 들어:
예제 소스 코드 [www.downcodes.com]
피{
쓰기 모드: tb-rl;
}
방향 조판과 결합될 수 있습니다.
4. 글머리 기호 문제: 목록 스타일 사용
CSS의 글머리 기호 기호에는 디스크(단색 점), 원(열린 원), 사각형(단색 사각형), 십진수(아라비아 숫자), 소문자 로마 숫자(소문자 로마 숫자), 대문자 로마 숫자(대문자 로마 숫자), 소문자 -alpha가 포함됩니다. (영문 소문자), upper-alpha (영문 대문자), none (없음). 예를 들어 다음과 같이 목록(ul 또는 ol)의 글머리 기호를 사각형으로 설정합니다.
예제 소스 코드 [www.downcodes.com]
리{
목록 스타일: 정사각형;
}
또한 목록 스타일에는 몇 가지 값이 있습니다. 예를 들어 작은 그림을 글머리 기호로 사용할 수 있으며 목록 스타일 바로 아래에 URL("그림 주소")을 작성할 수 있습니다. 그러나 52CSS.com은 이러한 접근 방식을 강력히 권장하지 않습니다. 사진을 리의 배경으로 설정하는 것이 좋습니다.
5. 드롭 캡 효과
의사 객체: 첫 글자를 글꼴 크기 및 부동 소수점과 함께 사용하여 첫 글자 장식 효과를 만들 수 있습니다.
예를 들어:
예제 소스 코드 [www.downcodes.com]
p:첫 글자{
패딩: 6px;
글꼴 크기: 32pt;
플로트: 왼쪽;
}
6. 텍스트 들여쓰기: text-indent 사용
text-indent는 컨테이너의 첫 번째 줄을 특정 단위로 들여쓰기할 수 있습니다. 예를 들어, 중국어 단락은 일반적으로 각 단락 앞에 두 개의 한자가 있습니다. 다음과 같이 작성할 수 있습니다.
예제 소스 코드 [www.downcodes.com]
피{
text-indent: 2em; /*em은 상대 단위이고, 2em은 단어 크기의 두 배입니다*/
}
글꼴 크기가 12px이면 text-indent: 2em은 24px만큼 들여쓰기됩니다.
7. 고정폭 한자 잘림: 텍스트 오버플로 사용(줄임표 효과 표시)
배경 언어는 데이터베이스의 필드 내용을 자르는 데 사용될 수 있습니다(예: 12자 한자(나중에 줄임표 사용)). 하지만 때로는 html 태그 등을 필터링해야 할 때도 있지만 CSS를 사용하여 제어하면 이러한 문제가 발생하지 않습니다. 예를 들어 목록에 다음 스타일을 적용합니다.
예제 소스 코드 [www.downcodes.com]
리{
오버플로:숨김;
텍스트 오버플로:줄임표;
공백:이제 랩;
}
8. 고정폭 한자(단어) 줄 바꿈: 단어 구분 사용
예를 들어, 고정 너비 컨테이너에 많은 장소 이름(공백으로 구분된 것으로 가정)을 표시하려는 경우 장소 이름이 중간에 깨지는 것을 방지하기 위해(즉, 한 단어가 맨 위에 있고 다른 단어가 있음) 다음 줄로 넘어갑니다). 그런 다음 단어 나누기를 사용할 수 있습니다. 예를 들어:
예제 소스 코드 [www.downcodes.com]
<div 스타일="너비:210px;높이: 200px;배경: #ccc;word-break:keep-all">
난징 상하이 상하이 난징 상하이 난징 상하이 상하이 상하이 난징 상하이 상하이 난징 상하이 상하이 난징 상하이 난징 상하이 난징 상하이 난징 상하이 난징 상하이 난징 상하이 난징 상하이 상하이 난징 상하이 상하이
</div>
내부 공간은 대체할 수 없다는 점에 주목할 필요가 있습니다(소프트 공간이 하나 이상 있어야 함). .
9. 중국어 음성 표기법: Ruby 태그 및 Ruby-align 속성 사용
예를 들어 <ruby>Zhuyin<rt style="font-size: 11px;">zhu yin</rt></ruby>의 경우 ruby-align을 사용하여 정렬을 설정할 수 있습니다. 자세한 내용은 CSS 매뉴얼에서 확인할 수 있습니다.