外部CSSスタイルシートの導入方法-CSSチュートリアル-php.cn

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

青灯夜游

リリース： 2023-01-07 11:45:56

オリジナル

17577 人が閲覧しました

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

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

このチュートリアルの動作環境: 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 メソッドの違い

#説明: パス

相対パス

#名前として示唆: これは、特定の参照オブジェクトに対する 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 サイトの他の関連記事を参照してください。