HTMLスタイル設定-フロントエンドQ&A-php.cn

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

1. CSS スタイルシート

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

CSS ファイルの作成方法

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

メモ帳またはテキスト編集をサポートするその他のソフトウェアを開いて、テキストファイルを作成します。
ファイルの 1 行目にスタイルシートのコード、つまり「
ログイン後にコピー

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

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

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

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

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

内部样式表CSS设置

在上述代码中，我们将背景颜色设置为浅灰（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;}）。

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