外部CSSスタイルシートの導入方法

外部 CSS スタイル シートを導入する方法: 1. "" ステートメントを使用して導入します; 2. スタイル タグのペアで、"@import url("css file path") を使用します。 」と紹介するステートメント。

このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。

#外部 CSS スタイル シートを導入する方法

##1. タグを使用します

タグは、ドキュメントと外部リソース間の関係を定義します。 タグの最も一般的な使用法は、外部 CSS スタイル シートにリンクすることです。

構文:

<link rel="stylesheet" href="css文件路径" />

2. @import ルールを使用する

@import ルールを使用すると、スタイル シートを別のスタイル シートにインポートできます。

構文:

<style type="text/css">
@import url("css文件路径");
</style>

@import メソッドの違い

リンクは、 HTMLタグ、@importはCSSで提供されます。
ページが読み込まれると、リンクも同時に読み込まれ、@import によって参照される CSS はページが読み込まれるまで待機してから読み込みます。
@import は IE 5 以降でのみ認識でき、リンクは HTML タグであるため、互換性の問題はありません。
#リンク スタイル スタイルの重みは、@import の重みよりも高くなります。

#説明: パス

相対パス

#名前として示唆: これは、特定の参照オブジェクトに対する CSS ファイルの相対的な位置です。 物理学の授業を受けるとき、教師は常に相対運動について言及します。これは、固定された基準物体を基準とした、ある物体から別の物体への相対運動を指します。歩きながら車を見ると車は後進していると感じますが、車がこちらを見ると前に進んでいるように感じますので、相対パスもこのようになります。Web ページが置かれているディレクトリが参照となります。物体。

以下のような CSS コードの導入は相対パス アドレスであり、style.css ファイルは Web ページ ファイルと同じディレクトリ レベルにあります。

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

絶対パス

絶対パスであるため、このアドレスは一意で独立していることを意味します。先ほどテストしたサイトの絶対アドレスは、ローカルエリアから見ると F:\test ですが、サーバーから見ると 127.0.0.1/test のような IP アドレスになるはずです。 例:

<link rel="stylesheet" href="http://xxx.com/test/css/style.css" />

パスの導入について

cssファイルを相対パスで導入するか絶対パスで導入するかについて個人的にはローカルでプレビューするときは相対パスを選択できますが、プロジェクトがオンラインになると、インポートする絶対パスに変更されました。なぜですか?次の点があります: 1. インデックス作成の削減: 絶対アドレスの一意性により、ユーザーが Web ページにアクセスしたときにブラウザが IP アドレスに直接インデックスを作成することが保証されますが、これは遅滞なく致命的な打撃となります。 。相対パスでは、ディレクトリのインデックスを段階的に作成する必要があります。これは、道で好きな女の子に会うようなものです。私たちは恥ずかしがり屋で、彼女と面と向かって話すことができないため、勇気を持って上に行き、彼女の連絡先を尋ねましたが、結局わかりました。その女の子はすでに長い間有名でした。これを知っていたら、そもそもなぜそんなことをしたのでしょう~

2. 増やす外部リンク: SEO を行う人にとって、外部リンクは、たとえ他の誰かがコンテンツをキャプチャしに来たとしても、重要な増加をもたらす可能性があることを誰もが知っています。それが独自のサーバー アドレスに変更されていない場合、それは、この Web サイトの参照アドレスは依然として URL です。クローラーはこの画像参照アドレスをクロールバックしますが、アドレスが変更されているため相対パス参照になります。そのため、クローラーはクロールバック後に対応するファイルを見つけることができないため、クローラーの仕事が止まりそうになっている。

3. ランキングを改善します。フロントエンドで作業している場合は、好みのアニメーション効果に遭遇するでしょう。HTML はダウンロードしましたが、CSS を直接ダウンロードしたくないので、ローカルでネットワーク アドレスを直接呼び出します。このページをプレビューしているときに誤ってインポート アドレスをクリックすると、対応する Web サイトの CSS にジャンプしてしまい、ホームページにアクセスしなくても、そのドメイン名にアクセスすることになり、意図せずアクセス数が増加します。

(学習ビデオ共有:

css ビデオ チュートリアル

)

以上が外部CSSスタイルシートの導入方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。