ホームページ >ウェブフロントエンド >CSSチュートリアル >CSSスタイルをHTMLに追加するにはどうすればよいですか?インライン、組み込み、外部のメリットとデメリット
CSSスタイルをHTMLに追加するにはどうすればよいですか?インライン、組み込み、外部のメリットとデメリット
- 青灯夜游オリジナル
- 2018-11-02 14:32:3116105ブラウズ
htmlCSS スタイルを追加するにはどうすればよいですか?この記事では、HTML に CSS スタイルを追加する 3 つの方法、つまりインライン スタイル、埋め込みスタイル、外部スタイルの長所と短所を紹介します。困っている友人は参考にしていただければ幸いです。
まず、HTML に CSS スタイルを追加する 3 つの方法とは何なのかを理解する必要があります。
1. インライン CSS を使用して特定の要素にルールを適用します。つまり、内部 CSS を使用し、
ドキュメント セクションに次の内容が含まれます。 CSS ルール、つまり inline3. すべての CSS ルールを含む外部ファイル (.css ファイル) へのリンク、つまり external
以下で詳しく説明します。インライン、埋め込み、外部メソッドの実装と利点と欠点。
1. インライン CSS インライン CSS は、特定の HTML タグ内で使用する必要があります。 c9ccee2e6ea535a969eb3f532ad9fe89 属性は、特定の HTML タグのスタイルを設定するために使用されます。各 HTML タグを個別にスタイル設定する必要があり、インライン CSS のみを使用すると Web サイトの管理が非常に困難になる可能性があるため、インライン CSS は使用しないことをお勧めします。ただし、特定の状況では役立つ場合があります。たとえば、CSS ファイルにアクセスできない場合や、単一の要素にのみスタイルを適用する必要がある場合などです。インライン CSS を使用した HTML ページの例は次のようになります:
<!DOCTYPE html>
<html>
<body style="background-color:black;">
<h1 style="color:white;padding:30px;">Hostinger Tutorials</h1>
<p style="color:white;">Something usefull here.</p>
</body>
</html>インライン CSS の利点:1 変更をテストしてプレビューする場合に非常に便利です。動作します。
2. 迅速な修理に非常に便利です。
3. HTTP リクエストを削減します。
インライン CSS の欠点:インライン CSS はすべての要素に適用する必要があります。
2. インライン インライン CSS スタイルは、特定のページの 93f0f5c25f18dab9d176bd4f6de5d30e セクションに CSS コードを配置します。クラスと ID は CSS コードを参照するために使用できますが、それらはその特定のページでのみアクティブになります。この方法で埋め込まれた CSS スタイルは、ページが読み込まれるたびにダウンロードされるため、読み込み速度が向上します。インライン スタイル シートの使用は、ページ テンプレートを誰かに送信する場合など、状況によっては便利です。すべてが 1 ページ内にあるため、プレビューを確認するのがはるかに簡単です。インライン CSS は c9ccee2e6ea535a969eb3f532ad9fe89531ac245ce3e4fe3d50054a55f265927 タグの間に配置する必要があります。内部スタイル シートの例:
<head>
<style type="text/css">
p {color:white; font-size: 10px;}
.center {display: block; margin: 0 auto;}
#button-go, #button-back {border: solid 1px black;}
</style>
</head>埋め込み CSS の利点: 1. スタイル シートは 1 つのページにのみ影響します。
2. 内部スタイル シートではクラスと ID を使用できます。
3. 複数のファイルをアップロードする必要はありません。 HTML と CSS は同じファイル内に含めることができます。
埋め込み CSS の欠点:1. ページの読み込み時間が長くなります。
2. これは 1 ページにのみ影響します。複数のドキュメントで同じ CSS を使用する場合は役に立ちません。
3. 外部リンクおそらく CSS を HTML ページに追加する最も便利な方法は、CSS を外部ファイル (. cssファイル）。こうすることで、外部 CSS ファイルに加えた変更が Web サイトに反映されます。外部 CSS ファイルへの参照は、ページの 93f0f5c25f18dab9d176bd4f6de5d30e セクションに配置する必要があります。例:
<head> <link rel="stylesheet" type="text/css" href="style.css" /> </head>
と style.css にはすべてのスタイル ルールが含まれています。例:
.xleftcol {
float: left;
width: 33%;
background:#809900;
}
.xmiddlecol {
float: left;
width: 34%;
background:#eff2df;
} 外部 CSS の利点: 1. HTML ページのサイズが小さくなり、構造が明確になります。
2. 読み込み速度が速くなります。
3. 同じ .css ファイルを複数のページで使用できます。
外部 CSS の欠点:
1. 外部 CSS が読み込まれる前にページが正しく表示されない可能性があります。
結論上記はこの記事の内容全体であり、HTML ページに CSS を追加するさまざまな方法を紹介しています。また、インライン スタイル シート、外部スタイル シート、内部スタイル シートの違いを理解します。さまざまな方法を使用して CSS スタイルを追加できます。学習に役立つことを願っています。 [推奨されるビデオ学習:
css チュートリアル以上がCSSスタイルをHTMLに追加するにはどうすればよいですか?インライン、組み込み、外部のメリットとデメリットの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。