[CSS 注 5] CSS の書式設定と組版

1. テキスト レイアウト: フォント
CSS スタイルを使用して、Web ページ内のテキストのフォント、フォント サイズ、色、その他のスタイル属性を設定できます。次のコードは、Web ページのテキストのフォントを Song Diagnostics に設定する例を見てみましょう。

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

ここで一般的ではないフォントを設定しないように注意してください。設定したフォントがユーザーのローカル コンピューターにインストールされていない場合、ブラウザのデフォルト フォントが表示されるからです。 (設定したフォント スタイルをユーザーが表示できるかどうかは、設定​​したフォントがユーザーのローカル コンピューターにインストールされているかどうかによって異なります。)
現在、ほとんどの Web ページでは、次のように「Microsoft Yahei」を設定することが好まれています:

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

または

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

注: 最初の方法は 2 番目の方法よりも互換性があります。

このフォントは美しく、クライアントで安全に表示できるためです (通常、デフォルトでローカルにインストールされます)。

2. テキストのレイアウト: フォント サイズ、色
次のコードを使用して、Web ページ上のテキストのフォント サイズを 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. 段落の書式設定: インデント
段落前の習慣中国語のテキスト 2 つのテキスト間のスペースを空にします。この特別なスタイルは次のコードで実現できます:

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

注: 2em はテキストのサイズの 2 倍を意味します。

8. 段落レイアウト: 行間隔 (行の高さ)
行間隔 (行の高さ) 属性 (line-height) は、段落の行間隔を 1.5 倍に設定します。

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

9. 段落の組版: 中国語の文字間隔、文字間隔
Web ページのレイアウトでテキスト間隔または文字間隔を設定したい場合は、次のコードのように、letter-spacing を使用してそれを実現できます。 : このスタイルは英語で使用され、単語に関しては文字間の間隔を設定します。

単語間隔の設定:

英語の単語間の間隔を設定したい場合はどうすればよいですか?これは、単語間隔を使用して実現できます。次のコード:

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

10. 段落レイアウト: 配置

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

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

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