ホームページ > 記事 > ウェブフロントエンド > cssの呼び出し方
CSS (Cascading Style Sheets) は、Web ページのスタイルを定義するために使用される言語で、Web ページのレイアウト、色、フォントなどを制御できます。 Web ページの制作では、通常、Web ページのスタイル効果を実現するために CSS ファイルと HTML ファイルを組み合わせる必要があります。それでは次に、CSS を呼び出す方法について説明します。
内部スタイルシートとは、HTMLファイルのヘッダーにCSSスタイルを定義して切り替えを容易にし、HTML内にコードを埋め込むメソッドです。ファイル。このメソッドは、現在のページでのみ必要な特定のスタイルに適しています。呼び出しメソッドは次のとおりです:
<head> <title>我的页面</title> <style> /* CSS样式代码 */ </style> </head>
外部スタイル シートは、別のファイルで CSS スタイルを定義し、HTML ファイル内のリンクを介してそのファイルを参照する方法。このメソッドは、複数のページで同じスタイルが必要な場合に適しています。呼び出しメソッドは次のとおりです:
(1) CSS ファイルにスタイル コードを定義します
/* style.css */ body { background: #f6f6f6; font-family: Arial, "Helvetica Neue", sans-serif; font-size: 14px; } h1 { font-size: 24px; font-weight: bold; color: #333; }
(2) リンクHTML ファイル CSS ファイル
<head> <title>我的页面</title> <link rel="stylesheet" href="style.css"> </head>
インライン スタイル シートは、CSS スタイルを HTML タグ内に直接記述する方法です。このメソッドは、スタイルを設定する必要があるタグが 1 つだけ必要な場合に適しています。呼び出しメソッドは次のとおりです:
<h1 style="color:red;">这是一个标题</h1>
スタイル シートのインポートは、1 つの方法です。 CSS スタイルは別のファイルで定義され、別の CSS ファイルに導入されます。このメソッドは外部スタイル シート構造に似ていますが、呼び出し方法が少し異なります。
(1) main.css ファイルに style.css ファイルを導入します
/* main.css */ @import url('style.css'); /* 下面是对样式的调用 */ body { margin: 0; } .container { width: 960px; margin: 0 auto; }
(2) HTML ファイル内 リンク main.css ファイル
<head> <title>我的页面</title> <link rel="stylesheet" href="main.css"> </head>
継承スタイルは、親タグのスタイルを子タグに適用する方法です。この方法は、要素が同じスタイルを持ち、親タグのスタイルによってコードを簡素化できる場合に適しています。例:
div { font-family: Arial, "Helvetica Neue", sans-serif; font-size: 14px; color: #333; } h1 { font-size: 24px; font-weight: bold; } /* 这里的h1将继承div中的color和font-family */
要約すると、CSS を呼び出す方法は数多くあり、実際のニーズに応じてさまざまな呼び出し方法を選択できます。 Web ページの制作では、適切な CSS 呼び出しメソッドを使用すると、Web ページのスタイルの効果をより適切に実現し、ユーザー エクスペリエンスを向上させることができます。
以上がcssの呼び出し方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。