ホームページ > 記事 > ウェブフロントエンド > CSSスタイルをHTMLに追加するにはどうすればよいですか?
CSSスタイルをHTMLに追加するにはどうすればよいですか?
- 青灯夜游オリジナル
- 2019-06-01 10:16:2926555ブラウズ
html CSS スタイルを追加するには、インライン (style 属性を使用し、特定の HTML タグ内で使用) とインライン (style タグによって CSS コードが配置される) の 3 つの方法があります。ページの先頭部分に固有）、外部リンク（link タグを使用して外部 CSS ファイルを HTML にリンク）。
1. インライン スタイル
style 属性を使用して、特定の HTML タグ内に CSS スタイルを設定します。
各 HTML タグを個別にスタイル設定する必要があるため、インライン CSS は使用しないことをお勧めします。インライン CSS のみを使用すると、Web サイトの管理が非常に困難になる可能性があります。ただし、特定の状況では役立つ場合があります。たとえば、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>2. インライン
インライン CSS スタイルは、< 内の特定のページに CSS コードを配置します。 ;head> セクション。インライン CSS は、c9ccee2e6ea535a969eb3f532ad9fe89531ac245ce3e4fe3d50054a55f265927 タグの間に配置する必要があります。
クラスと ID は CSS コードを参照するために使用できますが、それらはその特定のページでのみアクティブになります。この方法で埋め込まれた CSS スタイルは、ページが読み込まれるたびにダウンロードされるため、読み込み速度が向上します。インライン スタイル シートを使用すると、ページ テンプレートを誰かに送信する場合など、状況によっては便利です。すべてが 1 ページ内にあるため、プレビューを確認するのがはるかに簡単です。
内部スタイル シートの例:
<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>3. 外部リンク
外部リンクは、link タグ要素を使用して外部のスタイル シートを追加することです。 CSS ファイル ( .css ファイル) は HTML ページ内で参照されており、その参照はページの 93f0f5c25f18dab9d176bd4f6de5d30e セクションに配置する必要があります。
これは、HTML ページに CSS を追加する最も便利な方法です。こうすることで、外部 CSS ファイルに加えた変更が Web サイトに反映されます。
外部スタイル シートの例:
<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;
}現在、ほとんどの Web サイトでは外部スタイル シートが使用されています。外部スタイル シートは、別のドキュメントに記述され、さまざまな Web ドキュメントに添付されるスタイルです。外部スタイル シートは、接続されているすべてのファイルに影響します。つまり、20 ページの Web サイトがあり、すべてのページが同じスタイル シートを使用している場合、変更が必要な場合は、スタイル シートを編集するだけでそれらのページを完成させることができます。タームサイト管理が容易になります。
以上がCSSスタイルをHTMLに追加するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。