CSSファイルをインポートする方法

cssファイルの導入方法: 1. インラインメソッド導入、タグのstyle属性にCSSスタイルを設定; 2. 埋め込みメソッド導入、WebページのstyleタグにCSSスタイルを記述する; 3 , リンクを使用して外部 CSS ファイルを参照する; 4. @import を使用して外部 CSS ファイルを参照します。

この記事の動作環境: Windows7 システム、HTML5&&CSS3 バージョン、Dell G3 コンピューター。

CSS ファイルをインポートするにはどうすればよいですか? CSS ファイルを HTML に導入するいくつかの方法

一般的に、次の 4 つのタイプがあります。

1. インライン スタイル: インライン スタイルとも呼ばれ、マークの style 属性で設定します。 CSS スタイル。この方法は CSS の利点を反映していません。

2. 埋め込み: Web ページの c9ccee2e6ea535a969eb3f532ad9fe89531ac245ce3e4fe3d50054a55f265927 の 93f0f5c25f18dab9d176bd4f6de5d30e9c3bca370b5104690d9ef395f2c5f8d1 タグ ペアに CSS スタイルを集中させます。タグは整列されています;

3. リンク タイプ: 4 番目のインポート タイプは外部タイプまたは外部リンク タイプと呼ばれ、外部 CSS ファイルを参照するにはリンクを使用します;

4. インポート タイプ: @ を使用しますimport は外部 CSS ファイルを参照します;

------------------------------------- --- ----------------A

インライン スタイルは、書き始めるのに最も簡単で快適な方法ですが、この書き方では CSS の利点が反映されていません。次のように:

70eab11193908078307f75b525fdd4469cb11d6007e752b4b90b273a9213ec78インラインで書き込みます2fd1ef834236b75b1fcf542b459f73cc

ページ内に多くのタグがある場合、この書き方は見た目が悪く面倒で、繰り返しが多すぎるため、お勧めできません。

------------------------------------------ ------ ---------B

ページ数が比較的少ない場合は、Embedded も良い選択ですが、プロジェクトに対応するページが多数ある場合、これは間違いなく最適です。ちょっと悲惨です。スタイルを変更する必要があります。類似したページ

が多数ある可能性がありますが、次のように 1 つずつ変更する必要があります:

<span style="font-size:14px;"><style type="text/css"></span>
<span style="font-size:14px;">#demo{
position:absoulte;
left: 20px;
top:50px;
width:300px;
height: 50px;
border: solid 1px red;
padding-left: 20px;
color:gray;
font-size: 20px;
line-height: 50px;
text-align: center;</span>
<span style="font-size:14px;">}
</style></span>

この書き方では、ページの「スタイルがない」現象がある程度発生します。CSS が読み込まれた後にページをレンダリングします...

---- -------------- -------------------CD

外部 CSS スタイルは CSS コードを記述することです別の外部ファイルに作成します。この CSS スタイル ファイルは拡張子が「.css」で終わるため、93f0f5c25f18dab9d176bd4f6de5d30e タグ内 (c9ccee2e6ea535a969eb3f532ad9fe89 タグ内ではない) 2cdf5bf648cf2f33323966d7f58a7f3f タグを使用して CSS スタイル ファイルをリンクしますHTML ファイルに追加することで、css の利点を最大限に活用できます。もちろん、「.css」ファイルの名前には、「main.css」など、後からの変更を容易にしたり読みやすさを向上させるための特定の意味が必要です...

<link href="main.css" rel="stylesheet" style="text/css"/>

rel="stylesheet" type ="text/css" は固定の記述方法であり、変更することはできません。

@import によって導入される形式は次のとおりです:

<style type="text/css">
@import url(demo.css);
</style>

この方法では、ページ全体が読み込まれた後にのみ css ファイルが導入されます。明らかに、問題はページ上の「縞模様」現象ですが、もちろん、これはインタラクションとエクスペリエンスの観点からは絶対に受け入れられません。上記 2 つの外部導入メソッドの文法構造の違いは、視覚的に見ることができます:

<span style="font-size:14px;"><link href="CSS路径" rel="stylesheet" type="text/css" /></span>
<span style="font-size:14px;">@import + 空格+ url(CSS文件路径地址);</span>

@import このメソッドでは、HTML ファイルと CSS ファイルのダウンロードの違いにも注意する必要があります。HTML では、< を追加する必要があります。 ;style type="text/css">531ac245ce3e4fe3d50054a55f265927 ですが、CSS ファイルでは、@import

を使用してパスを追加することができます。ここで重要な点がわかります。スタイル ファイルでは、最初にメイン スタイルをレンダリングし、いくつかの二次スタイルをレンダリングすることを選択できます。それを CSS ファイル

にインポートすると、サーバーへの負荷をある程度軽減することもできます。大きい場合でも、最適化することをお勧めします。本質的には、この 2 つの外部導入方法に大きな違いはありませんが、プロジェクト内でサイトのスタイルを編集する便宜上、リンク方法が使用されることがよくあります。

もちろん、編集要件として XML を使用する導入方法もありますが、一般的には使用されません。

推奨学習: 「

css ビデオ チュートリアル

」

以上がCSSファイルをインポートする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。