HTML+CSS学習メモ(10)

テキスト レイアウト - フォント

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

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

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

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

または

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

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

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

テキスト レイアウト - フォント サイズ、色

次のコードを使用して、Web ページ上のテキストのフォント サイズを 12 ピクセルに設定し、フォントの色を #666 ( grey):

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

テキスト レイアウト - 太字

CSS スタイルを使用してテキストのスタイルを変更することもできます: 太字、斜体、下線、取り消し線 次のコードを使用できます。太字で表示されるテキストを設定します。

p span{font-weight:bold;}

ここでは、テキストの太字を設定したい場合、それを実現するための別の CSS スタイルがあることがわかります。太字を実現するために h1-h6 や強力なタグを使用する必要はなくなりました。

テキストの書式設定 -- 斜体

次のコードは、ブラウザに斜体スタイルで表示されるテキストを実現できます:

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

テキストの書式設定 -- 下線

場合によっては、テキストを視覚的に強調できるようにテキストを下線スタイルに設定する必要があります。これを実現するには、次のコードを使用します。

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

テキスト レイアウト -- 取り消し線。

Web ページに取り消し線を設定するには、このスタイルは電子商取引 Web サイトでよく見られます:

上の図の元の価格に取り消し線を引く次のコード これは実現できます:

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

段落レイアウト - インデント

中国語のテキストでは、段落の前に 2 つのスペースを残すのが通例です。 テキスト スペース。この特別なスタイルは、次のコードで実現できます。

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

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

段落レイアウト - 行間隔 (行の高さ)

段落レイアウトで重要な役割を果たすもう 1 つの行間隔 (行の高さ) 属性 (line-height) は、段落の行の設定を実装します。間隔は1.5倍です。

段落組版 - 漢字の文字間隔と文字間隔

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

漢字の文字間隔と文字間隔の設定:

で組版したい場合Web ページ 次のコードに示すように、letter-spacing を使用して

文字間隔

または 文字間隔 を設定できます。

注: このスタイルは英単語に使用され、文字

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

と文字

の間の間隔を設定します。

単語間隔の設定:

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

段落レイアウト -- 配置

h1{    word-spacing:50px;}...<h1 id="hello-shuaishuai">hello shuaishuai!</h1>

ブロック要素

内のテキストと画像の中央揃えスタイルを設定しますか? text-align スタイル コードを使用すると、テキストを中央揃えで表示できます。

左側に設定することもできます:

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

右側に設定することもできます:

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

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

---