HTMLスタイル設定

HTML スタイル設定は、Web デザインを作成する際の重要な部分です。 HTML スタイルは、レイアウト、色、フォント サイズ、スタイルなどのさまざまな要素を調整したり、インタラクティブな特殊効果を実現したりできます。この記事では、CSS スタイル シートの作成から HTML 要素への CSS スタイルの適用まで、HTML スタイルの基本的な知識を紹介し、読者が Web デザインの目標を達成できるようにします。

1. CSS スタイル シート

CSS は Cascading Style Sheets を指し、プレゼンテーションとコンテンツが分離されていないことによる HTML ドキュメントの混乱の問題を解決するために提案されました。 CSS スタイル シートを使用すると、クラス、ID、タグ セレクターやその他のセレクターを定義して、HTML 要素の色、背景、フォント サイズ、行の高さ、幅、高さ、余白を変更することで、HTML 要素の外観を制御できます。いくつかの一般的な CSS スタイルシート操作を以下に紹介します。

1. CSS ファイルの作成方法

通常、スタイル シート ファイルは CSS ファイルとして保存され、ファイルの拡張子は .css です。スタイル シート ファイルを作成する手順は次のとおりです。

• メモ帳またはテキスト編集をサポートするその他のソフトウェアを開いて、テキスト ファイルを作成します。
• ファイルの 1 行目にスタイル シートのコード、つまり「c9ccee2e6ea535a969eb3f532ad9fe89」タグと「/style>」タグを追加します。
• タグの間に CSS スタイル シート コードを追加します。タグには、クラス、ID、タグなどのセレクターや、その他の CSS スタイル属性を指定できます。
• CSS ファイルでは、各セレクターとそれに対応するスタイル属性の間に、関係を示す中括弧が必要です。
• CSS スタイルの定義が完了したら、CSS ファイルを .css ファイルとして保存し、HTML ドキュメントにリンクする必要があります。

2. CSS スタイル シートのコメント

CSS スタイル シートのコメントの役割は、コードを保守するときに開発者が説明しやすくすることです。 CSS スタイル シートのコメントは / で始まり / で終わります。以下の例:

/*コメント行です
コメントの2行目です*/

3. CSSスタイルシートの基本操作

CSS スタイル シートの記述は、次のようなセレクターと属性の基本操作に基づいています。

• セレクター: CSS スタイル シートは、変更する HTML 要素を選択するために特定のシンボルを使用します。クラスセレクター (「.」) や ID セレクター (「#」) など。
• 属性: CSS スタイル シートは、「font-size」、「color」、「background」属性などの HTML 要素のスタイルを定義するために属性を使用します。

次のコードは、タイトルである基本的な HTML 要素のスタイル調整を示しています:

8b05045a5be5764f313ed5b9168a17e6
100db36a723c770d327fc0aef2ce13b1
< ;head> ;

<title>CSS样式表调整标题样式的例子</title>
<style>
    h1 {
        color: red;
        font-size: 36px;
        background: yellow;
    }
</style>

9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d

<h1>这是一级标题</h1>

36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

上記のコードを変更しますタイトルのテキスト サイズを 36 ピクセル (font-size: 36px;)、背景色を黄色 (background: yellow;)、テキストの色を赤 (color: red;) に設定します。これらのプロパティは、スタイル、色、フォントなどのニーズに合わせて変更または削除できます。

2. HTML 要素に適用される CSS スタイル シート

これで、単純な CSS スタイル シート ファイルを作成し、CSS スタイル プロパティの値を定義しました。次に、これらのスタイル属性を HTML 要素に関連付けて、HTML 要素のスタイル制御を実現する必要があります。

1. インライン スタイル (インライン スタイル)

インライン スタイルとは、HTML 要素内の "style" 属性にスタイル属性を適用することを指します。このメソッドは主に CSS の作成で使用されます。スタイル コードを HTML ドキュメント内に直接記述します。このメソッドは、HTML 要素のスタイルをすばやく調整するのに役立ちます。次のコードはインライン スタイルの例です。

8b05045a5be5764f313ed5b9168a17e6
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e

<title>内嵌样式CSS设置</title>

9c3bca370b5104690d9ef395f2c5f8d1
75b561857b53372bf8fa3e38343e4252

<h1 style="color: MediumBlue; font-size: 50px;">大标题</h1>
<p style="color: Black; font-size: 30px;">小标题</p>

36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

上記のコードでは、背景色をライト グレー (background-color: LightGray;)、大きなタイトルの色をダーク ブルー (color: MediumBlue;)、タイトルのフォント サイズを 50 ピクセル (font-size: 50px;)、サブタイトルを設定します。色を黒 (color: Black;)、タイトルのフォントサイズを 30 ピクセル (font-size: 30px;) にします。

2. 内部スタイルシート(内部スタイル)

内部スタイルシートの方法は、「head」タグ内の「style」タグ内にスタイルシートのコードを配置する方法です。 HTML ドキュメント 、すべての HTML ドキュメントで使用されるスタイルを変更します。この方法はインライン スタイルよりも柔軟性が高く、HTML ファイルとスタイル シートの分離が維持されます。次のコードは、内部スタイル シートの例です。

6c04bd5ca3fcae76e30b72ad730ca86d

<title>内部样式表CSS设置</title>
<style>
    body {
        background-color: LightGray;
    }
    h1 {
        color: MediumBlue;
        font-size: 50px;
    }
    p {
        color: black;
        font-size: 30px;
    }
</style>

36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

在上述代码中，我们将背景颜色设置为浅灰（body {background-color: LightGray;}），将大标题颜色设置为深蓝（h1 {color: MediumBlue;font-size: 50px;}），将标题字体大小设置为50像素（h1 {color: MediumBlue;font-size: 50px;}），并将小标题颜色设置为黑色（p {color: black;font-size: 30px;}），将标题字体大小设置为30像素（p {color: black;font-size: 30px;}）。

3. 外部样式表（external styling）

外部样式表是指在HTML文件中以CSS文件的形式链接到HTML文档的样式表，这种方式最好适用于大型网站或多个页面，对于一些共享设计风格的网站更为便捷。下面是示例代码：

8b05045a5be5764f313ed5b9168a17e6
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e

<title>外部样式表CSS设置</title>
<link rel="stylesheet" type="text/css" href="style.css">

9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d

<h1>大标题</h1>
<p>小标题</p>

36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

在上述代码中，我们通过c29ea0143d4a2d5dc6725f7851494a02属性将外部样式表链接到HTML文档，这包含了全部HTML文档所用到的样式定义。样式表文件的代码如下：

body {

background-color: LightGray;

}
h1 {

color: MediumBlue;
font-size: 50px;

}
p {

color: black;
font-size: 30px;

}

以上就是HTML样式设置的基础知识，包括创建和使用CSS样式表的不同方法。通过这些基本操作，我们可以对网页的排版、字体、颜色和特效等方面进行控制，创造出各种个性化的网页设计。

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