ホームページ >ウェブフロントエンド >CSSチュートリアル >CSS で !重要なルールを使用するにはどうすればよいですか? (コード例)
CSS で !重要なルールを使用するにはどうすればよいですか? (コード例)
- 青灯夜游オリジナル
- 2019-02-20 09:56:134290ブラウズ
Web サイトのコーディング方法を学ぶ最良の方法の 1 つは、他の Web サイトのソース コードを見て、いくつかの役立つテクニックを学ぶことです。ソース コードを表示すると、コード内に「!重要」という文字が表示される場合がありますが、これは何を意味するのでしょうか?用途は何ですか?次の記事では、!重要なルールについて説明します。お役に立てば幸いです。
#!重要なルールは何ですか?使い方？
! important は、指定された CSS スタイル ルールの適用優先度を高めるために使用される CSS ルールです。これは、CSS 値の末尾に追加されて、より重み付けされます。 [ビデオチュートリアルの推奨:CSS チュートリアル]
CSS では、スタイル ルールが要素にカスケード方式で適用されます。次のリストの重みが大きいほど、重みは小さくなります。 ● ブラウザ スタイル: Web ブラウザによって宣言されるデフォルトのスタイルです。 # ユーザー宣言スタイル: ユーザーがブラウザー オプションを使用して設定したカスタム スタイル、または開発者デバッグ ツールを通じて変更されたカスタム スタイル。 # 開発中に宣言されたスタイル: Web サイト開発者によって CSS スタイル シートで宣言されたスタイルです。 # !重要なルールを含む開発者が宣言したスタイル。 # !重要なルールを含むユーザー スタイル。 #!重要なルールの使用例:<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
#container{
width: 450px;
height: 200px;
font-size: 25px;
}
#example{
color:red !important;
}
#container #example{
color:pink;
}
</style>
</head>
<body>
<div id="container">
<div id="example">PHP中文网！</div>
</div>
</body>
</html>レンダリング:
説明の例:
この例では、最初にインクルードがあります!重要なルールのスタイルは、要素 (#example) のテキストの色を赤として定義します。次に、この要素 (#example) のテキストの色をピンクに変更する別のスタイルがあります。なぜなら！重要なステートメントであるため、要素 (#example) のテキストの色はピンクではなく赤になりました。使わなかったら！重要な場合、色はピンクになります。
#!重要なルールをいつ使用するか?絶対に必要な場合を除き、!重要なルールを使用しないでください。!重要なルールを使用すると、スタイル シートの自然なカスケード効果が損なわれ、コードの保守が困難になります。ただし、使用しなければならない状況もあります。 important:
1. Web サイト
をテストおよびデバッグする場合、! important ルールは非常に役立ちます。コードに CSS の問題があり、特定のスタイルが適用されていることを確認したい場合は、! important ルールを使用して、より良い方法が見つかるまでサイトの問題を一時的に修正できます (これは可能性があります)。しばらく時間がかかる）。
2. 出力スタイル シート
#!重要なルールは、他のものによって上書きされることなくスタイルが適用されることを保証するために、出力スタイル シートにも使用できます。
結論! important の使用はパフォーマンスに悪影響を及ぼしませんが、保守性の観点から、絶対に必要な場合を除き、可能な限り ! important の使用を避けてください。ルールとしては、特別な状況でのみ使用する必要があります。 以上がこの記事の全内容です、皆様の学習のお役に立てれば幸いです。さらにエキサイティングなコンテンツについては、PHP 中国語 Web サイトの関連チュートリアルのコラムに注目してください。 ！ ！
以上がCSS で !重要なルールを使用するにはどうすればよいですか? (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。