CSS-@ルール

この章では、次の重要な@ルールについて説明します-

* @ import：*ルールは、別のスタイルシートを現在のスタイルシートにインポートします。
@ charset ルールは、スタイルシートが使用する文字セットを示します。
@ font-face ルールは、ドキュメントで使用するフォントフェイスを完全に記述するために使用されます。
*！important *ルールは、ユーザー定義のルールが作成者のスタイルシートよりも優先されることを示します。

注-以降の章でカバーする他の@ルールがあります。

@importルール

@importルールを使用すると、別のスタイルシートからスタイルをインポートできます。スタイルシートの最初のルールの前に表示され、その値はURLです。

次の2つの方法のいずれかで書くことができます-

<style type = "text/css">
   <!--
      @import "mystyle.css";
      or
      @import url("mystyle.css");
      .......other CSS rules .....
   -->
</style>

@importルールの重要性は、モジュールアプローチでスタイルシートを開発できることです。さまざまなスタイルシートを作成して、必要な場所に含めることができます。

@charsetルール

ASCIIまたはISO-8859-1以外の文字セットを使用してドキュメントを作成している場合、スタイルシートが書き込まれている文字セットを示すために、スタイルシートの上部に@charsetルールを設定できます。

@charsetルールは、スタイルシートの直前にスペースを入れずに記述する必要があります。値は引用符で囲まれ、標準の文字セットの1つである必要があります。たとえば-

<style type = "text/css">
   <!--
      @charset "iso-8859-1"
      .......other CSS rules .....
   -->
</style>

@ font-faceルール

@ font-faceルールは、ドキュメントで使用するフォントフェイスを完全に記述するために使用されます。 @ font-faceは、ダウンロード用のフォントの場所を定義するためにも使用できますが、これは実装固有の制限に達する可能性があります。

一般的に、@ font-faceは非常に複雑であり、フォントメトリックの専門家以外には使用しないことをお勧めします。

ここに例があります-

<style type = "text/css">
   <!--
      @font-face {
         font-family: "Scarborough Light";
         src: url("http://www.font.site/s/scarbo-lt");
      }
      @font-face {
         font-family: Santiago;
         src: local ("Santiago"),
         url("http://www.font.site/s/santiago.tt")
         format("truetype");
         unicode-range: U+??,U+100-220;
         font-size: all;
         font-family: sans-serif;
      }
   -->
</style>

！importantルール

カスケードスタイルシートのカスケード。これは、スタイルがブラウザーによって読み取られるのと同じ順序で適用されることを意味します。最初のスタイルが適用され、次に2番目のスタイルが適用されます。

！importantルールは、CSSをカスケードする方法を提供します。また、常に適用されるルールも含まれます。！importantプロパティを持つルールは、CSSドキュメントのどこに表示されていても常に適用されます。

たとえば、次のスタイルシートでは、最初に適用されるスタイルプロパティが赤であっても、段落テキストは黒になります。

<style type = "text/css">
   <!--
      p { color: #ff0000; }
      p { color: #000000; }
   -->
</style>

そのため、プロパティが常に適用されるようにする場合は、！importantプロパティをタグに追加します。したがって、段落テキストを常に赤にするには、次のように記述する必要があります-

<html>
   <head>
      <style type = "text/css">
         p { color: #ff0000 !important; }
         p { color: #000000; }
      </style>
   </head>

   <body>
      <p>finddevguides.com</p>
   </body>
</html>

ここで、_p \ {color：＃ff0000！important;を作成しました。 } _必須。別のルール_p \ {color：＃000000;を定義した場合でも、このルールは常に適用されます。 } _

それは次の結果を生成します-

Css-at-rules

目次

CSS-@ルール

@importルール

@charsetルール

@ font-faceルール

！importantルール