XHTML Css+div Layout Summary Super Recommendation _ Experience Exchange

XML(extensible Markup Language), structured documents and data have a generic, modular format that applies not only to the web, but to anywhere. Standards are called possible.
XHTMLis the abbreviation for the extensible Hypertext Markup Language Extensible Identification language. On the basis of HTML4.0, the XML rules are extended to obtain XHTML. It implements the transition from HTML to XML.
CSS is the abbreviation for cascading style sheets cascading style sheets. The combination of pure CSS layout and structured XHTML can help designers separate appearance and structure, making site access and maintenance easier. 1 Add the correct DOCTYPE to the page
DOCTYPE is the shorthand for document type. It is mainly used to illustrate what kind of XHTML or HTML version you are using. The browser interprets the page code based on your DOCTYPE defined DTD (document type definition).
The XHTML1.0 offers three kinds of doctype to choose from:
(1) Transition type (transitional)--use is very common.

(2) strict type (Strict)

(3) frame type (Frameset)
2 Set a name space (Namespace)
Add the following code directly after the DOCTYPE declaration:

A namespace is a detailed Dtd,namespace declaration that collects the element type and attribute name to allow you to identify your namespace by an online address point. Just enter the code as you like.

3 Declare your coding language
All XHTML documents must declare the encoding language they use in order to be properly interpreted by the browser and validated by identity. The code is as follows:

The coding language stated here is Simplified Chinese GB2312, which you can define as BIG5 if you need to make traditional content.
4 Write all the labels in lowercase letters
XML is sensitive to case, so XHTML is also different in capitalization. All XHTML elements and attributes must be named with lowercase. Otherwise, your document will be considered invalid by the verification of the consortium. For example, the following code is not correct:

5 Add alt attribute to picture
Adds an alt attribute to all pictures. The ALT attribute specifies that when the picture cannot be displayed, it is displayed for alternate text, which is optional for normal users, but is essential for plain text browsers and users who use screen readers. Only by adding the ALT attribute will the code be passed by the correct checksum of the consortium. Note that we want to add a meaningful alt attribute, which is meaningless as follows:

The correct wording:


6 Quote all attribute values
In HTML, you may not need to enclose attribute values in quotes, but in XHTML they must be quoted. You must also separate the properties with spaces.
Example: This is also not true

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

8) Favorites Small Icon
For example: First make a 16x16 icon, named Favicon.ico, placed in the root directory. Then embed the following code in the head area:

9 define element appearance with CSS
One advantage of CSS layout is that you can modify the page in batches, which separates the document structure from the presentation layer, reduces workload and server load, and increases the scalability and application of the site.
CSS is not the difference between the space and the case, the following is a summary of some basic
(1) Color value
Color values can be written in RGB values, such as: Color:rgb (255,0,0), or in hexadecimal, as in the example color: #FF0000. If the hexadecimal value is a pair of duplicates, the effect will be the same. For example: #FF0000可以写成 #f00. However, if you do not repeat, you can not abbreviate, for example, #fc1a1b must be written full six digits.
(2) Defining fonts
Web standards recommend the following font definition methods:
Body {font-family: "Lucida Grande", Verdana, Lucida, Arial, Helvetica, XXFarEastFont-Franklin, Sans-serif;
Fonts are selected in the order listed. If the user's computer contains Lucida Grande fonts, the document is specified as Lucida Grande. If not, it is specified as a Verdana font, and if there is no Verdana, specify the Lucida font, and so on;
Lucida Grande fonts for Mac OS X;
Verdana fonts are suitable for all Windows systems;
Lucida for UNIX users
"Song body" suitable for Chinese simplified users;
If none of the listed fonts are available, the default Sans-serif font is guaranteed to be invoked;
(3) Group Selector
When several element style properties are the same, a declaration can be invoked together, separated by commas:
P, TD, Li {font-size:12px;}
(4) Derivation selector
You can use a derivation selector to define a style for a child element in an element, such as this:
Li Strong {font-style:italic; font-weight:normal;}
is to give Li the following child element strong defines an italic bold style.
(5) ID Selector
The CSS layout is implemented primarily with the layer "div", and the div style is defined by the "ID selector". For example, we first define a layer
Then define it in the stylesheet:
#menubar {margin:0px; BACKGROUND: #FEFEFE; COLOR: #666;}
where "menubar" is your own definition of the ID name. Note that the "#" number is added to the front.
The ID selector also supports derivation, for example:
#menubar p {text-align:right; margin-top:10px;}
This method is primarily used to define layers and those that are more complex and have multiple derived elements.
(6) Category Selector
A class selector definition is represented in a CSS with a point beginning, for example:
.14px {color: #f60; font-size:14px;}
In the page, call the class= "category name" method:
Font of 14PX size
This method is relatively simple and flexible and can be created and deleted at any time according to page needs.
(7) Define the style of the link
CSS uses four pseudo classes to define the style of the links, respectively: 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 "link, visited link, when mouse is stopped above, when mouse is clicked." Note that you must write in the order shown above, otherwise the display may be different from what you expected. Remember that they are in the order of "LVHA".
(8) combination of use selector to create exquisite design effect
Replace a dull black spot with a beautiful pattern in front of an ordinary unordered table. Site http://marine.happycog.com ...
First, use CSS rules to tell the Category attribute inventory unordered list.
ul.inventory{
List-style:disc URL (/images/common/lister2.gig) inside;}
Its invocation token:
Angelfish (for items)
Angels/frogfish (items)
Angelfish (5526 items)
Angelfish (items)
(9) Abbreviations are in the clockwise order
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 tags that differ from class:
If your property page contains a DIV whose ID is "content", it is impossible for another div or other element to have the same name. Instead, the class attribute can be used again and again in a page.
(2) The rules for IDs
An ID value must begin with a letter or underscore, it cannot begin with a number, and then follow letters, numbers, and underscores. Spaces and hyphens-are not allowed.
11 Make a good website can go to the Internet to do standard correction
http:validator.w3.org
Http://jigsaw.w3.org/css-v ... -->