ホームページ > 記事 > ウェブフロントエンド > HTMLにCSSを追加する方法
HTMLにCSSを追加する方法
- (*-*)浩オリジナル
- 2019-05-28 15:47:118892ブラウズ
CSS を HTML に追加するには、主にインライン、埋め込み、リンク、インポートの 4 つの方法があります。
1. インライン スタイル
インライン スタイルは、style 属性に CSS スタイルを設定します。タグ。この方法は CSS の利点を反映していないため、お勧めできません。
<div style = "width:100px;height:100px;>我是行内样式</div>
2. Embedded
Embedded とは、Web ページの
タグ ペアに CSS スタイルを記述することです。形式は次のとおりです。<head> <style type="text/css"> ...此处写CSS样式 </style> </head>
欠点は、多くの Web ページが含まれる Web サイトの場合、各 Web ページで埋め込みを使用してスタイルを変更するのが非常に面倒なことです。単一の Web ページでは、埋め込みの使用を検討できます。
3. インポート タイプ
独立した .css ファイルを HTML ファイルに導入します。インポート タイプでは、CSS ルールを使用して外部 CSS ファイルを導入します。
<style type="text/css"> @import"mystyle.css"; //此处要注意.css文件的路径 </style>
インポートでは、Web ページ全体が読み込まれた後に CSS ファイルが読み込まれるため、問題が発生します。Web ページが比較的大きい場合は、スタイルのないページが最初に表示され、フラッシュ後に Web ページのスタイルが表示されます。現れる。これは輸入品特有の欠陥です。
4. リンク タイプ
も .css ファイルを HTML ファイルに導入しますが、リンク タイプが HTML ルールを使用してインポート タイプとは異なります。外部 CSS ファイルを導入します。Web ページのタグ ペアのタグを使用して外部スタイル シート ファイルを導入します。構文は次のとおりです:
<link href="mystyle.css" rel="stylesheet" type="text/css"/>
リンク タイプとインポート タイプの使用の違いは、は、Web ページ ファイル本体を読み込む前に CSS ファイルを読み込みます。そのため、表示される Web ページには最初からスタイル効果が適用されます。インポート タイプのように、最初にスタイルのない Web ページを表示してからスタイル付きの Web ページを表示することはありません。 . これがリンク型のメリットです。
要約: 一般的に、Web サイトを作成する場合、スタイルは複数のスタイル シート ファイルに記述されることが多いため、最初にリンクを使用して一般的な CSS ファイルを紹介し、次にこのCSS インポートは、他の CSS ファイルを導入するためにファイル内で使用されます。ただし、JavaScript を使用して CSS ファイルを動的に導入する場合は、リンクのみを使用できます。
以上がHTMLにCSSを追加する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。