CSS ページ レイアウト テクニックの詳細な紹介

以下は、私がまとめた CSS ページ レイアウト テクニックの詳細な紹介です。興味のある学生は参照してください。

テキストスタイルを設定する

1. フォントタイプ

ほとんどのユーザーシステムでデフォルトでサポートされている中国語フォントは Song、Hei、Youyuan、Kai です。デフォルトでサポートされている英語フォントは Arial です。 、Arial Black、Arial Narrow、Century Gothic、Comic SansMS、Times New Romanなど。使用する際には、Song 王朝と Arial が最も頻繁に使用されます。

CSS は、フォントの種類を設定するための font-family プロパティを提供します。
例: p{font-family: 宋体;}
注: 複数のフォント属性が同時に設定されている場合、優先順位が高くなります。

2. フォントサイズ

CSSは、フォントサイズを設定するためのfont-size属性を提供します。
例: p{font-size: 12px;}

相対サイズ
px、em、10%、大きい、小さい (最後の 2 つは親要素に対して相対的です)

絶対サイズ
pt、pc、cm 単位、 mm

キーワード
xx-small、x-small、small、large、x-large、xx-large

3. フォントの太字

CSS は、フォントを太字に設定する font-weight 属性を提供します。 。
例:p{font-weight:bold;}

数値:100、200、…、900

キーワード:bold、bolder、lighter、normal

4. テキストの色

CSS は color プロパティを提供しますテキストの色を設定します。
例: p{color: red;}

色の名前: 赤、緑、…

RGB 値: (255,255,255),….

16 進値: #ff0000,…

5. 斜体

CSS は、斜体を設定するための font-style 属性を提供します。属性値には、normal、italic、oblique の 3 つがあります。
例: p{font-style: italic;}

6. 下線、下線、取り消し線

CSS には、下線、下線、取り消し線を設定するための font-decoration 属性が用意されています。属性値は、underline (下線)、blink (点滅する文字)、overline (上の行)、line-through (取り消し線) の 4 つです。
例: p{font-decoration: Underline;}

7. 英語の大文字と小文字の区別

CSS は、英語の文字の大文字と小文字を設定する font-transform 属性を提供します。属性値は 4 つあります: none、capitalize (最初の文字が大文字)、uppercase (すべて大文字)、および lowercase (すべて小文字)。
例: p{font-transform: none;}

8. テキスト段落スタイル

水平方向の配置
CSS は水平方向の配置を設定する text-align 属性を提供します。属性値は、left (左揃え)、right (右揃え)、center (中央揃え)、justify (両端揃え) の 4 つです。
例: p{text-align: left;}

垂直方向の配置
CSS は、垂直方向の配置を設定するための writing-mode 属性とlayout-flow 属性を提供します。

文法: lr-tb; (左-右-上-下)
書き込み-モード: tb-rl; (上-下-右-左)
レイアウトフロー: 水平配置; layout-flow:vertical-ideographic; (縦方向の配置)

最初の行のインデント

CSS は、最初の行のインデントを設定する text-indent プロパティを提供します。属性値はピクセル値またはパーセンテージにすることができます。
例: p{text-indent: 12px;}

行間隔

CSSには、行間隔を設定するためのline-height属性が用意されています。属性値には長さの値を指定できます。
例: p{line-height: 12px;}

文字間隔

CSSには文字間隔を設定するためのletter-spacing属性が用意されています。属性値には長さの値を指定できます。
例: p{letter-spacing: 12px;}
役に立ちます。

関連記事:

CSSの基礎知識を詳しく解説

js/cssファイルを動的に操作する方法とは

CSSでスプライトやフォントアイコンを実装

以上がCSS ページ レイアウト テクニックの詳細な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。