ホームページ > ウェブフロントエンド > htmlチュートリアル > CSSの使用法 @import_html/css_WEB-ITnose

CSSの使用法 @import_html/css_WEB-ITnose

WBOY
リリース: 2016-06-21 09:10:21
オリジナル
1709 人が閲覧しました

CSS での @import の使用法:

@import は多くのページで使用されていますが、使用頻度はまだリンクタグに比べてはるかに少ないため、あまり馴染みのないレイアウトデザイナーも多いかもしれません。以下に簡単に使い方を紹介します。外部スタイルシートを導入する方法には 2 つの形式があります:

@import "style.css";@import url("style.css");
ログイン後にコピー

@import はページに外部スタイルシートを導入するか、1 つのスタイルシート内に別のスタイルシートを導入できます。 コード例は次のとおりです。 :

<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部落</title> <style type="text/css">@import "mytest/div+css/mytest.css";</style> </head> <body> <div id="mytest">蚂蚁部落</div> </body> </html>
ログイン後にコピー

上記のコードは、@import を通じて Web ページに外部スタイル シートを導入し、フォントの色を赤に設定します。

例 2:

@import は、他のスタイル ファイルをスタイル ファイルに導入することもできます。たとえば、Web サイトに大量のコードがあり、CSS スタイル シート ファイルも比較的大きい場合は、この方法を使用して結合できます。さまざまな機能モジュールのスタイル コードをそれぞれのスタイル シートに配置し、@import を通じてメイン スタイル シートに導入します。

@charset "utf-8";/* CSS Document */@import url("one.css");@import url("two.css");@import url("three.css");
ログイン後にコピー

注: ただし、 @import を使用して読み込まれるスタイル ファイルはページが読み込まれるまで待機するため、使用しないことをお勧めします。代わりにタグを使用することをお勧めします。 CSS リンクと @import の違いに関する章を参照してください。

元のアドレスは次のとおりです: http://www.51texiao.cn/div_cssjiaocheng/2015/0503/585.html

最も元のアドレスは次のとおりです: http://www.softwhy.com/


関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート