Summary of css + div layout in XHTML

XmlWith the emergence of extensible Markup Language, structured documents and data have a common and adaptive format, which can be applied not only on the web, but also anywhere. The standard is called possible.
XHTMLIs The abbreviation of The Extensible HyperText Markup Language. Based on HTML4.0, XML rules are used to expand it and XHTML is obtained. It implements the transition from HTML to XML.
CSS is the abbreviation of Cascading Style Sheet. The combination of pure CSS layout and structured XHTML helps designers to separate the appearance and structure, making site access and maintenance easier. 1) Add the correct DOCTYPE to the page
DOCTYPE is short for document type. It is mainly used to describe the XHTML or HTML version you are using. The browser interprets the Page code based on the DTD defined by DOCTYPE (document type definition.
XHTML1.0 provides three DOCTYPE options:
(1) Transition type (Transitional)-widely used.

(2) Strict)

(3) Framework (Frameset)
2) set a 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. Just enter the code.

3) declare your encoding Language
All XHTML documents must declare the encoding languages they use in order to be correctly interpreted and validated by the browser. The Code is as follows:

The encoding language declared here is simplified Chinese GB2312. If you need to make traditional Chinese content, you can define it as BIG5.
4) Write All tags in lowercase letters
XML is case sensitive. Therefore, XHTML is also case sensitive. The names of all XHTML elements and attributes must be in lower case. Otherwise, your document will be considered invalid by W3C validation. For example, the following code is incorrect:

5) Add the alt attribute to the image
Add the alt attribute to all images. The alt attribute specifies that the text will be displayed for replacement when the image cannot be displayed. This is dispensable for normal users. However, it is vital for users of a text browser and a screen reader. Only when the alt attribute is added will the code pass the W3C correctness verification. Note that we need to add a meaningful alt attribute. it is meaningless to write a statement like the following:

Correct syntax:

6) quote all attribute values
In HTML, you do not need to enclose attribute values in quotation marks, but in XHTML, they must be enclosed in quotation marks. Properties must also be separated by spaces.
For example, this is also incorrect.

7) Close all labels
In XHTML, each opened tag must be closed. Empty labels should also be closed. Use a forward slash "/" at the end of the label to close themselves. For example:

8) favorites icons
For example, first create a 16x16 icon named favicon. ico and put it in the root directory. Then, embed the following code into the head area:

9) Use CSS to define the element appearance
One advantage of css layout is that you can modify pages in batches. It can separate the document structure from the presentation layer, reduce the workload and server load, and increase the scalability and application of the site.
Css is case-insensitive. Below are some basic summaries.
(1) color value
The color value can be written in RGB format, for example, color: rgb (, 0, 0) or hexadecimal format, just like color: # FF0000 in the preceding example. If the hexadecimal value is repeated in pairs, the effect is the same. For example, # FF0000 can be written as # F00. However, it cannot be abbreviated if it is not repeated. For example, # FC1A1B must be filled with six characters.
(2) define the font
The following font definition method is recommended for web standards:
Body {font-family: "Lucida Grande", Verdana, Lucida, Arial, Helvetica,, sans-serif ;}
The font is selected in the listed order. If your computer contains the Lucida Grande font, the document will be specified as Lucida Grande. If no, It is specified as the Verdana font. If no Verdana is available, it is specified as the Lucida font, and so on ,;
Lucida Grande fonts are suitable for Mac OS X;
Verdana fonts are suitable for all Windows systems;
Lucida is suitable for UNIX users
"" Is suitable for simplified Chinese users;
If none of the listed fonts are available, the default sans-serif font can be called;
(3) group Selector
When the style attributes of several elements are the same, you can call a declaration. elements are separated by commas ,:
P, td, li {font-size: 12px ;}
(4) derivative Selector
You can use the derived selector to define a style for the child element in an element. For example:
Li strong {font-style: italic; font-weight: normal ;}
The child element strong under li defines a italic style that is not bold.
(5) id Selector
The CSS layout is mainly implemented by the "div" layer, and the div style is defined by the "id selector. For example, we first define a Layer
Then define in the style sheet as follows:
# Menubar {MARGIN: 0px; BACKGROUND: # fefefefe; COLOR: #666 ;}
Here, "menubar" is your own defined id name. Add "#" to the 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 complicated and have multiple derived elements.
(6) category Selector
In CSS, a class selector definition starts with a vertex, for example:
. 14px {color: # f60; font-size: 14px ;}
On the page, use the class = "class Name" method to call:
14 PX font
This method is simple and flexible, and can be created and deleted at any time according to the page requirements.
(7) define the link Style
In CSS, four pseudo classes are used to define the link styles: 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 preceding statements define the style of "link, accessed link, mouse over, and mouse over. Note: The data must be written in the above sequence; otherwise, the display may be different from what you expected. Remember that their order is "LVHA ".
(8) combine selector to create exquisite design results
Use a pretty pattern to replace the dull black spots in front of an unordered list. Site http://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 abbreviation is clockwise.
Margin: 25px 0 25px 0;
(10) Row Height
Line-height: 150% indicates that the line spacing is normal 150%.
10) Structured code div (division), id, class
Use them to write compact xhtml, and use css more wisely.
(1) Structured id tag, which is different from class:
If your property page contains a div whose id is "content", it cannot have another div or other elements with the same name. On the contrary, the class attribute can be used repeatedly on a page.
(2) id rules
An id value must start with a letter or underline. It cannot start with a number, followed by letters, numbers, and underscores. Space and hyphen-are not allowed.
11) Make a website and go to w3c for standard correction.
Http: validator.w3.org
Http://jigsaw.w3.org/css-v...