ホームページ > 記事 > ウェブフロントエンド > CSS ファイルに別の CSS ファイルを導入するにはどうすればよいですか? (コード例)
@import ルールを使用して、別の CSS ファイルを CSS ファイルに導入する方法を実装できます。この記事では、複数の CSS ファイルをメインの HTML ファイルにインポートできます。はじめに、お役に立てれば幸いです。
@import ルール
まず、@import ルールを理解しましょう。
@インポート ルールは、あるスタイル シートを別のスタイル シートにインポートするために使用されます。このルールはメディア クエリもサポートしているため、ユーザーはメディア関連のスタイル シートをインポートできます。 @import ルールは、@charset 宣言の後のドキュメントの先頭で宣言する必要があります。 [ビデオチュートリアルの推奨: CSS チュートリアル]
@import の機能:
● @import ルールは、スタイル シートを HTML ページにインポートするために使用されます。またはその他のスタイルシート。
● @import ルールはメディア クエリの追加にも使用されるため、インポートはメディアに依存します。
● @import ルールは常にドキュメントの先頭で宣言されます。
基本文型:
@import url | string list-of-mediaqueries;
url | string: インポートするリソースの場所を示します (相対または絶対)。
list-of-mediaqueries: URL リンクで定義された CSS ルールの適用を決定します。
コード例
例を使用して、別の CSS ファイルを CSS ファイルに導入する方法を示します。
HTML 部分: index.html という名前のファイルを作成します。
<!DOCTYPE html> <html> <meta charset="UTF-8"> <link rel="stylesheet" href="style1.css" /><!--在HTML文件中导入style1.css文件--> <head> <body> <div class="box"> <h1>PHP中文网</h1> <p>测试文本!测试文本!测试文本!测试文本!测试文本!测试文本!测试文本!测试文本!测试文本!测试文本!测试文本!测试文本!测试文本!测试文本!测试文本!测试文本!测试文本!测试文本!测试文本!测试文本!测试文本!测试文本!</p> </div> </body> </html>
CSS 部分:
/*导入另一个CSS文件 */ @import "style2.css"; /* 或者@import url(style2.css);*/ .box{ width: 400px; margin: 100px auto; } h1 { color:red; text-align: center; } p { color:black; padding: 10px; background-image: linear-gradient(to right, #fbd6d3, #ff1200); position:static; }出力: @import ルールを使用せずに別の CSS ファイル (style2.css) をインポートします
style2.css ファイル:
body { background:gainsboro; opacity: 0.5; } h1{ color: #008000; }出力: style1.css ファイルの @import ルールを使用して、style2.css ファイルをインポートします
注: @import ルールを使用して別の CSS スタイル シートをインポートするには、@import url(style2.css); と @import "style2.css"; ## の 2 つの方法があります。
#注:@import ルールを使用して別の CSS スタイル シートをインポートする場合は、スタイル シートのパスに注意する必要があります。 以上がこの記事の全内容です、皆様の学習のお役に立てれば幸いです。さらにエキサイティングなコンテンツについては、PHP 中国語 Web サイトの関連チュートリアルのコラムに注目してください。 ! !
以上がCSS ファイルに別の CSS ファイルを導入するにはどうすればよいですか? (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。