ホームページ  >  記事  >  ウェブフロントエンド  >  第2章 CSSの適用方法

第2章 CSSの適用方法

黄舟
黄舟オリジナル
2016-12-19 16:01:541184ブラウズ

C SSSSの宣言方法

この章からCSSの応用について紹介していきます。もちろん、最初に紹介するのはスタイルシート(スタイルシート)の作成方法であり、その宣言方法やWebページへの適用方法も含めて最後にCSSの特徴についてもいくつか説明します。大まかに言えば、CSS を宣言するには 3 つの方法があります。 1. 基本宣言: CSS を宣言する最も一般的な方法。要素{プロパティ:値} 中国語で表現すると要素(ラベル){プロパティ(プロパティ)名:設定値} 例:H3{COLOR:BLUE}の文の集合です。 2. 集団宣言: 1 つまたは複数のコンポーネント (ラベル) のスタイル ルール (プロパティ) のグループまたは配列 (ルールの各グループ間はセミコロンで区切られます) を同時に宣言します (各コンポーネント (ラベル) の間はカンマで区切られます)。コンポーネント(ラベル) {プロパティ(プロパティ)名1:設定値1; プロパティ(プロパティ)名2:設定値2;... } または コンポーネントA(ラベルA)、コンポーネントB(ラベルB)、コンポーネントC(ラベル) C), ... {プロパティ (属性) 名 1: 設定値 1; プロパティ (属性) 名 2: 設定値 2;...} 例: TD {COLOR: BLUE;font-size: 9pt;} またはTD,P,DIV {COLOR: BLUE;font-size: 9pt; } 3. サブ項目の宣言: 多くのスタイル ルールをグループ化し、個別に宣言します。コンポーネント A (ラベル A) {プロパティ (プロパティ) 名 1: 設定値 1; プロパティ (プロパティ) 名 2: 設定値 2; }コンポーネント A (ラベル A) {プロパティ (プロパティ) 名 3: 設定値 3 ;属性) 名前 4: 設定値 4; } 例: TD { COLOR: BLUE; font-size: 9pt}TD { font-family: "standard italic style";宣言されたプロパティが異なるため、互いに競合することはありません。誤って同じプロパティを 2 回宣言した場合、後で宣言した設定のみが有効になります。ちなみに、文の形式が正しければ、大文字小文字、空白、改行に関係なく、自分の習慣に従って記述できます。

CSS 応募方法

次に紹介するのは、作成したスタイルシートをWebページに適用する基本的な4つの方法です。 1. STYLE 属性を使用します。STYLE 属性を個々のコンポーネント タグに直接追加します。 <コンポーネント(ラベル) STYLE="プロパティ(プロパティ)1: 設定値1; プロパティ(プロパティ)2: 設定値2; ...} 例: この使い方の利点は、タグごとに柔軟にスタイルを適用できることですが、欠点は文書全体の「統一性」がないことです。 。 2. STYLE タグを使用します。 タグにスタイル ルールを記述します。 例: 通常は 構造は Web ページの セクションに記述されます。この使用法の利点は、宣言されたコンポーネントがある限り、スタイル ルールが適用されることです。欠点は、個々のコンポーネントに柔軟性がないことです。 3. LINK タグを使用します。スタイル ルールを .css スタイル ファイルに記述し、それを タグで導入します。スタイル ルールを example.css ファイルとして保存すると、スタイル内のすべてを適用するには、Web ページに を追加するだけで済みます。ファイルのスタイルが策定されました。 LINK タグは通常、Web ページの /HEAD> セクションに記述されます。この使用法の利点は、同じスタイル ルールが適用される複数のドキュメントを同じスタイル ファイルに割り当てることができることです。欠点は、個々のファイルやコンポーネントに柔軟性がないことです。 4. @import を使用して導入します。これは LINK の使用法とよく似ていますが、 に配置する必要があります。 例: 文末のセミコロンに注意してください。 lineは絶対に欠かせない!覚えて、覚えて!もちろん、LINK を使用する場合でも @import を使用する場合でも、他の人の既存のスタイル シートを直接適用することは可能です。ただし、インターネットのマナーとして、このようなことを下手に行う場合は、少なくとも相手に通知し、同意を得るべきです。 4 つの適用方法にはそれぞれ長所と短所があり、矛盾することなく総合的に使用できます。ただし、同じプロパティが繰り返し宣言されている場合は、アプリケーションの優先順位の問題を考慮する必要があります。一般に、優先順位は次の原則に従います。 Web デザイナーのスタイル設定 > ユーザーのスタイル設定 > ブラウザのスタイル設定 STYLE 属性のスタイル設定 > STYLE タグのスタイル設定 > チェーン リンクされたスタイル設定の後に宣言されたスタイル設定 > いわゆる「前のスタイル設定の「リンクされたスタイル設定」は、上記の LINK タグと @import の 2 つの適用方法を指します。ノットはスタイル設定に含まれます。上記は、CSS の最も基本的な宣言と適用方法の紹介です。これらの基本的な理解と方法があれば、すぐにスタイル シートの作成を開始できます。上記の基本的な申告・申請方法以外にも申告・申請方法がありますので、次の章で紹介します。

上記は第 2 章 CSS 適用方法の内容です。さらに関連する内容については、PHP 中国語 Web サイト (www.php.cn) に注目してください。


声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。