ホームページ > ウェブフロントエンド > フロントエンドQ&A > 3 種類の CSS ルールとは何ですか?

3 種類の CSS ルールとは何ですか?

青灯夜游
リリース: 2022-07-27 20:29:59
オリジナル
3854 人が閲覧しました

3 種類の CSS ルール: 1. インライン スタイル シート。style 属性を使用して CSS コードを HTML マークアップに直接追加します。構文 " マーク>」。 2. 内部スタイルシートの「」タグ内にCSSスタイルを記述し、「

3 種類の CSS ルールとは何ですか?

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

CSS は、HTML スタイルを表現するために使用されるプログラミング言語であり、Web ページとコンテンツを分離できるスタイル言語です。

CSS は主に Web ページのスタイルをデザインし、Web ページを美しくするために使用されます。Web ページを静的に変更するだけでなく、さまざまなスクリプト言語と組み合わせて Web ページのさまざまな要素を動的にフォーマットすることもできます。

CSS は、Web ページ内の要素の位置のレイアウトをピクセルレベルで正確に制御でき、ほぼすべてのフォント サイズ スタイルをサポートし、Web ページのオブジェクトとモデル スタイルを編集する機能を備えています。

CSS スタイルには主に次の 3 種類があります。インライン スタイル (インライン スタイル)、内部スタイル (インライン スタイル)、外部スタイル (アウトライン スタイル)

1. インラインスタイル (埋め込みスタイル):

構造内、つまりタグ内に記述されるスタイル; タグの先頭部分内に記述される style 属性の間で。

<标记 style="样式的属性名1:样式的属性值1;属性名2:属性值2;......"></标记>
ログイン後にコピー

例:

<h1 style="color:red;">style属性的应用</h1>
ログイン後にコピー

3 種類の CSS ルールとは何ですか?

このメソッドを使用すると、要素のスタイルを個別に簡単に定義できます。

3 種類の CSS ルールとは何ですか?

#利点:

  • スタイル シート ファイルを使用しないと、ある時点で効率を向上させることができます;

  • style 属性を使用したスタイル効果は最も強力で、他の導入方法の同じスタイル効果をオーバーライドします。

欠点:

  • 複数の要素でスタイルを共有するのは難しく、コードの再利用には役立ちません;

  • HTML と CSS コードが混在しているため、プログラマーや検索エンジンにとって読みにくくなっています。

2. 内部スタイル (インライン スタイル):

は HTML ページ内に記述され、head に保存されます。タグ このうち、スタイルはstyleタグに記述されます。

<style>选择器 {属性名:属性值;属性名:属性值;......}</style>
ログイン後にコピー

例:


3 種類の CSS ルールとは何ですか?

3 種類の CSS ルールとは何ですか?##利点: インライン スタイル シートと同じで、追加のリクエストは生成されません。また、最初は構造とスタイルの分離を実現しており、これは単一ページの Web サイト アプリケーションにより適しています。

欠点: 内部スタイル シートが HTML ファイルに記述されているため、ページが不純で、ファイル サイズが大きく、Web クローラーが情報を取得しにくく、メンテナンスが困難です。ページ間でスタイルを共有することはできません

3. 外部スタイル (外部スタイル): #コードは css ファイルに記述されます。次に、 リンク タグを使用してページにリンクし、リンク ステートメントはページの タグ領域に配置する必要があります。

CSS スタイルが Web ページ ドキュメントの外部のファイルに配置されている場合、それは外部スタイル シートと呼ばれます。CSS スタイル シート ドキュメントは外部スタイル シートを表します。

実際、外部スタイル シートは拡張子 .css を持つテキスト ファイルです。 CSS スタイル コードをテキスト ファイルにコピーし、.css ファイルとして保存すると、それは外部スタイル シートになります。

以下は外部スタイル シートです:

3 種類の CSS ルールとは何ですか?外部スタイル シートの導入方法:

HTML ファイルが .css 拡張子を持つスタイル シートを参照するには、リンク タイプとインポート タイプの 2 つの方法があります。

1)、CSS リンク スタイル

リンク スタイルとは、CSS スタイル シートを外部で定義し、拡張子 .CSS を持つファイルを形成し、それを タグ領域に配置する必要があります。

文法:

<link type="text/css" rel="styleSheet"  href="CSS文件路径" />
ログイン後にコピー

2)、CSS インポート スタイル

インポート スタイルは、@import

構文を通じて