[CSS 노트 5] CSS 서식 및 조판

1. 텍스트 레이아웃: 글꼴
CSS 스타일을 사용하여 웹페이지 텍스트의 글꼴, 글꼴 크기, 색상 및 기타 스타일 속성을 설정할 수 있습니다. 다음 코드 구현을 살펴보겠습니다. 웹 페이지의 텍스트에 대한 글꼴을 Song Wang으로 설정합니다.

body{font-family:"宋体";}

여기서 일반적이지 않은 글꼴을 설정하지 않도록 주의하세요. 설정한 글꼴이 사용자의 로컬 컴퓨터에 설치되어 있지 않으면 브라우저의 기본 글꼴이 표시되기 때문입니다. (설정한 글꼴 스타일을 사용자가 볼 수 있는지 여부는 설정한 글꼴이 사용자의 로컬 컴퓨터에 설치되어 있는지 여부에 따라 달라지기 때문입니다.)
요즘 대부분의 웹페이지에서는 다음 코드와 같이 "Microsoft Yahei"를 설정하는 것을 선호합니다. :

body{font-family:"Microsoft Yahei";}

또는

body{font-family:"微软雅黑";}

참고: 첫 번째 방법이 두 번째 방법보다 호환성이 더 좋습니다.

이 글꼴은 아름답고 클라이언트에서 안전하게 표시할 수 있기 때문입니다(보통 기본적으로 로컬에 설치됨).

2. 텍스트 레이아웃: 글꼴 크기, 색상
다음 코드를 사용하여 웹 페이지 텍스트의 글꼴 크기를 12픽셀로 설정하고 글꼴 색상을 #666(회색)으로 설정할 수 있습니다. ):

body{font-size:12px;color:#666}

3. 텍스트 레이아웃: 굵게
또한 CSS 스타일을 사용하여 텍스트 스타일을 변경할 수 있습니다: 굵게, 기울임꼴, 밑줄, 취소선 다음 코드를 사용하여 텍스트를 설정할 수 있습니다. 굵은 스타일로 표시됩니다.

p span{font-weight:bold;}

텍스트에 굵은 글꼴을 설정하려면 이를 구현하기 위한 별도의 CSS 스타일이 있습니다. 더 이상 굵은 글꼴 스타일을 구현하기 위해 h1-h6 또는 강한 태그를 사용할 필요가 없습니다.

4. 텍스트 형식: 기울임꼴
다음 코드는 브라우저에서 텍스트를 기울임꼴로 표시할 수 있습니다.

p a{font-style:italic;} <p>三年级时，我还是一个<a>胆小如鼠</a>的小女孩。</p>

5 텍스트 형식: 밑줄
경우에 따라 텍스트를 시각적으로 강조할 수 있는 밑줄 스타일로 설정하려는 경우 다음 코드를 사용하여 이를 달성할 수 있습니다.

p a{text-decoration:underline;} <p>三年级时，我还是一个<a>胆小如鼠</a>的小女孩。</p>

6. 텍스트 레이아웃: 취소선
취소선은 다음 코드를 사용하여 달성할 수 있습니다:

.oldPrice{text-decoration:line-through;}

7. 단락 조판: 들여쓰기
중국어 텍스트에서는 단락 앞에 두 개의 공백을 두는 것이 관례입니다. 다음과 같이 사용할 수 있습니다. 구현할 코드:

p{text-indent:2em;} <p>1922年的春天，一个想要成名名叫尼克卡拉威（托比?马奎尔Tobey Maguire 饰）的作家，离开了美国中西部，来到了纽约。
那是一个道德感渐失，爵士乐流行，走私为王，股票飞涨的时代。为了追寻他的美国梦，他搬入纽约附近一海湾居住。</p>

참고: 2em은 텍스트 크기의 두 배를 의미합니다.

8. 단락 조판: 줄 간격(줄 높이)
줄 간격(줄 높이) 속성(줄 높이)은 문단 조판에서 중요한 역할을 합니다. 줄 간격은 1.5배입니다.

p{line-height:1.5em;} <p>菲茨杰拉德，二十世纪美国文学巨擘之一，兼具作家和编剧双重身份。他以诗人的敏感和戏剧家的想象为"爵士乐时代"吟唱华丽挽歌，
其诗人和梦想家的气质亦为那个奢靡年代的不二注解。</p>

9. 단락 조판: 한자 간격 및 글자 간격
웹 페이지 레이아웃에서 텍스트 간격이나 글자 간격을 설정하려면 그림과 같이 글자 간격을 사용하면 됩니다. 다음 코드에서:

h1{ letter-spacing:50px; } ... <h1>了不起的盖茨比</h1>

참고: 이 스타일이 영어 단어에 사용될 때 문자 사이의 간격을 설정합니다.

단어 간격 설정:

영어 단어 사이의 간격을 설정하고 싶다면 어떻게 해야 하나요? 이는 단어 간격을 사용하여 달성할 수 있습니다. 다음 코드:

h1{ word-spacing:50px; } ... <h1>welcome to imooc!</h1>

10. 단락 레이아웃: 정렬
블록 요소의 텍스트와 이미지에 중앙 정렬 스타일을 설정하고 싶으십니까? 텍스트 정렬 스타일 코드를 사용하면 텍스트를 중앙에 표시할 수 있습니다.

h1{ text-align:center; } <h1>了不起的盖茨比</h1>

을 왼쪽으로 설정 가능:

h1{ text-align:left; } <h1>了不起的盖茨比</h1>

을 오른쪽으로 설정 가능:

h1{ text-align:right; } <h1>了不起的盖茨比</h1>

위 내용은 [ CSS Notes 5] CSS 서식 및 조판 내용입니다. 더 많은 관련 내용은 PHP 중국어 홈페이지(www.php.cn)를 참고해주세요!