CSS の 6 つの一般的なテキスト スタイル (概要)

CSS テキスト スタイルは、コンテンツに関連したスタイルの変更です。カスケード関係では、コンテンツが背景よりも上位にあるためです。したがって、テキストのスタイルは比較的重要です。テキストとフォント スタイルの違いをよく理解していない人もいます。簡単に言えば、テキストはコンテンツであり、フォントはこのコンテンツを表示するために使用されます。この章では、誰もが日常の Web 開発で使用できるように、CSS の 6 つの一般的なテキスト スタイル (概要) を詳しく紹介します。困っている友人は参考にしていただければ幸いです。

1. 最初の行のインデント

1. 定義

最初の行のインデントは、段落の最初の行をインデントすることです。インデントは一般的なテキスト書式設定効果です。通常、中国語を記述する場合は、次のように先頭に 2 つのスペースがあります。

注: この属性には負の値を指定できます。使用法:

text-indent: <length> | <percentage> | inherit;

Initial。値: 0

適用対象: ブロック レベルの要素 (ブロックおよびインライン ブロックを含む)

継承: はい

パーセンテージ: 含まれるブロックの幅に対する相対値

3. アプリケーション (コード例)

ぶら下がりインデント:

div{
    width: 200px;
    border: 1px solid black;
    text-indent: -1em;//关键代码
    padding-left: 1em;//关键代码
}

レンダリング:

# ドロップ キャップ:

div{
    width: 200px;
    border: 1px solid black;
    text-indent: 0.5em;
}
div:first-letter{
    font-size: 30px;
    float: left;
}

レンダリング:

# 2. 水平方向の配置

1. 定義

水平方向の配置は、要素内のテキストに影響する水平方向の配置です。

##2. 使用法:

text-align: left | center | right | justify | inherit

初期値: left

適用対象: ブロック レベルの要素 (ブロックおよびインライン ブロックを含む)

#継承: はい

Alignment

水平方向の配置を両端揃えにすると、テキストが行全体にきちんと収まるように単語の間隔が調整されることがあります。文字間隔の長さの値を指定した場合、文字間隔の値が通常でない限り、文字間隔は位置揃えの影響を受けません。

##IE 互換

IE7 ブラウザの場合、text-align を使用すると、テキストの水平方向の配置が変更されるだけでなく、後続のブロック レベル要素の水平方向の配置も変更されます。

.box{
    width: 200px;
    height: 200px;
    background-color: pink;
    border: 1px solid black;
    text-align: right;
}    
.in{
    height: 100px;
    width: 100px;
    background-color: lightgreen;
}

<div class="box">
    <div class="in">测试文字</div>
</div>

レンダリング:

3. 単語間隔

1. 定義単語間隔とは、単語の間隔を指します。 、テキストまたは単語間の間隔を設定するために使用されます。実際、「単語」は、何らかの種類の空白文字で囲まれた非空白文字の文字列を表します。注: 単語はスペースで区切られ、単語間の間隔 = 単語間のスペース サイズ

注: 単語間隔には負の値を指定できます。

2 使用法

word-spacing: <length> | normal | inherit

初期値: 通常 (デフォルトは 0)

適用対象: すべての要素

継承: はい

4. 文字間隔

文字間隔は文字間隔を指します

注: 文字間隔は負の値にすることもできます

使用法:

letter-spacing: <length> | normal | inherit

初期値:通常 (デフォルトは 0)

適用対象: すべての要素

継承: はい

5. テキスト変換

テキスト変換は英語の大文字と小文字の変換を処理するために使用されます使用法:

text-transform: uppercase(全大写) | lowercase(全小写) | capitalize(首字母大写) | none | inherit

初期値: none

適用対象: すべての要素

継承: はい

# 6. テキストの変更。

1.定義

テキスト変更は、テキストの変更行を提供するために使用されます注: テキスト変更行の色は、テキスト変更行の色と同じです。テキストの色

2. 使用法

text-decoration: none | [underline(下划线) || overline(上划线) || line-through(中划线)] | inherit

初期値: none

適用先: すべての要素

継承:なし

継承

#テキスト装飾プロパティは継承できません。つまり、子要素のテキスト上の装飾線は親要素と同じ色になります。子要素のテキスト上の装飾線は実際には親要素に属しており、親要素を「通過」しているだけです。

注: 互いに競合しない複数のテキスト変更行が表示される場合があります。

7. 最後の

最初の行のインデント (text-index)、水平方向の配置 (text-align)、単語の間隔 (word-spacing)、文字の間隔 (letter-spacing)、テキストの変換 (text-transform)、テキストの変更 (text -装飾) 6 つのテキスト スタイルのうち、最初の行のインデント (text-index) と水平方向の配置 (text-align) は、ブロック レベルの要素 (block および inline-block を含む) にのみ適用できます。これは最も重要なことです。

に注意してください。

以上がCSS の 6 つの一般的なテキスト スタイル (概要)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。