CSSにおける@の役割は何ですか?

青灯夜游
リリース: 2022-09-16 17:22:53
オリジナル
2316 人が閲覧しました

css では、「@」は CSS の実行や動作方法を指示するステートメントです。各ルール宣言は「@」で始まり、その後に利用可能なキーワードが続きます。これは、CSS が何をすべきかを示す識別子として機能します。たとえば、「@charset」ルールは、ブラウザで使用される文字セット、「@font-」を定義します。 face」ルールを使用すると、Web ページにカスタム フォントを読み込むことができます。

CSSにおける@の役割は何ですか?

このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。

@ @import 時代は CSS1 から存在しており、CSS では at-rules と呼ばれています。

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

一般規則

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

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

@[KEYWORD] (RULE);
ログイン後にコピー

@charset

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

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

@charset "UTF-8";
ログイン後にコピー

@import

Thisルールはスタイルシートを要求することを示しており、この行では内容が正しければ外部 CSS ファイルが導入されます。

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

@import 'global.css';
ログイン後にコピー

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

@namespace

XHTML 要素はセレクターとして使用できるため、このルールは 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 にクレイジーで興味深いことを実行させることができます。この記事の例は非常に基本的なものですが、特定の状況にそれらを使用して、特定のシナリオに一致するユーザー エクスペリエンスとインタラクションを作成する方法を確認できます。

(学習ビデオ共有:

Web フロントエンド )

以上がCSSにおける@の役割は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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