XHTML下のcss+divレイアウトまとめ 超オススメ_体験交流

xml (拡張マークアップ言語) の出現により、構造化ドキュメントとデータは、Web 上だけでなくどこにでも適用できる、普遍的で適応性のある形式になりました。標準は可能と呼ばれます。
XHTML は、Extensible HyperText Markup Language の略称です。 HTML4.0をベースにXMLルールを拡張してXHTMLを取得します。 HTML から XML への移行を実装します。
CSSはCascading Style Sheetsの略称です。純粋な CSS レイアウトと構造化された XHTML を組み合わせることで、デザイナーが外観と構造を分離し、サイトへのアクセスと保守が容易になります。 1) 正しい DOCTYPE をページに追加します
DOCTYPE はドキュメント タイプの略称です。主に、使用している XHTML または HTML のバージョンを示すために使用されます。ブラウザは、DOCTYPE で定義された DTD (Document Type Definition) に従ってページ コードを解釈します。
XHTML1.0 には 3 つの DOCTYPE オプションがあります:
(1) 暫定 - 非常に一般的に使用されます。

(2) Strict (Strict)

(3) Frameset (Frameset)
2) 名前空間を設定する (Namespace)
以下のコードを追加DOCTYPE 宣言の直後:

ネームスペースは、要素の型と属性名を収集する詳細な DTD であり、ネームスペース宣言を使用すると、オンライン アドレス ポインターを通じてネームスペースを識別できます。いつものようにコードを入力するだけです。

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

ここで宣言されているコーディング言語は簡体字中国語 GB2312 です。繁体字中国語のコンテンツを作成する必要がある場合は、それを BIG5 として定義できます。
4) すべてのタグを小文字で記述します
XML では大文字と小文字が区別されるため、XHTML も大文字と小文字が区別されます。すべての XHTML 要素および属性名は小文字である必要があります。そうしないと、文書は W3C 検証によって無効とみなされます。たとえば、次のコードは正しくありません:

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

正しい記述:


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

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


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

9) CSS を使用して要素の外観を定義します

CSS レイアウトを使用する利点の 1 つは、ページをバッチで変更できることです。 、プレゼンテーション層から分離してワークロードとサーバー負荷を軽減し、サイトの拡張機能とアプリケーションを向上させることができます。 CSS ではスペースと大文字小文字が区別されません。以下に基本的な概要を示します。
(1) カラー値
カラー値は RGB 値で記述できます。例: color: rgb(255,0,0) ) 、上記の例の color:#FF0000 のように 16 進数で記述することもできます。 16 進値がペアで繰り返される場合、同じ効果で省略できます。例: #FF0000 は #F00 と記述できます。ただし、重複しない場合は省略できません。たとえば、#FC1A1B には 6 桁の数字を入力する必要があります。
(2) フォントを定義する
Web 標準では、次のフォント定義方法を推奨しています。
フォントはリストされた順序で選択されます。ユーザーのコンピュータに Lucida Grande フォントが含まれている場合、ドキュメントは Lucida Grande として指定されます。そうでない場合は Verdana フォントとして指定され、Verdana がない場合は Lucida フォントとして指定されます。
Lucida Grande フォントは Mac OS X に適しています。
Verdana フォントはすべての Windows に適しています。
Lucida は UNIX ユーザーに適しています。
"Song Ti" は簡体字中国語ユーザーに適しています。
リストされているフォントがどれも使用できない場合は、デフォルトのサンセリフ フォントが呼び出されます。
(3) グループセレクター
複数の要素が同じスタイル属性を持つ場合、ステートメントをまとめて呼び出すことができ、要素はカンマで区切られます。
p, td, li { font-size: 12px; }
(4) 派生セレクター
派生セレクターを使用して、要素内の子要素のスタイルを定義できます。例:
li Strong { font-style: italic; font-weight:normal;}
は以下の子要素用です。 li Strong は斜体ですが太字ではないスタイルを定義します。
(5)id selector
CSS layout is mainly implemented using the layer "div", and the style of the div is defined through the "id selector". For example, we first define a layer
and then define it like this in the style sheet:
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
where "menubar" is defined by you yourself ID name. Note the "#" sign in front.
The id selector also supports derivation, for example:
#menubar p { text-align : right; margin-top : 10px; }
This method is mainly used to define layers and those that are more complex and have many derived elements.
(6) Category selector
Use a dot in CSS to indicate the category selector definition, for example:
.14px {color : #f60 ;font-size:14px ;}
on the page , use the class="category name" method to call:
14px font size
This method is relatively simple and flexible, and can be created and deleted at any time according to the needs of the page.
(7) Define the style of the link
Four pseudo-classes are used in CSS to define the style of the link, namely: a:link, a:visited, a:hover and a: active, for example:
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
a:active {font-weight : bold ;text-decoration : none ;color : #F90 ;}
The above statements respectively define the styles of "links, visited links, when the mouse is over, and when the mouse is clicked". Note that you must write in the above order, otherwise the display may be different from what you expected. Remember they are in order "LVHA".
(8) Use selectors in combination to create exquisite design effects
Replace the boring black dots in front of ordinary unordered lists with beautiful patterns. Sitehttp://marine.happycog.com...
First use css rules to tell the unordered list of the category attribute inventory.
ul.inventory{
list-style:disc url(/images/common/lister2.gig) inside;}
Its call tag:
Angelfish(67 items)
Angels/ Frogfish(35 items)
Angelfish(5526 items)
Angelfish(15 items)
(9) The abbreviations are in clockwise order
margin:25px 0 25px 0;
(10) Line height
line-height: 150% indicates that the line spacing is 150% of normal
10) Structured code div (division), id, class
Use them to write compact xhtml , use css more wisely.
(1) Structured id tags are different from class ones:
If your attribute page contains a div with an id of "content", it cannot have Another div or other element has the same name. In contrast, the class attribute can be used again and again on a page.
(2) Rules for id
An id value must start with a letter or underscore. It cannot start with a number and then follow letters, numbers and underscores. Spaces and hyphens - both are not allowed.
11) The finished website can go to w3c for standard correction
http:validator.w3.org
http://jigsaw.w3.org/css-v ...