Summary of css+div layout under XHTML Super recommendation_Experience exchange

With the emergence of xml (extensible Markup Language), structured documents and data have a universal and adaptable format, which can be applied not only on the web, but also anywhere. Standards are called possible.
XHTML is the abbreviation of The Extensible HyperText Markup Language. On the basis of HTML4.0, it is extended with XML rules to obtain XHTML. It implements the transition from HTML to XML.
CSS is the abbreviation of Cascading Style Sheets. The combination of pure CSS layout and structured XHTML can help designers separate appearance and structure, making the site easier to access and maintain. 1) Add the correct DOCTYPE to the page
DOCTYPE is the abbreviation of document type. Mainly used to indicate what version of XHTML or HTML you are using. The browser interprets the page code according to the DTD (Document Type Definition) defined by your DOCTYPE.
XHTML1.0 provides three DOCTYPE options:
(1) Transitional - very commonly used.

(2) Strict (Strict)

(3) Frameset (Frameset)
2) Set a namespace (Namespace)
Add the following code directly after the DOCTYPE declaration:

A namespace is a detailed DTD that collects element types and attribute names. The namespace declaration allows you to identify your namespace through an online address pointer. Just enter the code as usual.

3) Declare your encoding language
In order to be correctly interpreted by browsers and pass tag validation, all XHTML documents must declare the encoding language they use. The code is as follows:

The coding language declared here is Simplified Chinese GB2312. If you need to produce Traditional Chinese content, you can define it as BIG5.
4) Write all tags in lowercase letters
XML is case-sensitive, so XHTML is also case-sensitive. All XHTML element and attribute names must be lowercase. Otherwise your document will be considered invalid by W3C validation. For example, the following code is incorrect:

5) Add alt attribute to images
Add alt attribute to all images. The alt attribute specifies that replacement text is displayed when the image cannot be displayed. This is dispensable for normal users, but it is crucial for text-only browsers and users using screen readers. Only when the alt attribute is added will the code pass the W3C correctness check. Note that we need to add meaningful alt attributes. Writing like the following is meaningless:

Correct writing:


6) Add all attribute values Quotes
In HTML, you don’t need to quote attribute values, but in XHTML, they must be quoted. Attributes must also be separated by spaces.
Example: This is also incorrect

7) Close all tags
In XHTML, every open tag must be closed. Empty tags should also be closed, using a forward slash "/" at the end of the tag to close themselves. For example:

8) Favorite icon
For example: First make a 16x16 icon, name it favicon.ico, and place it in the root directory. Then embed the following code into the head area:

9) Use CSS to define the appearance of elements
One benefit of using CSS layout is that you can modify the page in batches, which can change the document structure. Separate from the presentation layer to reduce the workload and server load, and increase the site's expansion capabilities and applications.
CSS does not distinguish between spaces and case. The following is some basic summary
(1) Color value
Color value can be written in RGB value, for example: color: rgb(255,0,0) , it can also be written in hexadecimal, just like the color:#FF0000 in the above example. If the hexadecimal values ​​are repeated in pairs they can be abbreviated with the same effect. For example: #FF0000 can be written as #F00. However, it cannot be abbreviated if it does not repeat. For example, #FC1A1B must be filled with six digits.
(2) Define fonts
Web standards recommend the following font definition method:
body { font-family: "Lucida Grande", Verdana, Lucida, Arial, Helvetica, Song Dynasty, sans-serif; }
Fonts are selected in the order listed. If the user's computer contains the Lucida Grande font, the document will be designated Lucida Grande. If not, it is designated as Verdana font, if there is no Verdana, it is designated as Lucida font, and so on;
Lucida Grande font is suitable for Mac OS X;
Verdana font is suitable for all Windows systems;
Lucida is suitable for UNIX users
"Song Ti" is suitable for simplified Chinese users;
If none of the listed fonts are available, the default sans-serif font can be guaranteed to be called;
(3) Group Selector
When several elements have the same style attributes, a statement can be called together, and the elements are separated by commas:
p, td, li { font-size: 12px; }
(4) Derived selector
You can use derived selectors to define styles for child elements in an element, for example:
li strong { font-style: italic; font-weight: normal;}
is for the child elements below li strong defines an italic but not bold style.
(5)id selector
CSS レイアウトは主にレイヤー「div」を使用して実装され、div のスタイルは「id selector」を通じて定義されます。たとえば、最初にレイヤー
を定義し、次にスタイル シートで次のように定義します。
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
where "menubar" ID名は自分で定義します。先頭の「#」記号に注目してください。
ID セレクターは派生もサポートしています。例:
#menubar p { text-align : right; margin-top : 10px; }
このメソッドは主にレイヤーとより複雑なレイヤーを定義するために使用されます。派生要素がたくさんあります。
(6) カテゴリ セレクター
CSS でドットを使用してカテゴリ セレクターの定義を示します。例: ページ上の
.14px {color : #f60 ;font-size:14px ;}

14px font size
このメソッドは比較的シンプルで柔軟で、ページのニーズに応じていつでも作成および削除できます。
(7) リンクのスタイルを定義する
リンクのスタイルを定義するために CSS で 4 つの疑似クラスが使用されます。つまり、a:link、a:visited、a:hover、a: active です。例:
a:link{フォントの太さ : 太字 ;テキストの装飾 : なし ;カラー : #c00 ;}
a:visited {フォントの太さ : 太字 ;テキストの装飾 : なし ;カラー : #c30 ;}
a:hover {フォントの太さ : 太字 ;テキスト装飾 : 下線 ;カラー : #f60 ;}
a:active {フォントの太さ : 太字 ;テキスト装飾 : なし ;カラー : #F90 ;}
上記のステートメントは、それぞれ「リンク、訪問リンク、マウスオーバー時、マウスクリック時」のスタイルを定義しています。上記の順番で書かないと、予想と異なる表示になる場合がありますのでご注意ください。 「LVHA」の順序であることに注意してください。
(8) セレクターを組み合わせて使用​​して、絶妙なデザイン効果を作成します
通常の順序なしリストの前にある退屈な黒い点を美しいパターンに置き換えます。サイトhttp://marine.happycog.com...
まず、CSS ルールを使用して、カテゴリ属性インベントリの順序なしリストを伝えます。
ul.inventory{
list-style:disc url(/images/common/lister2.gig) inside;}
その呼び出しタグ:
Angelfish(67 アイテム)
Angels/ Frogfish (35 項目)
Angelfish(5526 項目)
Angelfish(15 項目)
(9) 略語は時計回りの順です
margin:25px 0 25px 0;
(10) 行の高さ
line-height: 150% は行間隔が通常の 150% であることを示します
10) 構造化コード div (除算)、id、class
これらを使用してコンパクトな xhtml を記述します。 CSS をより賢く使用してください。
(1) 構造化 ID タグはクラスのものとは異なります:
属性ページに「content」という ID を持つ div が含まれている場合、別の div または他の要素が同じ名前を持つことはできません。 。対照的に、class 属性はページ上で何度も使用できます。
(2) id の規則
id 値は文字またはアンダースコアで始まり、その後に文字、数字、アンダースコアを続けることはできません。スペースとハイフンは両方とも使用できません。
11) 完成した Web サイトは標準修正のために w3c に移動できます
http:validator.w3.org
http://jigsaw.w3.org/css-v ...