logo

CSSの種類

CSS (カスケード スタイル シート) に表示される HTML 要素について説明します。 スクリーン、紙 、または 他のメディア 。時間を大幅に節約できます。複数の Web ページのレイアウトを一度に制御します。それは、 フォントサイズ、フォントファミリー、色、背景色 ページ上で。

これにより、以下を追加できるようになります 効果 または アニメーション ウェブサイトへ。を使用しております CSS 表示する アニメーション のように ボタン、エフェクト、ローダー または スピナー 、そしてまた アニメーションの背景

使うことなく CSS 、ウェブサイトは魅力的に見えません。がある 3 の種類 CSS それは以下の通りです:

  • インラインCSS
  • 内部/埋め込みCSS
  • 外部CSS
CSSの種類

1. 内部CSS

内部 CSS には、 のタグ のセクション HTML 書類。この CSS スタイルは、単一ページのスタイルを設定する効果的な方法です。複数の Web ページに CSS スタイルを使用するには、 スタイル 各ウェブページで。

次の手順で内部 CSS を使用できます。

1. まず、 HTML ページに移動して、

2. 次のコードを

 

3. ルール 新しい行に CSS を追加します。

例:

 body { background-color: black; } h1 { color: white; padding: 50px; } 

4. スタイルタグを閉じます。

 

内部 CSS を追加した後の完全な HTML ファイルは次のようになります。

 body { background-color: black; } h1 { color: red; padding: 50px; } <h2>CSS types</h2> <p>Cascading Style sheet types: inline, external and internal</p> 

セレクターも使用できます (クラスとID) スタイルシートで。

例:

 .class { property1 : value1; property2 : value2; property3 : value3; } #id { property1 : value1; property2 : value2; property3 : value3; } 

内部 CSS の長所

    内部CSSHTML ページにコードを追加する場合、複数のファイルをアップロードすることはできません。

内部 CSS の短所:

  • にコードを追加すると、 HTML 文書は ページサイズ そして ロード時間 ウェブページの。

2. 外部CSS

外部 CSS では、Web ページを外部 CSS にリンクします。 .css ファイル。それはによって作成されます テキストエディタ 。 CSS は、Web サイトのスタイルを設定するためのより効率的な方法です。を編集することで、 .css ファイルを使用すると、サイト全体を一度に変更できます。

外部 CSS を使用するには、以下の手順に従います。

1. 新規作成 .css ファイル テキストエディタ 、と追加します カスケード スタイル シート ルールも。

例えば:

 .xleftcol { float: right; width: 35%; background:#608800; } .xmiddlecol { float: right; width: 35%; background:#eff3df; } 

2. 外部への参照を追加します。 .css 直後にファイルする のタグ のセクション HTMLシート :

 

外部 CSS の長所:

  • 私たちのファイルはよりクリーンな構造で、サイズも小さくなっています。
  • 私たちも同じものを使っています .css 外部 CSS の複数の Web ページのファイル。

外部 CSS の短所:

  • 外部 CSS が読み込まれるまでは、ページを正しく配信できません。
  • 外部 CSS では、多数の CSS ファイルをアップロードすると、Web サイトのダウンロード時間が長くなる可能性があります。

3. インラインCSS

インライン CSS は、特定のスタイルを設定するために使用されます。 HTML 要素。追加 スタイル セレクターを使用せずに、各 HTML タグに属性を追加します。だけではWebサイトの管理が難しくなる可能性があります インラインCSS 。ただし、インライン CSS HTML 内の は状況によっては役に立ちます。私たちはアクセスしていません CSSファイル または要素にスタイルを適用します。

次の例では、インライン CSS を使用しています。

冬眠とは何ですか
そして

ここで役に立ちます。

インライン CSS の長所:

  • HTML ページ上に CSS ルールを作成できます。
  • インライン CSS では別のドキュメントを作成してアップロードすることはできません。

インライン CSS の短所:

  • インライン CSS、追加 CSS HTML要素に対するルールは 時間がかかる そして 混乱する HTML構造を上に上げます。
  • 複数の要素を同時にスタイル設定するため、ページ サイズやページのダウンロード時間に影響を与える可能性があります。