CSS の書式設定と組版
☆フォント、CSS スタイルを使用して、Web ページ内のテキストのフォント、フォント サイズ、色、その他のスタイル属性を設定できます。次のコードは、Web ページのテキストのフォントを Song Diagnostics に設定する例を見てみましょう。
body{font-family:"宋体";}
ここで珍しいフォントを設定しないように注意してください。設定したフォントがユーザーのローカル コンピュータにインストールされていない場合、ブラウザのデフォルト フォントが表示されるからです。 (設定したフォント スタイルがユーザーに表示されるかどうかは、設定したフォントがユーザーのローカル コンピューターにインストールされているかどうかに依存するためです。)
☆ フォント サイズと色、次のコードを使用してテキストのフォント サイズを設定できます。 Web ページ上の を 12 ピクセルに変更し、フォントを変更します。 カラーを #666 (グレー) に設定します:
body{font-size:12px;color:#666}
☆太字、CSS スタイルを使用して変更することもできます。テキスト スタイル: 太字、斜体、下線、取り消し線。次のコードを使用して、テキストを太字スタイルで表示するように設定できます。
p scan{font-weight:bold;}
ここでは、テキストの太字を設定したい場合、それを実現するための別の CSS スタイルがあることがわかります。太字を実現するために h1-h6 または Strong を使用する必要はなくなりました。スタイル。
☆斜体、次のコードはブラウザで斜体スタイルで表示されるテキストを実現できます:
p a{font-style:italic;}
☆下線、場合によっては、テキストを下線スタイルに設定したい場合があります。 , 視覚的にテキストを強調するには、次のコードを使用してそれを実現できます:
p a{text-decoration:underline;}
☆取り消し線、Web ページに取り消し線を設定したい場合はどうすればよいでしょうか。スタイルは電子商取引ウェブサイトでよく見られます
元の価格の取り消し線は、次のコードを使用して実現できます:
.oldPrice{text-decoration:line-through;}
☆中国語のテキストでは、インデントが慣例です。段落の前に 2 つのスペースを残すには、次のコードを使用します。
p{text-indent:2em;}
☆行間隔 (行の高さ) は段落のレイアウトで重要な役割を果たします。段落の行間隔を 1.5 倍に設定するように実装します。
p{line-height:1.5em;}
☆文字間隔、文字間隔、Web ページのレイアウトでテキスト間隔や文字間隔を設定したい場合は、以下に示すように、letter-spacing を使用してそれを実現できます。コード:
h1{
letter -spacing:50px;
}
...
注: このスタイルを英単語で使用すると、文字間の間隔が設定されます。
☆単語間隔の設定、英語の単語間の間隔を設定したい場合はどうすればよいですか?これは、単語間隔を使用して実現できます。次のコード:
h1{
word-spacing:50px;
}
...
☆配置、ブロック要素内のテキストと画像を中央揃えにしたいスタイル？ text-align スタイル コードを使用すると、テキストを中央揃えで表示できます。
h1{
text-align:center;
}
CSSボックスモデル
☆要素の分類、CSSレイアウトを説明する前に、事前に知っておく必要があります。 CSSでは、htmlのラベル要素は、一般的にブロック要素、インライン要素（インライン要素とも呼ばれます）、インラインブロック要素の3種類に分類されます。
一般的に使用されるブロック要素は次のとおりです:
、
