第2章 CSSの適用方法

Dec 19, 2016 pm 04:01 PM

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 までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

VueでBootstrapの使用方法 VueでBootstrapの使用方法 Apr 07, 2025 pm 11:33 PM

vue.jsでBootstrapを使用すると、5つのステップに分かれています。ブートストラップをインストールします。 main.jsにブートストラップをインポートしますブートストラップコンポーネントをテンプレートで直接使用します。オプション:カスタムスタイル。オプション:プラグインを使用します。

HTML、CSS、およびJavaScriptの理解:初心者向けガイド HTML、CSS、およびJavaScriptの理解:初心者向けガイド Apr 12, 2025 am 12:02 AM

webdevelopmentReliesOnhtml、css、andjavascript:1)htmlStructuresContent、2)cssStylesit、および3)Javascriptaddsinteractivity、形成、

HTML、CSS、およびJavaScriptの役割:コアの責任 HTML、CSS、およびJavaScriptの役割:コアの責任 Apr 08, 2025 pm 07:05 PM

HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。

ブートストラップに写真を挿入する方法 ブートストラップに写真を挿入する方法 Apr 07, 2025 pm 03:30 PM

ブートストラップに画像を挿入する方法はいくつかあります。HTMLIMGタグを使用して、画像を直接挿入します。ブートストラップ画像コンポーネントを使用すると、レスポンシブ画像とより多くのスタイルを提供できます。画像サイズを設定し、IMG-Fluidクラスを使用して画像を適応可能にします。 IMGボーダークラスを使用して、境界線を設定します。丸い角を設定し、IMGラウンドクラスを使用します。影を設定し、影のクラスを使用します。 CSSスタイルを使用して、画像をサイズ変更して配置します。背景画像を使用して、背景イメージCSSプロパティを使用します。

ブートストラップにスプリットラインを書く方法 ブートストラップにスプリットラインを書く方法 Apr 07, 2025 pm 03:12 PM

ブートストラップスプリットラインを作成するには2つの方法があります。タグを使用して、水平方向のスプリットラインを作成します。 CSS Borderプロパティを使用して、カスタムスタイルのスプリットラインを作成します。

ブートストラップのフレームワークをセットアップする方法 ブートストラップのフレームワークをセットアップする方法 Apr 07, 2025 pm 03:27 PM

Bootstrapフレームワークをセットアップするには、次の手順に従う必要があります。1。CDNを介してブートストラップファイルを参照してください。 2。独自のサーバーでファイルをダウンロードしてホストします。 3。HTMLにブートストラップファイルを含めます。 4.必要に応じてSASS/LESSをコンパイルします。 5。カスタムファイルをインポートします(オプション)。セットアップが完了したら、Bootstrapのグリッドシステム、コンポーネント、スタイルを使用して、レスポンシブWebサイトとアプリケーションを作成できます。

ブートストラップのサイズを変更する方法 ブートストラップのサイズを変更する方法 Apr 07, 2025 pm 03:18 PM

Bootstrapの要素のサイズを調整するには、次のものを含むDimensionクラスを使用できます。

ブートストラップボタンの使用方法 ブートストラップボタンの使用方法 Apr 07, 2025 pm 03:09 PM

ブートストラップボタンの使用方法は?ブートストラップCSSを導入してボタン要素を作成し、ブートストラップボタンクラスを追加してボタンテキストを追加します

See all articles