웹 표준을 배우고 개발 및 생산을 위한 웹 표준을 따릅니다. 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. 단락 레이아웃: 여백, 패딩 및 텍스트 정렬을 사용합니다.
중국어 단락은
태그(또는 다른 컨테이너)를 사용합니다. 왼쪽 및 오른쪽(들여쓰기와 동일) 및 단락 앞과 뒤의 공백에 여백이나 패딩을 사용할 수 있습니다. 예를 들어:
예제 소스 코드 [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]
9. 중국어 음성 표기법: Ruby 태그 및 Ruby-align 속성 사용
예를 들어 Zhuyin의 경우 ruby-align을 사용하여 정렬을 설정할 수 있습니다. 자세한 내용은 CSS 매뉴얼에서 확인할 수 있습니다.