CSS レイアウトでよく使用されるテキスト レイアウト関連のプロパティの詳細な説明

この記事では、CSS レイアウトでよく使用されるテキスト レイアウト関連の属性について詳しく説明します。必要な方は参考にしていただければ幸いです。

CSSレイアウトでよく使われるテキストレイアウト関連の属性の詳細説明

1. フォントなどを使用して、テキストのフォント、色、サイズなどを設定します。

font-style は、font-style: italic などの斜体を設定します。

font-weight は、font-weight: bulled;

font-size などのテキストの太さを設定します。 font-size: 12px などのテキスト サイズを設定します (または 9pt、さまざまな単位での表示の問題については CSS マニュアルを参照してください)

line-height 行間隔を設定します (line-height: 150 など) %;

color は、color: red などのテキストの色を設定します (font-color ではないことに注意してください)。

font-family は、font-family: "Lucida Grande" などのフォントを設定します。 、Verdana、Lucida、Arial、Helvetica、ソング スタイル、サンセリフ; (これが一般的な書き方です)

2. 段落のレイアウト: マージン、パディング、テキストの配置を使用します。

中国語の段落では、e388a4556c0f65e1904146cc1a846bee タグ (他のコンテナも使用可能) を段落の左右 (インデントに相当) と空白で使用できます。例:

サンプル コード

p{
margin: 18px 6px 6px 18px;
/*分别是上、右、下、左，十二点开始的顺时针方向*/
}

テキスト配置メソッドは text-align を使用します。例:

サンプル コード

p{
text-align: center; /*居中对齐*/
}

配置メソッドには left が含まれます。そして右揃え (両端揃え)

#3. 縦書きテキスト: 書き込みモードを使用します。

writing-mode 属性には、lr-tb と tb-rl の 2 つの値があります。前者はデフォルトの左-右、上-下であり、後者は上-下、右-左です。

例:

サンプルコード

p{
writing-mode: tb-rl;
}

は、方向組版と組み合わせることができます。

4. 箇条書きに関する問題: リスト スタイルの使用法

CSS の箇条書き記号には、円盤 (黒点)、円 (白抜きの円)、四角形 (黒の四角形)、小数点 (アラビア数字) が含まれます。 )、Lower-Roman (小文字のローマ数字)、Upper-Roman (大文字のローマ数字)、Lower-alpha (小文字の英字)、upper-alpha (大文字の英字)、none (なし)。たとえば、リストの箇条書き (ul または ol) を次のように四角形に設定します。

サンプル コード

li{
list-style: square;
}

さらに、list-style には次のような値もあります。小さな画像をアイテムシンボルとして使用できます。リスト形式の直下に URL (「画像アドレス」) を書き込むだけです。しかし、Mb5u.com はこのアプローチを強く推奨しません。写真をliの背景として設定することをお勧めします。

5. ドロップ キャップ効果

疑似オブジェクト: 最初の文字と font-size および float を組み合わせると、ドロップ キャップ効果を作成できます。

例:

サンプル コード

p:first-letter{
padding: 6px;
font-size: 32pt;
float: left;
}

6. テキストのインデント: text-indent

text-indent を使用して、コンテナ内の最初の行をインデントします。とあるユニット。たとえば、中国語の段落には通常、各段落の前に 2 つの漢字があります。次のように記述できます。

サンプル コード

p{
text-indent: 2em; /*em是相对单位，2em即现在一个字大小的两倍*/
}

font-size が 12px の場合、text-indent: 2em は 24px でインデントされます。

7. 固定幅の中国語文字の切り捨て: テキスト オーバーフローを使用します (省略記号効果を表示)

バックグラウンド言語を使用して、データベース内のフィールドの内容を切り捨てます (たとえば、12 文字の中国語を切り捨てます)。 (その後に省略記号が続きます)。ただし、HTMLタグなどをフィルタリングする必要がある場合がありますが、CSSを使用して制御するとこの問題は発生しません。たとえば、次のスタイルをリストに適用します。

サンプル コード

li{
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}

8. 固定幅の漢字 (単語) 改行: word-break

For を使用します。たとえば、地名が途中で途切れる（つまり、ある単語が上にあり、別の単語が上にある）ことを避けるために、固定幅のコンテナに多くの地名を表示します（スペースで区切られていると仮定します）。次の行に分割されます)。その後、ワードブレークを使用できます。例:

サンプル コード

<div style="width:210px;height: 200px;background: #ccc;word-break:keep-all">
南京上海 上海上 南 上海上海 南京 上海上海上海 南京上海 上海 南京上海 上海 南京 上海 南京 上海 南京 上海 南京 上海 南京 上海 南京上海 上海 南京上海 上海
</div>

内部のスペースは置き換えることができないことに注意してください (少なくとも 1 つのソフト スペースが必要です)。

9. 漢字の発音表記: ルビタグとルビ揃え属性を使用します。

例: ec41f2147470148e85ad0337a362103ert style="font; -size: 11px; ">zhu yine1cd1ef8331b2927cc680afad7b5de598724a7e8dc86cc99e3aa1ae8f042e0e8、ruby-align を使用して位置合わせを設定できます。詳細については、CSS マニュアルの Ruby-align 項目を参照してください。

上記は、CSS レイアウトで一般的に使用されるテキスト レイアウト関連の属性について詳しく説明したものです。

CSS3 チュートリアル について詳しく知りたい場合は、PHP 中国語 Web サイトに注目してください。

以上がCSS レイアウトでよく使用されるテキスト レイアウト関連のプロパティの詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。