ホームページ >ウェブフロントエンド >フロントエンドQ&A >cssの呼び出し方
cssの呼び出し方
- WBOYオリジナル
- 2023-05-27 11:39:07876ブラウズ
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 サイトの他の関連記事を参照してください。