5つのまったく使用されていないCSSプロパティ-jsチュートリアル-php.cn

5つのまったく使用されていないCSSプロパティ

Christopher Nolan

リリース： 2025-03-07 00:39:08

オリジナル

878 人が閲覧しました

あまり知られていないCSS属性をマスターし、Webデザインのスキルを向上させます！この記事では、すべての最新のブラウザで機能する5つの実用的ではあるがめったに使用されないCSSプロパティを紹介し、トリッキーなWebデザインの課題を解決するのに役立ちます。

5 Rarely-Used CSS Properties 多くのCSS属性があり、いくつかの珍しく使用されている属性は簡単に忘れられます。ここに5つの実用的だがあまり知られていないCSSプロパティがあります：

テキストケース変換（テキストトランスフォーム）：このプロパティは、HTML要素テキストのケースを変更するために使用され、HTMLコードを変更せずにデザイナーがスタイルを簡単に調整できるようにします。主な値には、capitalize（capsular）、lowercase（小文字）、uppercase（capsular）、none（変更なし）が含まれます。 IEブラウザーがfont-variantに設定されている場合、small-caps値のパフォーマンスは異なる場合があることに注意してください。 none
文字間隔と単語間隔： HTMLでページテキストを書くことは、メンテナンスが容易であり、SEOを助長します。 キャラクター間隔（Px、em、ex、％など）を調整できます。たとえば、letter-spacingh2 { letter-spacing: 0.1em; }類似していますが、単語間隔に作用します。 word-spacing

例：

Text-Indent：テキストブロックの最初の行の左インデント（またはtext-indentが「rtl」に設定されているときの右インデント）を定義します。たとえば、direction。 p { text-indent: 10px; }も同様の効果を達成することができますが、paddingは要素の幅に影響を与えず、以下などのIE互換メニューなどのシナリオで非常に役立ちます。 text-indent

ul#menu li a {
    display: block;
    width: 100%; /* IE hasLayout applied */
    text-indent: 10px;
}

ログイン後にコピー

テーブル幅（テーブルレイアウト）を修正：
テーブルは引き続きテーブルデータに使用されますが、ブラウザがデフォルトで「auto」になると、列の幅をスタイリングするのが難しい場合があります。セルのテキストがより多くのスペースを必要とする場合、自動アルゴリズムが指定したテーブル幅を上書きする場合があります。ブラウザが指定したテーブル幅に準拠するように強制するようにを「固定」に設定します。 table-layout table-layout
ホワイトスペースの取り扱い：
ブラウザがHTMLで白人をどのようにレンダリングするかを決定します。クロスブラウザーのサポートは不均一ですが、次のプロパティは良好なプロパティと互換性があります：（ホワイトスペースは単一の文字に折りたたまれ、必要に応じてニューラインは単一の文字に折りたたまれますが、ラインブレークは抑制されます）、white-space normal nowrap pre コードスニペットをレンダリングするときは

のテーブルで：

white-space table-layout

すべての行を一貫したテキストにしたい場合（たとえば、JSプロンプトボックスを使用してフルテキストを表示する）、CSSの高さをtrまたはtd要素の設定は無効ですが、white-space：

ul#menu li a {
    display: block;
    width: 100%; /* IE hasLayout applied */
    text-indent: 10px;
}

ログイン後にコピー

5 Rarely-Used CSS Properties リファレンス：

FAQ これらの属性を理解することで、ユニークなスタイルとエフェクトを提供するWeb開発スキルを大幅に向上させることができ、共通の属性が解決できない設計上の問題を解決し、より魅力的なWebサイトを作成します。

CSSの「CH」ユニットとそれを使用する方法は何ですか？ユニットは、現在のフォントの「0」文字の幅を表し、テキストサイズでスケーリングする幅またはマージンを設定するために使用されます。

CSSの「calc（）」はどのように機能しますか？
関数を使用すると、計算を実行してCSS属性値を決定できます。
CSSの「CurrentColor」キーワードとの使用方法は何ですか？ ch
キーワードは、要素の現在の色値を指します。これは、要素の
calc()
CSSの「オブジェクトフィット」属性はどのように機能しますか？
プロパティは、コンテナに合うように画像またはビデオのサイズ変更方法を指定します。
currentColorcolorCSSの「ライティングモード」属性との使用方法は何ですか？
object-fit
CSSの「タブサイズ」属性はどのように機能しますか？
属性タブ文字の幅を指定し、デフォルト値は8スペースです。
writing-mode
CSSの「サイズ」属性とそれを使用する方法は何ですか？
属性により、ユーザーは要素のサイズを変更できます。
tab-size
CSSの「アウトラインオフセット」属性はどのように機能しますか？
プロパティアウトラインと要素のエッジまたは境界線の間のスペースを指定します。
resize
CSSの「すべて」属性とそれをどのように使用するか？
プロパティは、すべてのCSSプロパティをリセットする略語プロパティです（
およびを除く）。 outline-offset

以上が5つのまったく使用されていないCSSプロパティの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。