CSS の @ ルールの使用法を共有する

この記事では主に CSS の @ ルールの使用法を共有します。これは、CSS の入門学習のための基礎知識です。必要な友達は参照してください。

at-rule は、CSS の実行方法や動作方法を説明するステートメントです。 。各宣言は @ で始まり、その後に CSS が何をすべきかを示す識別子として機能する利用可能なキーワードが続きます。これは一般的な構文ですが、各 at ルールには他の構文のバリエーションもあります。
一般規則

一般規則は以下の構文に従います:

コードは次のとおりです:

@[KEYWORD] (RULE);

@charset
この規則は、スタイルシートに非 ASCII 文字が含まれる場合にブラウザで使用される文字セットを定義します (例: :UTF-8)。 HTTP ヘッダーに配置された文字セットは @charset ルールをオーバーライドすることに注意してください。コードは次のとおりです:

@charset "UTF-8";

@import

このルールは、コンテンツが正しい場合、この行でスタイルシートが要求されることを示します。 、外部 CSS ファイルがインポートされます。
コードは次のとおりです:

@import 'global.css';

一般的な CSS プリプロセッサはすべて @import をサポートしていますが、ネイティブ CSS とは動作が異なることに注意してください。ネイティブ CSS の場合、プリプロセッサは CSS ファイルを取得し、CSS ファイルに処理します。各 @import は独立した HTTP リクエストです。

@namespace
XHTML 要素は CSS のセレクターとして使用できるため、このルールは CSS を XML HTML (XHTML) に適用する場合に非常に役立ちます。
コードは次のとおりです:

/* Namespace for XHTML */
@namespace url(http://www.w3.org/1999/xhtml);
/* Namespace for SVG embedded in XHTML */
@namespace svg url(http://www.w3.org/2000/svg);

ネストされたルール

ネストされたルールには追加のサブセット宣言が含まれており、その一部は特定の状況でのみ使用できます。

コードは次のとおりです:

@[KEYWORD] {
          /* Nested Statements */
        }

@document

このルールはスタイルシートの条件を指定します: 特定のページにのみ適用できます。たとえば、URL を指定してこの特定のページのスタイルをカスタマイズすると、他のページではこれらのスタイルは無視されます。
コードは次のとおりです:

@document 
/* Rules for a specific page */
url(http://css-tricks.com/),
/* Rules for pages with a URL that begin with... */
url-prefix(http://css-tricks.com/snippets/),
/* Rules for any page hosted on a domain */
domain(css-tricks.com),
/* Rules for all secure pages */
regexp("https:.*")
{
/* Start styling */
body { font-family: Comic Sans; }
}

@font-face

このルールにより、カスタム フォントを Web ページに読み込むことができます。カスタム フォントのサポートにはさまざまな程度がありますが、このルールはこれらを作成して提供するステートメントを受け入れます。フォント。
コードは次のとおりです:

@font-face {
          font-family: 'MyWebFont';
          src:  url('myfont.woff2') format('woff2'),
                url('myfont.woff') format('woff');
        }

@keyframes

多くの CSS プロパティの中でも、このルールはキーフレーム アニメーションの基礎であり、アニメーションの開始と終了をマークすることができます。
コードは次のとおりです:

@keyframes pulse {
          0% {
            background-color: #001f3f;
          }
          100% {
            background-color: #ff4136;
          }
        }

@media

このルールには、特定の画面のスタイルを指定するために使用できる条件宣言が含まれており、画面適応型スタイルで役立ちます。
コードは次のとおりです:

/* iPhone in Portrait and Landscape */
        @media only screen 
          and (min-device-width: 320px) 
          and (max-device-width: 480px)
          and (-webkit-min-device-pixel-ratio: 2) {
            .module { width: 100%; }
        }

またはドキュメントの印刷時にスタイルを適用するだけです

コードは次のとおりです:

@media print {
        }

@page

このルールは、印刷される個々のページのスタイルを定義します。特に、ページの疑似要素:first、:left、:right のマージンを設定できます
コードは次のとおりです:

@page :first {
          margin: 1in;
        }

@supports

このルールは、ブラウザが特定の機能をサポートしているかどうかをテストできます。条件が満たされると、特定のスタイルがこれらの要素に適用されます。 Modernizr に少し似ていますが、実際には CSS プロパティです。

コードは次のとおりです:

/* Check one supported condition */
        @supports (display: flex) {
          .module { display: flex; }
        }
        /* Check multiple conditions */
        @supports (display: flex) and (-webkit-appearance: checkbox) {
          .module { display: flex; }
        }

概要

at-ruleはCSSにクレイジーで興味深いことを実行させることができます。この記事の例は基本的なものですが、特定の状況にそれらを使用して、特定のシナリオに一致するユーザー エクスペリエンスとインタラクションを作成する方法を確認できます。

以上がCSS の @ ルールの使用法を共有するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。