CSS3 テキストレビュー_html/css_WEB-ITnose-htmlチュートリアル-php.cn

1. CSS の初期属性は、フォント、色、テキストの 3 つのカテゴリに分類されます:

2. CSS テキストタイプには 11 の属性があります:

注: カラー属性もあります。テキストの色を設定するために使用します

3. CSS3 テキストシャドウ属性: text-shadow:none | ,] * | ; [,つまり: text-shadow:[color] x 軸の変位 (x オフセット) y 軸の変位 (y オフセット) ブラー半径 (blur-radius)、*
color: シャドウ[色] は、影の描画に使用される色を定義します。このパラメータは、テキストの色が影の色として使用されない場合、次のいずれかになります。、RGBA 透明色など。
x-offset: X 軸の変位。その値は正または負の値で、オブジェクトの右側にあります。そうでない場合、影はオブジェクト上にあります。左
y-offset: 影の垂直オフセットを指定するために使用されます。その値は正の値の場合、影はその位置にあります。
blur-radius: シャドウのブラー半径 (オプションのパラメーター) は、シャドウの外側のブラーのブラー範囲を表す、シャドウのブラー半径を設定するために使用されます。この値が大きいほど、影が外側に広がり、影のエッジがぼやけます。ただし、この値は正の値のみです。値が 0 の場合は、影にブラー効果がないことを意味します。注: 複数の影を指定でき、個別に調整できます。複数のシャドウを指定する場合は、複数のシャドウをカンマで区切ります。複数のシャドウ効果が指定された順序で適用されるため、前のシャドウが後のシャドウをカバーする可能性がありますが、テキスト自体がカバーされることはありません

ブラウザの互換性

IE との互換性の問題があるため、フィルタ :shadow を使用する必要があります。ハンドル。 filter:shadow フィルターは、dropshadow と似ています。また、オブジェクトに影の効果を生成することもできます。違いは、dropshadow が段階的な効果を生成し、影をより滑らかで繊細に見せることができることです。、方向=値、強度=数値)}

ブラウザの互換性

IEとの互換性の問題は、filter:shadowを使用することで解決する必要があります。 filter:shadow フィルターは、dropshadow と似ています。また、オブジェクトに影の効果を生成することもできます。違いは、dropshadow が段階的な効果を生成し、影をより滑らかで繊細に見せることができることです。、方向 = 値、強度 = 数値)}
E は要素セレクターです

Color はオブジェクトの影の色の設定に使用されます

Direction は投影の方向の設定に使用されます。値は 0 度、影はです。テキスト上で 45 度、シャドウはテキストの右上隅にあります。90 度、シャドウはテキストの右下隅にあります。 225 度の場合はテキストの左下にあり、270 度の場合はテキストの左上にあります。 text
Strength は影の強さであり、text-shadow のぼかし半径と似ています
注: フィルターによって生成される影の効果は、text-shadow
によって生成される効果とは大きく異なります。CSS3 オーバーフローテキスト属性: text-overflow
構文とパラメータ: text-overlfow:clip | ellipsis
属性値は 2 つだけです:
clip: 省略記号 (···) を表示せず、単純にトリミングします
ellipsis: 省略記号 (· · ) を表示しますテキストがオーバーフローし、省略マークが挿入される位置が最後の文字である場合

テキストがオーバーフローしたときにテキストをトリミングして省略マーク (....) を表示する効果を実現するには、テキストを強制する 2 つの属性の連携が必要です。 1 行で表示 (white-space:nowrap) し、オーバーフローコンテンツを非表示にする (overflow :hidden)、コンテナーの幅を定義する必要があります

ブラウザ互換性

注: text-overflow 属性は適切ですtext-overflow:ellipsis 属性のアプリケーションがサポートされるようになったのは IE シリーズでサポートされており、Opera ブラウザも

5 を認識するために独自の接頭辞 [-o-] を追加する必要があります。テキストの折り返し

ブラウザ自体にテキストを折り返す機能があります。西洋のテキストの場合、ブラウザは単語の途中で突然改行するのではなく、半角スペースまたはハイフンで自動的に行を折り返します。中国語の場合は、テキストの後に行を折り返すことができますが、通常、ブラウザは句読点に遭遇します。句読点とその前のテキストは全体として改行に統合されます。ホワイトスペース属性は、IE 独自の属性です。テキストが自動的に折り返されないことがあります。この問題を解決する方法:

(1) overflow:auto、スクロールバーを使用して制御する

(2) overflow:hidden、レイアウトを完璧にするために直接非表示にする

(3) Javascript スクリプトを使用して制御する

(4) を使用する新しい CSS3 属性のワードラップ属性

word-wrap 属性
CSS3 では、word-wrap 属性を使用して、長い単語と URL アドレスの自動行折り返しを実現します。
構文とパラメータ: word-wrap:normal | ブラウザのみ。半角スペースまたはハイフンを使用します。
break-word: 境界内でコンテンツを折り返します (折り返す英語の単語をインターセプトせずに) 唯一の欠点は、単語ごとに折り返されず、長い単語が直接切り捨てられて折り返されることです。読みにくい
注:

およびで適用される場合、word-wrap は効果がありません。

6.word-break 属性

により、自動行折り返しの処理が決定されます。特定の属性設定を通じて、ブラウザーが半角スペースまたはハイフンの後に改行を実装できるようにするだけでなく、ブラウザーが任意の位置で改行を実装できるようにします

構文とパラメーター: word-break:normal | keep -all
normal: デフォルト値、言語独自の規則に従って改行方法を決定、中国語は境界上の漢字に改行、英語は単語全体から改行
break-all: 英語の単語を強制的に切り捨てることができます単語内で改行効果を実現します
keep-all: サブ切断は許可されません。中国語の場合、前後の句読点内の中国語の文字句は完全に折り返され、英語の文字の長さがコンテナの境界を超える場合は、後続の部分がコンテナをバーストします。境界線が固定属性の場合、それ以降の部分は表示できません。

ブラウザ互換性

7.white-space 属性

は、レイアウトプロセス中に要素内の空白文字を処理する方法を宣言するために使用されます

構文とパラメーター:空白:normal || nowrap 前 || 継承
値の説明:
: デフォルト値。空白はブラウザによって無視されます。この値を使用して属性のデフォルト値を復元できます。
pre: テキストの空白はブラウザーによって保持され、その動作は HTML の

タグの効果と似ています。
nowrap: テキストは保持されません。改行タグ

pre-line: 空白文字シーケンスをマージしますが、改行文字は保持します。この属性は IE7 より前のブラウザをサポートしません。 .0、Firefox3.0、Opera9.2
pro-wrap: 空白文字シーケンスを保持しますが、この属性値は IE7.0 および Firefox3.0 未満のブラウザをサポートしません。親要素の空白属性値、およびセカンダリ属性値はすべての IE ブラウザで使用されます。ブラウザの互換性はサポートされていません。