HTML と CSS の概要 -- 第 4 章 カスケード スタイル シートについて_html/css_WEB-ITnose

知識ポイント:

1. 基本的なスタイルシートを作成する方法

2. スタイルクラスを使用する方法

3. スタイル ID を使用する方法

4. 内部スタイルシートと埋め込みスタイルを構築する方法

4.1 CSS の仕組み:

CSS: Cascading Style Sheets の略称は、フォント、色、位置などのスタイル構造を定義する言語であり、Web ページ上の情報がフォーマットおよび実装される方法を記述するために使用されます。

拡張子: .css

内部スタイルシート、外部スタイルシート、インラインスタイルシートに分かれています

「カスケード」の概念の理解：（CSSの優先順位を理解するのに役立ちます） CSSスタイルシート内のスタイルは形成されます階層。より具体的なスタイルが一般的なスタイルをオーバーライドします。この階層構造に基づいて CSS によって優先度が決定され、カスケード効果が実現されます。これは相続に似た関係として理解できます。

PS: 要素の概念: ラベルとその内部記述情報 (属性、テキスト、画像など) を表します。

4.2 基本的なスタイルシート:

標準的な書き方: 1 行に 1 つのスタイル ルール、読みやすい。

フォント列は、フォントファミリーやフォントサイズを含めて分析するのに一定の時間が必要です

フォントサイズのさまざまな単位を単純にリストします:

pt: ポイント、1 インチは 72 ポイントに相当します

in: インチ

cm : センチメートル

px: ピクセル

em: 文字の幅 m

4.3 CSS スタイル入門:

CSS のスタイル属性は 2 つのカテゴリに分類されます:

レイアウト属性: 要素の位置に影響します。 Web ページのプロパティ。

フォーマット属性: Web サイト内の要素の視覚的な表示に影響を与える属性。

レイアウト属性の表示: block: ブロック要素、clear: 両方付き

list-item: リスト項目の処理 /*現状の実用的な観点からは、blockと違いはありません*/

inline, none,その他... …

レイアウト属性 width, height

書式設定属性 border: 最近追加されたのは、四角形の角丸を制御できる border-radius です

書式設定属性 font:

1.text-decoration がよく使われますリンクの下線を削除するには

2.line-height はテキスト行の高さを設定します

4.4 スタイルクラスを使用します:

Web ページ内の一部のテキストフィールドと他のテキストを異なるものにする必要がある場合は、カスタム HTML タグを作成できます。

ここで定義した特殊なフォーマットのテキストをスタイルクラスと呼びます。したがって、フォーマット命令のカスタム セットが有効になります。例:

h1 { color: blue }

h1 はセレクター、color はスタイル属性、blue は属性の値

セレクター: タグ (h1)、クラス (.title)、ID (#container) 、など……

PS: 組み合わせセレクターの「label.class」と「label.class」の違いに注意してください。

4.5 スタイル ID を使用する:

レイアウト、書式設定、および背景との対話に ID を使用することを選択できます。

IDは同一ページ内で一意である必要があります。

4.6 内部スタイルシートとインラインスタイル:

内部スタイルシート:

インラインスタイル: style 属性

追伸: 外部スタイルシート、リンク、必要性に注意href、type、rel 属性の場合