CSS+Div レイアウトの概要 - Basics_html/css_WEB-ITnose

xml (拡張マークアップ言語) の出現により、構造化ドキュメントとデータは普遍的で適応可能な形式となり、Web 上だけでなくどこにでも適用できるようになりました。標準は可能と呼ばれます。
XHTML は、Extensible HyperText Markup Language の略称です。 HTML4.0をベースにXMLルールを拡張してXHTMLを取得します。 HTML から XML への移行を実装します。
CSSはCascading Style Sheetsの略称です。純粋な CSS レイアウトと構造化された XHTML を組み合わせることで、デザイナーが外観と構造を分離し、サイトへのアクセスと保守が容易になります。天两は、過去 2 日間の CSS+DIV の研究について基本的な要約を作成しました。

1) 正しい DOCTYPE をページに追加します
DOCTYPE はドキュメントタイプの略称です。主に、使用している XHTML または HTML のバージョンを示すために使用されます。ブラウザは、DOCTYPE で定義された DTD (Document Type Definition) に従ってページ コードを解釈します。
XHTML1.0 には 3 つの DOCTYPE オプションがあります: 2) 名前空間 (Namespace) を設定します。
DOCTYPE 宣言の直後に次のコードを追加します。
名前空間は、要素の型と属性名を収集する詳細な DTD であり、名前空間宣言を使用すると、オンライン アドレス ポインターを通じて名前空間を識別できます。いつものようにコードを入力するだけです。

3) エンコード言語を宣言します
ブラウザで正しく解釈され、マークアップ検証に合格するには、すべての XHTML ドキュメントで使用するエンコード言語を宣言する必要があります。コードは次のとおりです:

ここで宣言されているコーディング言語は簡体字中国語 GB2312 です。中国のコンテンツは、BIG5 用に定義できます。

(1) 過渡的 - 非常に一般的に使用されます。

2) 厳密

(3) フレームセット

4) すべてのタグを小文字で記述します
XML は大文字と小文字を区別するため、XHTML も大文字と小文字を区別します。すべての XHTML 要素および属性名は小文字である必要があります。そうしないと、ドキュメントは W3C 検証によって無効とみなされます。たとえば、次のコードは間違っています:

5) 画像に alt 属性を追加します
すべての画像に alt 属性を追加します。 alt 属性は、画像が表示できない場合に代替テキストを表示することを指定します。これは通常のユーザーには必要ありませんが、テキストのみのブラウザーやスクリーン リーダーを使用するユーザーにとっては重要です。 alt 属性が追加された場合にのみ、コードは W3C の正当性チェックに合格します。次のような記述は無意味であることに注意してください:



6) すべての属性値に引用符を追加します
HTML では属性値に引用符を追加する必要はありませんが、 XHTML の場合は引用符で囲む必要があります。属性もスペースで区切る必要があります。
例:

---

これも誤りです

7) すべてのタグを閉じます
XHTML では、開いているタグはすべて閉じる必要があります。空のタグも閉じる必要があり、タグの末尾にスラッシュ「/」を使用してタグ自体を閉じます。例:



8) お気に入りの小さなアイコン
例: まず、16x16 のアイコンを作成し、favicon.ico という名前を付け、ルート ディレクトリに配置します。次に、次のコードを先頭領域に埋め込みます:



9) CSS を使用して要素の外観を定義します
CSS レイアウトを使用する利点の 1 つは、ページをバッチで変更できることです。ドキュメント構造とプレゼンテーション層を結合して分離することで、作業負荷とサーバー負荷を軽減し、サイトの拡張機能とアプリケーションを向上させます。
Dreamweaver は CSS を記述するための非常に便利な方法を提供します (写真)

CSS はスペースと大文字を区別しません
(1) カラー値
カラー値は RGB で記述できます。例: color: rgb(255,0,0)。上記の color:#FF0000 の例と同様に、16 進数で記述することもできます。 16 進値がペアで繰り返される場合、同じ効果で省略できます。例: #FF0000 は #F00 と記述できます。ただし、重複しない場合は省略できません。たとえば、#FC1A1B には 6 桁の数字を入力する必要があります。
(2) フォントの定義
Web 標準では、次のフォント定義方法が推奨されています。
body { font-family: "Lucida Grande"、Verdana、Lucida、Arial、Helvetica、Song Nursing、sans-serif }
フォントは次の順序です。リストから選択してください。ユーザーのコンピュータに Lucida Grande フォントが含まれている場合、ドキュメントは Lucida Grande として指定されます。そうでない場合は Verdana フォントとして指定され、Verdana がない場合は Lucida フォントとして指定されます。
Lucida Grande フォントは Mac OS X に適しています。
Verdana フォントはすべての Windows システムに適しています。 UNIX ユーザーに適しています。
「Song Ti」は簡体字中国語ユーザーに適しています。
リストされたフォントがどれも利用できない場合は、デフォルトのサンセリフ フォントが確実に呼び出されます。

(6) カテゴリ セレクター

を使用します。 CSS 定義のカテゴリ セレクターで始まるドット。例:

.14px {color : #f60 ;font-size:14px ;}
ページ内で、class="category name" メソッドを使用して呼び出します:
14px size Font このメソッドは比較的シンプルで柔軟で、ページのニーズに応じていつでも作成および削除できます。

(7) リンク スタイルを定義します
リンク スタイルを定義するために CSS で 4 つの疑似クラスが使用されます。つまり、a:link、a:visited、a:hover、a:active です。例:

a:link{フォントの太さ : 太字 ;テキスト装飾 : なし ;カラー : #c00 ;}

a:visited {フォントの太さ : 太字 ;テキスト装飾 : なし ;カラー : #c30 ;}
a:hover {フォントの太さ :ボールド ;テキスト装飾 : 下線 ;カラー : #f60 ;}
a:active {font-weight : ボールド ;テキスト装飾 : なし ;カラー : #F90 ;}
上記のステートメントはそれぞれ「リンクと訪問済みリンク」を定義します。マウスオーバー時、マウスクリック時」スタイル。上記の順番で書かないと、予想と異なる表示になる場合がありますのでご注意ください。 「LVHA」の順序であることに注意してください。

(8) セレクターを組み合わせて使用​​して、絶妙なデザイン効果を作成します
美しいパターンを使用して、通常の順序なしリストの前にあるくすんだ黒い点を置き換えます。サイト http://marine.happycog.com/
まず CSS ルールを使用して、カテゴリ属性インベントリの順序なしリストを伝えます。
ul.inventory{
list-style:disc url(/images/common/lister2.gig) inside;}
その呼び出しタグ:

• エンゼルフィッシュ(67 アイテム)


• エンジェル/カエルフィッシュ(35 アイテム)< ; /li>
  
• エンゼルフィッシュ(5526 件)


• ;/a>(15 項目)



(9)略語は時計回りの順です
margin:25px 0 25px 0;

(10)line-height :150% は、行間は通常の150%です


10) 構造化コード div(ディビジョン)、id、class

これらを利用してコンパクトなxhtmlを書き、cssをより賢く使いましょう
(1) 構造化idタグ、クラスごとに違いがあります:
属性ページに ID が「content」の div が含まれている場合、同じ名前の別の div または他の要素を含めることはできません。対照的に、class 属性はページ上で何度も使用できます。
(2) id の規則
id 値は文字またはアンダースコアで始まり、その後に文字、数字、アンダースコアを続けることはできません。スペースとハイフンは両方とも使用できません。

11) 制作したウェブサイトは w3c に標準校正できます
http:validator.w3.org
http://jigsaw.w3.org/css-validator/


(3) Group Selector

複数の場合要素は同じスタイル属性を持ち、ステートメントを一緒に呼び出し、要素をカンマで区切ることができます:
p, td, li { font-size : 12px; }


(4) 派生セレクター

派生選択を使用できます。要素内のサブ要素のスタイル。例:
li Strong { font-style : italic; font-weight :normal; }
これは、li の下の強いサブ要素の斜体スタイルを定義します。 。


(5)idセレクター

CSSによるレイアウトは主にレイヤー「div」を使用して実装され、divのスタイルは「idセレクター」を通じて定義されます。たとえば、最初にレイヤー



を定義し、次にスタイル シートで次のように定義します:
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR : #666;}
ここで、「menubar」は定義した ID 名です。先頭の「#」記号に注目してください。

ID セレクターは導出もサポートしています。例:

#menubar p { text-align : right; margin-top : 10px; }
このメソッドは主に、複数の導出を持つレイヤーとより複雑な要素を定義するために使用されます


投稿者: marslei
アクセス先: http://www.yuanma.org/data/2006/1214/article_1951.htm