HTML設定CSS

HTML 設定 CSS

Web デザインと開発において、CSS は非常に重要なテクノロジーです。 CSS (Cascading Style Sheets) は、HTML ドキュメントのスタイルとレイアウトを記述する方法を提供します。

CSS を使用すると、Web デザイナーは HTML ドキュメント内の要素の外観とレイアウトを簡単に制御できます。 CSS はスタイル定義を HTML から分離することにより、Web ページの保守と変更を容易にします。

この記事では、CSS を設定して HTML ドキュメントのスタイルとレイアウトを制御する方法について説明します。

CSS を HTML ドキュメントに追加する

CSS スタイルを HTML ドキュメントに追加するには、いくつかの方法があります。その一部を次に示します。

インライン スタイル シート: 次のように、HTML 要素の「style」属性を使用してスタイルを定義します。

8fe5d159347ff20a34d06b1707fd78b6

この方法は少数のスタイルには機能しますが、すべての要素でスタイルを繰り返す必要があるため、大規模な Web サイトには適していません。さらに、メンテナンスも簡単ではありません。

内部スタイル シート: CSS スタイルを 93f0f5c25f18dab9d176bd4f6de5d30e タグの c9ccee2e6ea535a969eb3f532ad9fe89 タグに配置します。例:

93f0f5c25f18dab9d176bd4f6de5d30e

<style>
    p {
        color: red;
    }
</style>

9c3bca370b5104690d9ef395f2c5f8d1

このメソッドを使用すると、同じドキュメント内で複数のスタイルを設定し、ドキュメント全体のスタイルを制御できます。ページにただし、複数のページで同じスタイルを使用する必要がある場合は、各ページでスタイルをコピーして貼り付ける必要があります。

外部スタイル シート: HTML ドキュメント内の 2cdf5bf648cf2f33323966d7f58a7f3f タグを使用して、外部 CSS ファイルを参照します。例:

93f0f5c25f18dab9d176bd4f6de5d30e

<link rel="stylesheet" type="text/css" href="styles.css">

9c3bca370b5104690d9ef395f2c5f8d1

このシナリオでは、すべてのスタイルが 1 つの CSS ファイルに保存され、複数の CSS ファイルで共有できます。ページ ドキュメント。この方法は最も一般的に使用されており、メンテナンスも簡単です。

CSS セレクター

CSS セレクターは、特定の要素を選択するために使用されるパターンです。以下のようなさまざまなセレクターが使用可能です。

要素セレクター: 特定の要素を選択します。たとえば、すべての p 要素を選択するには:

p {

color: red;

}

ID セレクター: 指定された ID を持つ要素を選択します。たとえば、ID「header」を持つ要素を選択するには:

header {

background-color: gray;

}

クラス セレクター: 指定されたクラスを持つ要素を選択します。たとえば、クラス「intro」を持つ各要素を選択します:

.intro {

font-style: italic;

}

複合セレクター: 2 つ以上の単純なセレクターで構成されます。たとえば、クラスが「intro」で p 要素であるすべての要素を選択します。

p.intro {

font-style: italic;

}

CSS Layout

CSS許可 HTML ドキュメント内の要素の位置とサイズを制御します。最も一般的に使用される CSS レイアウト プロパティの一部を次に示します。

Position: 要素を「絶対」、「相対」、または「固定」位置に設定するには、position プロパティを使用します。

position : 絶対;
位置: 相対;
位置: 固定;

浮動: float 属性を使用して要素を左また​​は右にフローティングします:

float: left;
float: right;

Display: 要素の表示方法を制御するには、display 属性を使用します。例: ブロック レベル要素またはインライン要素:

display: block;
display : inline;

Box モデル : パディング、マージン、ボーダー属性を使用して要素のサイズと位置を制御します:

padding: 10px;
margin: 10px;
border: 1px ソリッド ブラック;

レスポンシブ Web ページ デザイン

レスポンシブ Web デザインは、複数のデバイスでアクセスできる Web サイトを作成するために使用される手法です。 CSS メディア クエリ (メディア クエリ) を使用すると、さまざまなデバイスのサイズや方向に応じて Web サイトのレイアウトを最適化できます。

たとえば、デバイスの幅が 600 ピクセルを下回るとレイアウトを変更するシンプルなレスポンシブ デザインを次に示します。

@media screen and (max-width: 600px) {
body {

background-color: lightblue;

}
#ヘッダー {

background-color: gray;

}
#nav {

width: 100%;

}
#nav ul {

display: block;
margin: 0;
padding: 0;

}
#nav li {

margin: 0;
padding: 0;
border-bottom: 1px solid white;

}
}

概要

CSS は、スタイルを記述し、 HTMLドキュメントのレイアウト。 CSS スタイルを HTML ドキュメントに追加するには、インライン スタイル シート、内部スタイル シート、外部スタイル シートなど、いくつかの方法が利用できます。 CSS セレクターは特定の要素を選択するために使用されるパターンですが、CSS レイアウト プロパティを使用すると要素の位置とサイズを制御できます。最後に、レスポンシブ Web デザインは、CSS メディア クエリを使用してレイアウトを最適化し、複数のデバイスでアクセスできる Web サイトを作成する手法です。

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