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

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

このシナリオでは、すべてのスタイルが 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 サイトの他の関連記事を参照してください。