フロントエンド Web サイトの開発プロセスでは、CSS スタイルを使用して、ページのレイアウト、フォント、色、背景、その他の効果を効果的により正確に制御する必要があります。では、これらの CSS スタイル ファイルやコードはどのようにして HTML にインポートされるのでしょうか? この章では、CSS スタイル ファイルを HTML に導入する方法を説明します。 link と @import の違い (コード例) と同様に、css スタイル ファイルのインポートを中心に、css スタイルがどのようにインポートされるかを理解しましょう。困っている友人は参考にしていただければ幸いです。
1. CSS スタイルを HTML にインポートする方法
HTML は主に Web ページのコンテンツ表示を担当し、CSS ファイルは Web コンテンツのスタイルを担当します。HTML で CSS スタイルを使用する方法は次のとおりです。 : インライン、埋め込み、外部リンク タイプ、
および外部リンク タイプは、リンク タイプ (link) とインポート タイプ (@import) に分けられます。 [推奨学習: css ビデオチュートリアル]
それでは、以下にご紹介します:
1. インライン ---- HTML タグでの CSS の使用
コード例:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>行内式</title> </head> <body> <p style="color: red;font-size: 20px;">行内式行内式行内式行内式行内式行内式行内式行内式行内式<p> </body> </html>
レンダリング:
CSS によって参照されるインライン スタイルは、タグ内に直接導入されることもありますが、同時に非常に便利です。また、スタイルを再利用できなくなります。 欠点: コードの行数が一定の長さに達する場合はお勧めできません。インライン CSS は、コード内のバグを見つけるためのテストとしてよく使用されます。
利点:
スタイルシートファイルがないため、場合によっては効率が向上します
style属性を使用したスタイル効果が最も強力で、他の導入方法の同じスタイル効果をオーバーライドします。 。
短所:
複数の要素でスタイルを共有するのは難しく、コードの再利用には役立ちません。
HTMLコードとCSSコードが混在しているため、プログラマーや検索エンジンが読み取りにくくなります。
2. インライン --- style タグを通じて head タグに CSS コンテンツを書き込みます
コード例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>内嵌式</title>
<style>
p{
background-color: #21B4BB;
color: #fff;
font-size: 20px;
}
</style>
</head>
<body>
<p>内嵌式内嵌式内嵌式内嵌式内嵌式内嵌式内嵌式<p>
</body>
</html> レンダリング:
CSS によって参照されるインラインも可能です内部スタイルまたはページレベルのスタイルと呼ばれます。スタイルは、作成するコードが数百行を超える場合、style タグ内で定義されます。 、コードページを先頭に引っ張るのは面倒なので、保守性が低くなります。
利点: インターライン スタイル シートと同様に、追加のリクエストは生成されず、最初に構造とスタイルの分離が実現されるため、単一ページの Web サイト アプリケーションにより適しています。
短所: 内部スタイルシートがHTMLファイルに記述されているため、ページが不純で、ファイルサイズが大きく、Webクローラーが情報を取得するのに役立たない、メンテナンスに役立たない、スタイルを共有できないページ間
3. 外部接続スタイル ---リンクタグを通じて外部スタイルシート(CSSスタイルファイル)を導入
1) リンクスタイル(リンク)
構文:
<link rel="stylesheet" type="text/css" href="css的路径" >
コード例:
HTML コード:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>链接式</title> <link rel="stylesheet" type="text/css" href="style.css" > </head> <body> <p>链接式链接式链接式链接式链接式链接式链接式链接式链接式链接式链接式链接式<p> </body> </html>
css スタイル ファイル- -style.css コード:
p{
font-size: 20px;
color: #fff;
background-color: #70DBDB;
}レンダリング:
リンク タイプは、Web ページ ファイルの本体をロードする前に CSS ファイルをロードするため、表示されるWeb ページには最初からスタイル効果があり、インポートされたスタイルではスタイルが適用されていない Web ページが最初に表示され、次にスタイルが適用された Web ページが表示されます。これがリンク スタイルの利点です。
2) インポート (@import)
構文:
<style type="text/css" media="screen">
@import url("CSS文件");
</style> コード例:
HTML コード:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>导入式</title>
<style type="text/css" media="screen">
@import url("style.css");
</style>
</head>
<body>
<p>导入式导入式导入式导入式导入式导入式导入式导入式导入式<p>
</body>
</html>レンダリング:
Web ページ全体が読み込まれた後、それからCSS ファイルをロードするため、Web ページが比較的大きい場合、スタイルのないページが最初に表示され、フラッシュ後に Web ページのスタイルが表示されます。これは輸入品特有の欠陥です。
3) 外部接続のメリットとデメリット
メリット:
構造コードと性能コードを完全に分離
再利用とメンテナンスが便利
別々のファイルに分離されているため、大幅なコスト削減HTML ファイルのサイズを調整し、プログラマーや Web クローラーがページ構造を読みやすくします
検索エンジンに優しいため、検索エンジンがページをより高く評価できるようになり、ページの検索エンジンのランキングに有益です
スタイルシートは、ユーザーの最初の訪問後にユーザーのコンピューターにキャッシュされ、次回の訪問時に読み込む必要はありません
欠点:
スタイルがたくさんあると、CSS ファイルが非常に大きくなり、見つけるのが難しくなります。また、CSSファイルが1つ増えるとHTTPリクエストも1つ増えることになり、アクセス数の多いWebサイトではサーバーへの負荷が高まります
2.リンク(link)とインポート(@import)の違い)
Web フロントエンドの入門
)以上がCSSスタイルをHTMLに導入するにはどうすればよいですか?そして、linkと@importの違い（コード例）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
