CSS フォント、テキスト、リストのプロパティの詳細な紹介

1. フォントのプロパティ

colorは、div{color:red;}のようにテキストの色を指定します。

font-style は、テキストの表示方法を指定します。たとえば、p.normal {font-style: normal;} には、normal (通常の表示)、italic (斜体表示、フォント構造に若干の変更あり)、oblique (斜体表示、テキストの斜めバージョン) が含まれます。

font-variant、小文字を設定します。小文字は通常の大文字とは異なり、小文字ではありません。例 p {font-variant: small-caps; }、属性値: normal (デフォルト値)、small-caps (小文字)、inherit (親要素から継承)

font-weight は、テキストのフォントの太さを設定します。4 つの属性値があります: normal (通常、デフォルト値)、bold (太字)、bolder (太字)、lighter (細字)。また、「100 から 900」までの 9 つの数値レベルも設定できます。400 は通常に相当し、700 は太字に相当します。

font-size は、div {font-size: 30px; } のようにテキストのフォントサイズを設定します。絶対サイズを設定する単位としては通常ピクセルが使用され、相対サイズを設定する単位として em が使用されます。ブラウザのデフォルトのテキストフォントサイズは 16px = 1em です。

font-familyは、h1 {font-family:宋体, serif;}のように、テキストのフォントファミリーを定義します。ユーザーエージェントが設定されたフォントをインストールしないようにするには、特定のフォント名+ serifユニバーサルフォントファミリーを使用することでこの問題を解決できます。

背景の省略形と同様に、フォントの省略形も使用できます。

ただし、背景略語とは異なり、フォント略語の属性値は公式規則で指定された順序で記述する必要があり（上記の順序、色はフォント属性に属しません）、サイズ属性値とファミリー属性値は公式規則で指定された順序でなければなりません。

2. letter-spacing、文字間隔を設定します。例: div {letter-spacing: 3px; }

3. 不透明度、要素全体（テキスト、背景などを含む）の色の透明度を設定します。属性値の範囲は「0〜1」で、1は不透明、0は完全に透明です。RGBAの「a」に似ています。

4. オーバーフロー、コンテンツが要素ボックスから溢れたときの表示モードを設定します。属性値の設定によって制御されます。visible（デフォルト値、コンテンツは処理されず、溢れても表示されます）、hidden（非表示）、auto（自動、溢れたときにスクロールバーを表示します）、scroll（スクロールバーを表示します）

5.text-overflow、テキストが包含要素から溢れたときの表示モードを設定します。属性値: clip (テキストをクリップ)、ellipsis (トリミングされたテキストを表すために省略記号を表示)、string (トリミングされたテキストを表すために指定された文字列を使用)

6.white-space、要素内の空白と改行の処理方法を設定します

プロパティ値:

通常、空白と改行はブラウザによって無視されます

プレ、空白、改行はブラウザによって保持されます

Nowrap、テキストは同じ行に表示され、折り返されません

事前折り返し、空白を保持しながら通常どおり折り返す（改行と単語の折り返しを保持）

行頭文字、空白をマージするが改行は保持する

継承、親要素から空白プロパティ値を継承します

7.text-align、テキスト配置、属性値: left、center、right、例: p {text-align: center; }

8.text-decoration、テキストに装飾があるかどうかを指定します。属性値: none (デフォルト、なし)、underline (テキスト装飾の下線)、overline (テキスト装飾の上線)、line-through (線を通したテキスト装飾、取り消し線に似ています)、blink (テキストの点滅)

9.text-transform、テキスト内の文字の大文字と小文字を設定します。属性値: none (デフォルト、none)、capitalize (各文字の最初の文字を大文字に変換)、uppercase (すべての文字を大文字に変換)、lowercase (すべての文字を小文字に変換)

10.text-indent、テキストの最初の行のインデントを設定します。属性値は数値です。例: p {text-indent: 2em; }、属性値はピクセル (px) で表すこともできます。

11.Word-wrap、現在の行が指定されたコンテナの境界を超えたときに折り返すかどうかを設定します。属性値: normal (デフォルト、許可されたハイフネーションポイントでのみ折り返します)、break-Word (長い単語または URL アドレス内で折り返します)

12.vertical-align は、テキストの垂直方向の配置を設定します。これは、コンテナー内の要素を親要素のコンテンツに対して配置するものです。

一般的な属性値: top (上揃え)、middle (中央揃え)、bottom (下揃え)、super (上付き文字の垂直揃え)、sub (下付き文字の垂直揃え)

テストコード:

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <title>css インポート</title>
    <スタイル>
        div{
            幅: 500ピクセル;
            高さ: 300px;
            背景色: アクアマリン;
        }
        {
            表示: インラインブロック; 高さ: 150px; 幅: 100px; 背景色: ブランクダルモンド;
            垂直位置揃え:下; 余白:3em 0em 0em 0em;
        }
    </スタイル>
</head>
<本文>
    <div>
        垂直配置のテスト 垂直配置 <a href="">空のリンク</a>
    </div>
</本文>
</html>

テスト結果:

13.line-height、オブジェクトの行の高さを設定します（負の値は許可されていません）、属性値：normal（デフォルト）、number（数値を設定します。この数値は現在のフォントサイズに掛けられ、行間隔/行の高さを設定します）、length（固定値の行間隔を設定します）

通常、行の高さはテキストの行を垂直方向に中央揃えするために使用します。行の高さがコンテナの高さと等しい場合、テキストは垂直方向に中央揃えされます。

14.list-style-image は、リスト項目マーカーの画像 (箇条書き) を設定します。画像をガイドする url 属性は 1 つだけです。構文は次のとおりです: ul {list-style-image: url("markimg.jpg"); }

箇条書き全体のリセットは <ul> に適用する必要があり、個別の設定は <li> に適用されます。

15.list-style-position、リスト項目マーカーとテキストコンテンツの配置方法を設定します。属性値: outside (デフォルト、箇条書きはテキストの外側に配置されます)、inside (箇条書きはテキストの内側に配置されます)、構文: ul {list-style-position: inside; }

16.list-style-type は、リスト項目で使用されるプリセットマークを設定します (効果は HTML の ul 行の style 属性に似ています)。属性値: none (記号なし)、disc (実線の円)、circle (中空の円)、square (実線の四角形)、構文: ul {list-style-type:disc; }

17. リストスタイルの省略形。前の属性を複合属性にマージし、「リストスタイル」属性を通じて複数の属性値を定義できます。属性値の記述順序は厳密ではありません。 list-style-image list-style-position list-style-type

構文例: ul {list-style: url ("markimg.jpg") outside disc; } 。最後に箇条書きを設定する目的は、画像が正しく表示されない場合に画像を置き換えることです。

CSS フォント、テキスト、リスト属性に関するこの記事はこれで終わりです。CSS フォント、テキスト、リスト属性に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: ラベルとボタンを削除し、背景画像の点線/影を追加すると完璧な解決策になります

>>: MySQL 制約の超詳細な説明