CSSスタイルをHTMLに導入するにはどうすればよいですか?そして、linkと@importの違い（コード例）
フロントエンド 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)の違い)
- link は CSS をロードするだけでなく、RSS などの他のトランザクションも定義できます。一方、@import は CSS を参照する場合にのみロードできます。 CSS の場合、ページが読み込まれると同時に読み込まれます。@ Import では、ページが完全に読み込まれた後に読み込まれる必要があります。
- link は XHTML タグであり、互換性の問題はありません。一方、@import は CSS2.1 で提案されたものであり、以前のバージョンのブラウザではサポートされていません。
- ink は、JavaScript を使用して DOM を制御してスタイルを変更することをサポートしています。
- @import は CSS ファイルに他のスタイルシートを再度導入できますが、リンクはそれをサポートしていません。
- (学習ビデオ共有:
Web フロントエンドの入門
)
以上がCSSスタイルをHTMLに導入するにはどうすればよいですか?そして、linkと@importの違い（コード例）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7678
15
1393
52
1209
24
91
11
VueでBootstrapの使用方法
Apr 07, 2025 pm 11:33 PM
vue.jsでBootstrapを使用すると、5つのステップに分かれています。ブートストラップをインストールします。 main.jsにブートストラップをインポートしますブートストラップコンポーネントをテンプレートで直接使用します。オプション：カスタムスタイル。オプション：プラグインを使用します。
HTML、CSS、およびJavaScriptの役割：コアの責任
Apr 08, 2025 pm 07:05 PM
HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。
ブートストラップにスプリットラインを書く方法
Apr 07, 2025 pm 03:12 PM
ブートストラップスプリットラインを作成するには2つの方法があります。タグを使用して、水平方向のスプリットラインを作成します。 CSS Borderプロパティを使用して、カスタムスタイルのスプリットラインを作成します。
HTML、CSS、およびJavaScriptの理解：初心者向けガイド
Apr 12, 2025 am 12:02 AM
webdevelopmentReliesOnhtml、css、andjavascript：1）htmlStructuresContent、2）cssStylesit、および3）Javascriptaddsinteractivity、形成、
ブートストラップに写真を挿入する方法
Apr 07, 2025 pm 03:30 PM
ブートストラップに画像を挿入する方法はいくつかあります。HTMLIMGタグを使用して、画像を直接挿入します。ブートストラップ画像コンポーネントを使用すると、レスポンシブ画像とより多くのスタイルを提供できます。画像サイズを設定し、IMG-Fluidクラスを使用して画像を適応可能にします。 IMGボーダークラスを使用して、境界線を設定します。丸い角を設定し、IMGラウンドクラスを使用します。影を設定し、影のクラスを使用します。 CSSスタイルを使用して、画像をサイズ変更して配置します。背景画像を使用して、背景イメージCSSプロパティを使用します。
ブートストラップのフレームワークをセットアップする方法
Apr 07, 2025 pm 03:27 PM
Bootstrapフレームワークをセットアップするには、次の手順に従う必要があります。1。CDNを介してブートストラップファイルを参照してください。 2。独自のサーバーでファイルをダウンロードしてホストします。 3。HTMLにブートストラップファイルを含めます。 4.必要に応じてSASS/LESSをコンパイルします。 5。カスタムファイルをインポートします（オプション）。セットアップが完了したら、Bootstrapのグリッドシステム、コンポーネント、スタイルを使用して、レスポンシブWebサイトとアプリケーションを作成できます。
ブートストラップボタンの使用方法
Apr 07, 2025 pm 03:09 PM
ブートストラップボタンの使用方法は？ブートストラップCSSを導入してボタン要素を作成し、ブートストラップボタンクラスを追加してボタンテキストを追加します
