ホームページ > 記事 > ウェブフロントエンド > CSSスタイルをHTMLに挿入する方法
CSSスタイルをHTMLに挿入する方法
- 青灯夜游オリジナル
- 2021-09-14 16:53:3414806ブラウズ
HTML に CSS スタイルを挿入する方法: 1. style 属性を使用して、特定の HTML タグに CSS コードを挿入します; 2. ドキュメントの先頭部分のスタイル タグのペアに CSS コードを挿入します; 3 . CSS コードを外部 CSS ファイルに配置し、link タグを使用して HTML ドキュメントに導入します。
このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。
1. インライン スタイル
style 属性を使用して、特定の HTML タグ内に CSS スタイルを設定します。
各 HTML タグを個別にスタイル設定する必要があるため、インライン CSS は使用しないことをお勧めします。インライン CSS のみを使用すると、Web サイトの管理が非常に困難になる可能性があります。ただし、特定の状況では役立つ場合があります。たとえば、CSS ファイルにアクセスできない場合や、単一の要素にのみスタイルを適用する必要がある場合などです。インライン CSS を含む HTML ページの例は次のとおりです。
<body style="background-color:black;">
<h1 style="color:white;padding:30px;">Hostinger Tutorials</h1>
<p style="color:white;">Something usefull here.</p>
</body>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 セクションに配置する必要があります。
<head> <link rel="stylesheet" type="text/css" href="style.css" /> </head>
各属性の説明:
href 属性は、外部スタイル シート ファイルのアドレスを設定します。これは、相対アドレスまたは絶対アドレスにすることができます。
rel 属性は、関連するドキュメントを定義します。ここでは、関連するドキュメントがスタイル シートであることを示します。
type 属性はインポートされるファイルのタイプを定義します。style 要素と同様に、text/css は CSS テキスト ファイルを示します。
通常、2cdf5bf648cf2f33323966d7f58a7f3f タグを定義する場合、3 つの基本属性を定義する必要があり、そのうちの href は必ず設定する属性です。
リンク要素に title 属性を追加して、オプションのスタイル シートのタイトルを設定することもできます。つまり、Web ドキュメントが複数のスタイル シートをインポートするときに、適用するスタイル シート ファイルを選択できます。タイトル属性値。
ヒント: Firefox ブラウザでは、メニューで [表示 --> ページ スタイル] オプションを選択すると、サブメニューにタイトル属性値が表示されます。別のタイトル属性を選択するだけです。必要なスタイル シート ファイルを選択して適用します。 IE ブラウザはこの機能をサポートしていません。
さらに、title 属性は rel 属性に関連しています。W3C 組織の計画によると、将来の Web ドキュメントでは、スタイル シート ファイル、スクリプトなどのさまざまな外部ファイルをインポートするために複数の 2cdf5bf648cf2f33323966d7f58a7f3f 要素が使用される予定です。ファイル、テーマ ファイル、さらにその他のカスタマイズされた補足ファイルを含めることもできます。さまざまな種類や名前のファイルを多数インポートした後、title 属性を使用して選択できます。このとき、rel 属性の役割が明らかになります。Web ページ ファイルが最初に表示されるときに適用されるインポートされたファイルの種類を指定できます。現在、CSS スタイル シート タイプにのみ関連付けることができます。
外部スタイルは、CSS アプリケーションに最適なソリューションです。スタイル シート ファイルは、複数の Web ページから参照できます。同時に、インポートするリンク要素を繰り返し使用することで、Web ページ ファイルに複数のスタイル シートをインポートできます。さまざまなスタイルシート、ドキュメント。
関連する推奨事項: 「css ビデオ チュートリアル 」
以上がCSSスタイルをHTMLに挿入する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。