カスケード スタイル シート CSS_html/css_WEB-ITnose

??

1. カスケード スタイル シートとは何ですか?
CSS は Web ページ上のスタイルの表示を制御します
2. CSS を設定するいくつかの方法
インライン スタイル (インライン スタイル)
ラベルのスタイル属性を設定します
インライン スタイル シートを使用する場合、html4.01 標準では次の追加を推奨しています

理由: 新しいバージョンの html では、 CSSを使用するだけでなく、HTML内のXMLの表示効果を制御するためにtext/smlを使用するなど、他の方法も使用できます

欠点: 各タグで設定する必要があり、インラインスタイルシートはすべてのメディアで機能します
埋め込みスタイル シート

タグ内で
を定義します
: ブラウザーが CSS をサポートしないようにするため

タグのペアで定義される各スタイル ルールの基本形式は次のとおりです。 value;property:value;.. .}
セレクター: スタイル ルールを定義する場合、このルールの影響を受ける Web 要素を指定する必要があります。
ルールで定義される Web 要素は、セレクター (セレクター) であり、スタイル ルールの影響を受ける Web 要素
プロパティ: 変更するスタイル名、つまり color などの CSS プロパティを指定します
値: プロパティに割り当てられる値、つまり CSS 属性値

欠点: 各ページは外部ファイルを記述する必要がありますスタイル シート
rel="styleSheet" href="test.css" type="text/css" media="screen"> type 属性と media 属性はオプションです

外部スタイル シートをバッファを使用すると、Web ページの読み込みを高速化できます

利点: Web ページをスリムにすることができます

スタイル シートをインポートします
CSS の @import ステートメントを使用して、外部スタイル シート (CSS ファイル) を他の 2 つの CSS にインポートできますファイル、およびインポートされた CSS

ファイル内のスタイル ルール定義ステートメントは、入力 CSS ファイルの一部になります。

@import ステートメントを使用して、Web ページの タグに CSS ファイルをインポートすることもできます。インポートされた CSS ファイル内の
スタイル ルール定義ステートメントは

3. スタイルルールのセレクター
HTMLセレクター: htmlタグ
クラスセレクター:
HTMLタグによって作成された各Webページ要素をいくつかのカテゴリに分割するには、このHTMLタグのclass属性を異なる値に設定する必要があります

段落 1

;

段落 1 p>
スタイル シートでは、HTML タグのカテゴリごとにスタイル ルールを定義できます


スタイル シートでは、カテゴリのすべての HTML タグのスタイル ルールを定義できます。

.blueone(color:blue)

青色のタイトル

青色の段落

> ;

ID セレクター
ID 属性は、特定の HTML 要素を定義するために使用されます。Web ページ ファイル内の 1 つの要素のみが特定の ID 属性値を使用できます。
ID セレクターは、スタイルに特定の ID 属性値を持つ HTML 要素を選択します。ルール定義ステートメント。

terst
スタイルシートでは、id 値 yellowone を持つ HTML 要素のスタイルルール定義ステートメントは次のとおりです。

# yellowone(color:青)「P EM」は連想セレクターであり、段落内の強調されたテキスト ( タグのペアのコンテンツ) の背景が黄色であることを意味します。関連するスタイルルール

P EM{背景: 黄色}: EM{背景: 緑}
の後ろに次のスタイル ルールが定義されている場合でも、セレクターは、単一のセレクターで定義されたスタイル ルールよりも優先されます。段落タグ

は引き続き黄色の背景を使用します

セレクターの結合
スタイル シートでの繰り返しの宣言を減らすために、1 つのスタイル ルール定義ステートメントで複数のセレクターを結合し、カンマ (,) で区切って使用できます

例: H1、H2、H3、H4、H5、H6、td{color:red}

疑似要素セレクター
疑似要素セレクターは、同じ HTML 要素のさまざまな状態と状態を参照します。それに含まれる内容の一部を定義する方法。
たとえば、ハイパーリンク タグ の通常の状態、訪問された状態、選択された状態、カーソルがハイパーリンク テキストに移動したときの状態、
段落の最初の文字と最初の行については、次のことができます。疑似要素セレクターを使用して定義します。疑似要素をセレクター スタイル定義として使用します:
html: 疑似要素 {属性: 値}
一般的に使用される疑似要素:
A: ハイパーリンクの選択時にアクティブになります
A:link ハイパーリンクの通常の状態 (アクションの前)

A:visited 訪問したハイパーリンクの状態

P:first-line 段落のテキストの最初の行
P:first-letter 段落の最初の文字
クラスセレクターと疑似要素で使用される形式:

HTML 要素。クラス名: 擬似要素 {属性: 値}

4. スタイルルールに関するコメント
CSS には多くのスタイル属性があり、大きく次のカテゴリに分類できます カテゴリ:
フォント、背景、テキスト、位置、レイアウト、エッジ、リスト、その他


5. スタイル属性の詳細説明
フィルター(cssフィルター)