第 2 章 XHTML と CSS の基礎

2.1 XHTML の基礎

理解:

1. このコードは doctype で始まり、これが文書型指定コードにもなります。XHTML のフォーマットマークであり、XHTML の形式を伝えるために使用されます。ブラウザでコードの種類を確認してください。

2. タグは Web ページを表し、述語タグ間のコンテンツが HTML タイプに属していることを示し、ブラウザーはその内容を分類します。コンテンツを HTML タイプとして分析します。

3. タグは、主にブラウザのタイトルバーに配置される Web ページの先頭、またはブラウザに与える必要があるその他の情報を指します。。メタタグは、Web ページのタイプが text/html であり、utf-8 でエンコードされていることをブラウザーに伝えます。

4. タグは Web ページの本文を指します。本文の内容はブラウザによってウィンドウに表示されます。

CSSコードはheadタグ内に配置します。

2.2 適切な DTD を選択する

標準の XHTML ドキュメントは doctype タグで始まる必要があります。 XHTML の場合、タイプは 3 つの異なる XHTML ドキュメントタイプを使用できます。使用法は次のとおりです。

Transitional type:

厳密なタイプ:

フレームセットタイプ:

2.3 適切なタグを選択します

1. レイアウト

ヘッダー、フッター、左列、右列など、ページ上のすべての領域で div タグが最初に選択されます。識別には div を使用できます。一文を覚えておいてください: div レイアウトと CSS コントロールを使用してください!

2. テキスト

XHTML には、h1 〜 h6 タグなど、テキストレイアウト用の多くのリッチタグが用意されています。

3. 画像とその他のオブジェクト

Flashを挿入する際によく使われるobjectタグと同様に、imgタグも画像やオブジェクトを挿入するために使用できます。

4. リスト要素

リスト要素は、リスト型コンテンツで使用されるだけでなく、ナビゲーションデザインとしても使用できます。 XHTML は、ul、ol、li、dl、dt、dd などを含むいくつかのリストタグを提供します。

他にもform、input、select、フォームなどで使われるタグがありますが、ここではタグの一部のみを紹介します。テーブルレイアウトではあまり使用されませんが、CSSレイアウトではページタグの主力となります。

2.4 CSSのインターフェースを残す

CSSはXHTMLのid属性とclass属性を使って制御されます。 id はオブジェクトの名前として理解でき、class はオブジェクトのタイプまたは所有権として理解できます。例:

コンテンツの ID を使用して p タグを定義します:

CSS で使用します: #content {...}

このフォームは書き込み可能ですp オブジェクトのスタイル。ページに複数の p タグがある場合でも、ID が異なっていれば、それぞれに異なるスタイルコードを記述できます。 XHTML では、同じ ID 名は各ページで 1 回だけ使用でき、ID 名の重複は許可されません。これが名前付けの一意です。

同様に、class 属性も次のように使用できます。

class の主な目的は CSS スタイルに対応することです。ページ内のクラス名は再利用が許可されています。言い換えれば、面倒なスタイルを複数の XHTML オブジェクトで使用できるということです。

2.5 XHTML を書く良い習慣

XHTML と HTML の最も明白な違いは、XHTML には HTML よりも厳しい構文要件があることです。これらのルールは主に次の側面に反映されます:

属性名は小文字である必要があります

属性値は二重引用符を使用する必要があります

属性の省略形は許可されません

名前の代わりにIDを使用してください

終了タグを使用する必要があります

2.6 CSS構文構造

CSSを適用するXHTML、最初に行うべきことは、適切なセレクターを選択することです。セレクターは、CSS が XHTML ドキュメント内のオブジェクトを制御する方法です。簡単に言うと、このスタイルがどのオブジェクトに適用されるかをブラウザに伝えます。

2.6.1 CSS プロパティとセレクター

CSS の構文構造は、セレクター、プロパティ、値の 3 つの部分のみで構成されます。

使用方法: セレクター {プロパティ: 値;}

セレクターは、セレクターとも呼ばれ、このスタイルコーディングのセットの対象となるオブジェクトを指します。XHTML タグにすることも、特定の ID で定義することもできます。またはクラス。

プロパティは CSS スタイルコントロールの中核であり、CSS は各 XHTML タグに対して豊富なスタイル属性を提供します。

Value は属性の値を指します。1 つは指定された範囲の値、もう 1 つは数値です。

実際のアプリケーションでは、以下のタイプのアプリケーションフォームがよく使われます:

body {background-color: blue;}

セレクタがbody、つまりページ内のタグがbodyであることを意味します。選択されており、属性が背景色である場合、このプロパティはオブジェクトの背景色を制御するために使用され、その値は青です。

単一の属性の定義に加えて、セミコロンを使用して各属性を区切ることで、単一のタグに 1 つ以上の属性を定義することもできます。例:

p {

text-align: center;

color: black

font-family: arial;

2.6.2 型セレクター

上の本文 {} は型セレクターです。タイプセレクターとは、Web ページ内の既存のタグ名を名前として使用するセレクターを指します。例: body{}、div{}、span{} など。

2.6.3 Group Selector

単一の XHTML オブジェクトにスタイルを割り当てることができることに加えて、同じスタイルをオブジェクトのグループに割り当てることもできます。例:

h1, h2, h3, p, span {

font-size: 12px;

font-family: arial;

}

ページ内のすべての h1 が、 h2、h3、p、span はすべて同じスタイル定義になります。この利点は、同じスタイルを使用する必要があるページ内の場所に対してスタイルシートを 1 回記述するだけで済むため、コードの量が削減され、CSS コードの構造が改善されることです。

2.6.4 包含セレクター

オブジェクトのサブオブジェクトのスタイルを指定するだけの場合は、包含セレクターが便利です。セレクターを含むということは、セレクターの組み合わせの前のオブジェクトに次のオブジェクトが含まれていることを意味し、オブジェクト間の区切り文字としてスペースが使用されます。例:

h1 span {

font-weight:bold;

}

h1タグ以下のspanにスタイル設定が適用され、font-weight:boldのスタイル設定が適用されます。このスタイルは、この構造のタグにのみ有効であることに注意してください。このスタイルは、h1 タグに従属しない別の h1 または span には適用されません。

両方を含めるだけでなく、包含セレクターを複数のレベルで含めることもできますが、コードを明確にし、可読性を高めるために、これは一般的に推奨されません。

2.6.5 id と class セレクター

ID と class は、ユーザー定義のタグ名に対して CSS によって提供されるセレクターであり、ユーザーはセレクター id と class を使用してページ内の XHTML タグの名前をカスタマイズできます。

2.6.6 タグ固有のセレクター

ID またはクラスとタグのセレクターの両方を同時に使用したい場合は、次の形式を使用できます:

h1#content {}: すべての ID がcontent h1タグが付与されます。 h1.p1 {}: すべての h1 タグをクラス p1 で定義することを意味します。

ラベル固有セレクターは、ラベル選択の精度の点で、ラベルセレクターと ID/クラスセレクターの間にあります。

2.6.7 組み合わせセレクター

上記の CSS セレクターは、どのような種類のセレクターであっても、組み合わせて使用できます。例:

h1 .p1 {}: h1 タグの下にクラス p1 を持つすべてのタグを示します。 #content h1 {}: コンテンツの ID を持つタグの下にあるすべての h1 タグを表します。

h1 .p1, #content h1 {}: 上記2つのグループ選択。

h1#content h2 {}: h1タグの下にあるh2タグをコンテンツのidで表します。

2.6.8 擬似クラスと擬似オブジェクト

擬似クラスと擬似オブジェクトは、CSSによって自動的にサポートされる特別なクラスとオブジェクトであり、CSSの拡張クラスとオブジェクトです。疑似クラスと疑似オブジェクトの名前はユーザーがカスタマイズできず、使用時に標準形式でのみ適用できます。

疑似クラスと疑似オブジェクトは、次の 2 つの形式で構成されます。

セレクターは疑似クラスを参照します

セレクターは疑似オブジェクトを参照します

CSS には、スタイル定義に使用できる組み込みの標準疑似クラスがいくつかあります。

:linkaリンクラベルの未訪問のスタイル:hoverマウスを上に移動したときのオブジェクトのスタイル: active ユーザーがオブジェクトをクリックしてからクリックして放すまでのスタイル:visiteda リンクオブジェクトが訪問された後のスタイル:focusオブジェクトがinput focus:first- childオブジェクトの最初の子オブジェクトのスタイル:firstページの最初のページに使用されるスタイル

擬似クラス	目的

同様に、CSS にはいくつかのビルドがあります-in ユーザースタイル定義の標準疑似オブジェクト。

擬似オブジェクト目的:after:first-letter:最初に - lineオブジェクトの最初の行のスタイル設定:beforeオブジェクトの前にコンテンツを設定しますリンクスタイルコントロールに加えて、link、:hover、:active、:visited いくつかの疑似クラスに加えて、他の疑似クラスや疑似オブジェクトは実際には一般的ではありません。


オブジェクトの後に内容を設定します
オブジェクトの最初の文字のスタイル設定

2.6.9 ワイルドカードセレクター

ワイルドカードとは、不確実な内容を文字で置き換えることを指します。いわゆるワイルドカードセレクターは、あいまいな式を使用してオブジェクトを選択できることを意味します。 CSS ワイルドカードセレクターでは * をキーワードとして使用でき、使用方法は次のとおりです:

* {

color: blue;

}

* 記号は、すべての id および class XHTML タグを含むすべてのオブジェクトを表します。スタイル定義に上記のセレクターを使用すると、ページ内のすべてのオブジェクトに色が適用されます: フォントの色を設定します。

注:

CSS セレクターの優先順位: 1 つの文を覚えておいてください。コントロールが正確であればあるほど、優先順位は高くなります。

2.7 CSS データ単位

CSS は、デザイナーが数値を定義するのに役立つ多くの種類の数学単位を提供します。

単位

説明ピクセル現在のオブジェクト内のテキストを基準としたフォントルーラーPicainch(インチ)mm (ミリメートル) 16 進数のカラー単位デバイスでサポートされている色の名前を参照

2.8 Web ページに CSS を適用する

2.8.1 インターラインスタイルシート

インターラインスタイルシートとは、次の形式に似た CSS スタイルエンコーディングを XHTML タグに記述することを指します:

...

これには強く反対します。まれなスタイルシートは、XHTML タグの style 属性のみをサポートし、プレゼンテーションとコンテンツの分離という設計原則に準拠していません。したがって、このような CSS の書き方は絶対に避けるべきです。このメソッドは、CSS スタイルをデバッグする必要がある場合の一時的な使用にのみ適しています。

2.8.2 内部スタイルシート

内部スタイルシートとインラインスタイルシートの類似点は、両方ともページ内に CSS スタイルコードを記述することです。違いは、前者はスタイルシートを固定の場所に均一に配置できることです。 CSS コードを

例		px
width: 12px;		em
font-size: 1.2ex -サイズ: 9pt;		pc
font-size: 0.5pc		in
高さ: 12in;		mm
font-size: 4mm; (255,255,255);
color:rgb(12%,100,50%);		#RRGGBB
カラー: #000FFF;		色の名前
色: ブルー;

「CSSサイトレイアウト記録」学習メモ(2)_html/css_WEB-ITnose

...