Web 標準を学び、開発と運用の Web 標準に従います。 52CSS.com では、レイアウトに関する多くの問題について議論してきました。ページに表示される主なコンテンツは画像とテキストです。今日は、CSS Web ページ レイアウトにおけるテキスト レイアウトに関する問題について説明します。
フォント、色、サイズ、段落スペース、ドロップキャップ、最初の行のインデントを設定する方法。最後に、中国語の文字の切り捨て、固定幅のワードラップ (ワードラップとワードブレーク) など、Web ページで一般的に使用される中国語レイアウトについて説明します。私はアプリケーションの経験を書いているだけなので、CSS プロパティの完全な概要とより詳細な学習が必要な場合は、52CSS.com のその他のチュートリアルを参照してください。
1. フォントなどで文字のフォント、色、サイズなどを設定します。
font-style は、font-style: italic; のように斜体を設定します。
font-weight は、font-weight:bold; のようにテキストの太さを設定します。
font-size は、font-size: 12px (または 9pt、さまざまな単位での表示の問題については CSS マニュアルを参照してください) などのテキスト サイズを設定します。
line-height は、line-height: 150%; のように行間隔を設定します。
color はテキストの色を設定します (フォントの色ではないことに注意してください)。例: color: red;
font-family は、font-family などのフォントを設定します。「Lucida Grande」、Verdana、Lucida、Arial、Helvetica、Song Diagnostic、sans-serif (これは一般的な書き方です)。
2. 段落レイアウト: マージン、パディング、テキストの配置を使用します。
中国語の段落では、<p> タグ (または他のコンテナ) を段落の左右 (インデントに相当) および前後の空白に使用できます。例えば：
ソースコードの例 [www.downcodes.com]
p{
マージン: 18 ピクセル 6 ピクセル 6 ピクセル 18 ピクセル;
/*それらは、12 時から時計回りに上、右、下、左です*/
}
テキストの配置には text-align を使用します。例:
ソースコードの例 [www.downcodes.com]
p{
text-align: center; /*中央揃え*/
}
整列方法には、左揃え、右揃え、両端揃えなどがあります。
マージンとパディングにあまり慣れていない初心者も多いので、その表現については下の図を参照してください。
3. 縦書きテキスト: 書き込みモードを使用します。
writing-mode 属性には lr-tb と tb-rl の 2 つの値があり、前者はデフォルトの左-右、上-下、後者は上-下、右-左です。
例えば：
ソースコードの例 [www.downcodes.com]
p{
書き込みモード: tb-rl;
}
方向写植と組み合わせることができます。
4. 箇条書き問題: リスト形式の使用
CSS の箇条書き記号には、ディスク (黒点)、円 (白丸)、四角形 (黒四角)、小数点 (アラビア数字)、下位ローマ字 (小文字のローマ数字)、上位ローマ字 (大文字のローマ数字)、下位 - アルファが含まれます。 (英小文字)、アルファ大文字 (英大文字)、なし (なし)。たとえば、次のようにリストの箇条書き (ul または ol) を四角形に設定します。
ソースコードの例 [www.downcodes.com]
リ{
リストスタイル: 正方形;
}
さらに、list-style にはいくつかの値もあります。たとえば、いくつかの小さな画像を箇条書きとして使用し、list-style の直下に URL (「画像アドレス」) を記述するだけです。しかし、52CSS.com はこのアプローチを強く推奨しません。写真をliの背景として設定することをお勧めします。
5. ドロップキャップ効果
疑似オブジェクト: first-letter を font-size および float とともに使用して、ドロップ キャップ効果を作成できます。
例えば：
ソースコードの例 [www.downcodes.com]
p:最初の文字{
パディング: 6px;
フォントサイズ: 32pt;
フロート: 左;
}
6. テキストのインデント: text-indent を使用します。
text-indent は、コンテナ内の最初の行を特定の単位でインデントできます。たとえば、中国語の段落には通常、各段落の前に 2 つの漢字があります。次のように書くことができます:
ソースコードの例 [www.downcodes.com]
p{
text-indent: 2em; /*em は相対単位であり、2em は単語の 2 倍のサイズです*/
}
font-size が 12px の場合、text-indent: 2em は 24px でインデントされます。
7. 固定幅の漢字の切り捨て: テキスト オーバーフローを使用します (省略記号効果を表示します)。
バックグラウンド言語を使用すると、データベース内のフィールドの内容 (たとえば、12 文字の漢字 (後で省略記号を使用)) を切り詰めることができます。ただし、HTMLタグなどをフィルタリングする必要がある場合がありますが、CSSを使用して制御するとこの問題は発生しません。たとえば、次のスタイルをリストに適用します。
ソースコードの例 [www.downcodes.com]
リ{
オーバーフロー:非表示;
テキストオーバーフロー:省略記号;
ホワイトスペース:ナラップ;
}
8. 固定幅の漢字（単語）の改行: word-break を使用します。
たとえば、固定幅のコンテナ内に多数の地名 (スペースで区切られているものとします) を表示する場合、地名が途中で途切れる (つまり、1 つの単語が上に、別の単語が表示される) ことを避けるために、次の行に分割されます)。その後、ワードブレークを使用できます。例えば：
ソースコードの例 [www.downcodes.com]
<div style="width:210px;height:200px;background:#ccc;word-break:keep-all">
南京 上海 上海 南京 上海 南京 上海 上海 南京 上海 南京 上海 南京 上海 南京 上海 南京 上海 南京 上海 南京 上海 南京 上海 南京 上海 上海 南京 上海 上海
</div>
内部のスペースは置き換えることができないことに注意してください (少なくとも 1 つのソフト スペースが必要です)。 。
9. 中国語の発音表記：rubyタグとruby-align属性の使用
たとえば、<ruby>注音<rt style="font-size: 11px;">注音</rt></ruby>の場合、ruby-align を使用して配置を設定できます。詳細については、CSS マニュアルの Ruby-align 項目を参照してください。