主な「 ルールで 」CSSで：
3つのそれぞれについて簡単に説明しましょう」 ルールで 」 それらがどのように機能するかを理解する。
CSS の @import ルールとは何ですか?
「 @輸入 CSS の ” ルールは、別のスタイル シートから CSS スタイル シートをインポートするために使用されます。 Web ページのさまざまな要素のプロパティまたはスタイリングの指示を含む CSS スタイル シートがあり、同じスタイリングを別の Web ページ ファイルに追加する必要がある場合は、「 @輸入 」とそのスタイル シート (CSS プロパティを含む) の名前を右側の丸括弧で囲み、「 URL 」または逆コンマで、そのスタイル シートからすべてのプロパティをインポートして、「 @輸入 」のルールが追加されました。
構文
「」の後に書かれたCSS形式のスタイルシートファイルの名前があるはずです @輸入 」。したがって、「」を追加する構文は @輸入 スタイルシートでのルールは次のとおりです。
@輸入 「スタイルシート名.css」 ;
インポート ルールは、同じ結果を生成するため、同じ目的で次のように記述することもできます。
@輸入 URL ( スタイルシート名.css ) ;CSS の @media ルールとは何ですか?
「 @メディア 」 ルールは、Web ページにメディアの指示を追加するために使用されます。このルールは、このルールを追加するときに適用される条件に従って機能します。 「」を追加した直後に条件が追加されます @メディア 」 が右側にあり、中括弧内のルール内には、条件が真の場合に実装する必要があるプロパティまたは命令があります。
例: @media ルールの適用
例を通して理解するために、Web ページにいくつかのコンテンツを追加できます。
< 分周 クラス = '私のクラス' >< h1 > LinuxHint チュートリアルへようこそ! < / h1 >
< / 分周 >
上記のコード スニペットには、これを Web ページのコンテンツとして表示するために作成された見出しがあります。
寸法またはページ幅が増加または減少した場合にメディア命令を追加する例を見てみましょう。まず、「 @メディア 」 条件を追加し、中括弧内で、条件が「」の場合に実装する必要がある CSS プロパティを定義します。 @メディア 」が真になります：
@メディア ( 最大幅 : 700px ) {。私のクラス {
色 : 黒 ;
バックグラウンド : 緑 ;
}
}
@メディア ( 最小幅 : 700px ) と ( 最大幅 : 900px ) {
。私のクラス {
色 : 黒 ;
バックグラウンド : 黄色 ;
}
}
@メディア ( 最小幅 : 900px ) {
。私のクラス {
色 : 黒 ;
バックグラウンド : シアン ;
}
}
上記のコードでは、3 つの異なるメディア ルールが適切に実行される条件として、異なるサイズの幅について言及されています。たとえば、上記のコードのように、最小幅が 700px になると、テキストの背景色が黄色に変わります。
以下は、上記のコードによって生成された結果です。画面のサイズを変更すると、テキストの背景色が変更されます。
CSS の @font-face ルールとは何ですか?
Fontface ルールは、フォント スタイルを Web ページに直接追加する簡単な方法です。フォントは直接ダウンロードされ、このルールによってテキストに適用されます。
例: @font-face ルールの適用
「」を追加する方法を理解しましょう @font-face 」 簡単な例によるルール:
< 分周 クラス = '私のクラス' >< h1 > LinuxHint チュートリアルへようこそ! < / h1 >
< / 分周 >
上記のコード スニペットには、この投稿の前のセクションで説明したのと同じテキスト ヘッダーがあります。
実装しましょう」 @font-face 「」のルール フォントを変更する見出し:
@font-face {フォントファミリー : 「デジャブサンズ」 ;
ソース : URL ( 「./fonts/DejaVuSans.ttf」 ) フォーマット ( 「ttf」 ) ;
フォントの太さ : 500 ;
}
h1 {
フォントファミリー : 「デジャヴサンズ」 ;
フォントの太さ : 500 ;
}
上記のコード スニペットには、必要なフォント ファミリの名前と、「 URL 」 フォントがダウンロードされるはずの場所からのリンク、次に font-weight です。 「」でフォントフェイスを指定した場合 @フォントフェイス ” ルールでは、フォント フェイスの名前は、このコードで使用されているように、任意の要素で使用できます。 h1 」見出し。
このコードを実行すると、「 @フォントフェイス ' ルール。上記のコード スニペットの出力は次のようになります。
これは、「 @ 」 CSS のシンボル。
結論
「 @ ” CSS の記号は、” を追加するために使用されます。 ルールで 」をCSSで。これらのルールは、ドキュメントのスタイリングに CSS を使用しているときに非常に便利なタスクを実行します。つまり、「 @輸入 ” ルールで、条件に従って定義済みメディアに CSS プロパティを適用します @メディア 」ルールを使用して、Web ページで使用するフォントを直接ダウンロードし、「 @フォントフェイス ' ルール。