CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSでの外部スタイルシートのインポート

別のCSS宣言内に追加のCSSファイルをインポートできます。 @importルールは、ドキュメント内のスタイルシートをリンクするため、この目的で使用されます。これは通常、あるスタイルシートが別のスタイルシートに依存している場合に使用されます。 内の@charset宣言の後にドキュメントの上部で指定されます。

構文

@importルールの構文は次のとおりです

@import /*url or list-of-media-queries*/

メディアクエリは、さまざまなメディアでのドキュメントの動作を指定する可能性のある複合ステートメントにすることができます。

例

次の例では、@importルールを実装しています-

HTMLドキュメント − 

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
@import url(style.css);
body {
   background-color: honeydew;
}
</style>
</head>
<body>
<p>This is demo paragraph one. </p>
<p class="two">This is demo paragraph two.</p>
<p>This is demo paragraph three</p>
</body>
</html>

CSSドキュメント：style.css 

p { color: navy; font-style: italic; }
.two { color: darkgreen; font-size: 24px; }

出力

これにより、次の出力が生成されます-

CSSでの外部スタイルシートのインポート

例

HTMLドキュメント- 

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div></div>
</body>
</html>

CSSドキュメント − 

div {
   height: 50px;
   width: 100px;
   border-radius: 20%;
   border: 2px solid blueviolet;
   box-shadow: 22px 12px 3px 3px lightblue;
   position: absolute;
   left: 30%;
   top: 20px;
}

出力

これにより、次の出力が得られます-

CSSでの外部スタイルシートのインポート


  1. CSSでhr要素のスタイルを設定するにはどうすればよいですか？

    CSSを使用してhr要素のスタイルを設定するには、コードは次のとおりです- 例 <!DOCTYPE html> <html> <meta name="viewport" content="width=device-width, initial-scale=1"> <head> <style>    body{       font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-

  2. CSSでラベルのスタイルを設定するにはどうすればよいですか？

    CSSでラベルのスタイルを設定するには、コードは次のとおりです- 例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>    body {       font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-