CSS での @ ルールの使用法

不言
リリース: 2018-06-12 16:00:43
オリジナル
1604 人が閲覧しました

この記事では、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; }
        }
ログイン後にコピー

以上がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

関連する推奨事項:

CSS コードを記述する際の高パフォーマンスの概要

CSS スタイルのオーバーライド ルール

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

関連ラベル:
css
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート