CSSスタイルの設定方法

CSS スタイルは、Web コンテンツのフォーマットに使用される言語です。 CSS スタイルは、テキスト、色、背景色、配置、間隔、境界線、その他の Web デザイン関連のスタイルを設定するために使用されます。多くの場合、CSS スタイルを設定すると、Web サイトがよりモダンで美しく、使いやすくなります。ここでは、CSS のスタイルを設定する方法に関する基本的な情報をいくつか紹介します。

1. インライン スタイル

インライン スタイルは、CSS スタイルを HTML 要素に直接記述する方法です。このアプローチは個々の要素に役立ち、タグの「style」属性を使用することで実現できます。たとえば、次のコードは、インライン CSS スタイルを使用して段落のテキストの色とフォント サイズを設定します:

8e6018ddc3e8048409e6af4149427d03これは段落です.94b3e26ee717c64999d7867364b1b4a3

このコードでは、「style」属性は次のスタイルを設定します:

“color: red;”设置颜色为红色
“font-size: 18px;”设置字体大小为 18 像素。

2. 埋め込みスタイル

埋め込みスタイルは CSS A の方法ですHTMLファイルのheadタグの書き方について説明します。この方法では、ドキュメント全体で同じスタイルを使用できるため、大規模な Web サイトに役立ちます。埋め込み CSS スタイルの例を次に示します。

93f0f5c25f18dab9d176bd4f6de5d30e
c9ccee2e6ea535a969eb3f532ad9fe89

p {
  color: blue;
  font-size: 16px;
}

531ac245ce3e4fe3d50054a55f265927
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d

e388a4556c0f65e1904146cc1a846beeこれは段落です。94b3e26ee717c64999d7867364b1b4a3

36cc49f0c466276486e50c850b7e4956

このコードでは、「p」選択部分がこのツールは、上の段落を含むすべての「p」要素にスタイルを適用します。これら 2 つの CSS スタイルは、テキストの色を青に設定し、フォント サイズを 16 ピクセルに設定します。

3. 外部スタイル シート

外部スタイル シートは、CSS スタイルを別の CSS ファイルに保存する方法です。このアプローチは、複数の Web ページで同じスタイルを使用する場合に便利で、HTML ファイルが読みやすく、管理しやすくなります。外部 CSS スタイルシートの例を次に示します。

別の「style.css」ファイルでは、次のように複数のスタイルを設定できます。

p {
color : green;
font-size: 14px;
}

h1 {
color: blue;
font-size: 32px;
}

HTML ファイルでは、このスタイルシートにリンクします:

93f0f5c25f18dab9d176bd4f6de5d30e
245994c824046fd9be2f18f350887c05
3c7b149cc556f883a18b3c490b028d4e

これで、すべての "p" 要素は指定されたスタイル (テキストの色は緑、フォント サイズ 14 ピクセル) を取得し、すべての "h1" 要素は別のスタイル (テキストの色は青、フォント サイズ 32) を取得します。ピクセル）。

4. セレクター

CSS スタイル セレクターは、どの HTML 要素にどのスタイルを適用するかを決定します。セレクターは、要素タイプ、クラス、ID、属性などに基づいて要素を選択できます。一般的なセレクターの形式をいくつか示します。

元素类型选择器：直接选择元素的名称。例如，“p”选择器将选择所有段落。
类选择器：“.”加上一个类名称。例如，“.my-class”选择器将选择具有名称“my-class”的所有元素。
ID 选择器：“#”加上一个 ID 名称。例如，“#my-id”选择器将选择具有 ID 名称“my-id”的所有元素。
属性选择器：“[]”加上一个属性名称和一个可选的属性值。例如，“[href]”选择器将选择具有任何 href 属性的元素，而“[href='https://example.com']”选择器将选择具有 href 设置为“https://example.com” 的元素。

セレクターは CSS スタイルで使用され、中括弧内に配置されます。以下は、セレクターがすべての「p」要素にスタイルを適用する例です:

p {
color: red;
font-size: 16px;
}

以上が CSS スタイル設定の基礎知識です。これらの概念を理解すると、レスポンシブ デザインやアニメーションなど、より高度な CSS アプリケーションを検討できるようになります。作成している Web サイトの種類に関係なく、CSS のスタイルを設定する方法を知っておくと役立ちます。

以上がCSSスタイルの設定方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。