[Finishing reproduced +] using XHTML + CSS Reconstruction Site
Related Tags:
XHTML three of the DOCTYPE:
Transition (Transitional): very relaxed requirements DTD, it allows you to continue to use the logo HTML4.01 (xhtml but to comply with the wording). Integrity of the code below:
<DOCTYPE html PUBLIC "- / / w3c / / DTD XHTML 1.0 Transitional / / EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Strict (Strict): demanding DTD, you can not use any of the logo and performance attributes, such as <br>. Integrity of the code below:
<DOCTYPE html PUBLIC "- / / W3C / / DTD XHTML 1.0 Strict / / EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Framework (Frameset): Framework page design specifically for the use of DTD, if your pages contain the framework require the use of this DTD. Integrity of the code below:
<DOCTYPE html PUBLIC "- / / W3C / / DTD XHTML 1.0 Frameset / / EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
DOCTYPE statement must be placed on every one of the top XHTML documents, above all the code and logo.
Namespaces: <html xmlns="http://www.w3.org/1999/xhtml" lang="utf-8">
Language codes:
Transition mode: <meta http-equiv = "Content-Type" content = "text / html; charset = utf-8" />
Strict mode: <? XML version = "1.0" encoding = "utf-8?">
css calls: <link rel="stylesheet" rev="stylesheet" href="css/style.css" type="text/css" media="all" />
head other settings:
Icon - <link rel = "icon" href = "/ favicon.ico" type = "image / x-icon" />
<link Rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
Allow search robot search stations all the links. If you want to search certain pages are not recommended for use robots.txt method
<meta Content="all" name="robots" />
Author set up information sites
<meta Name="author" content= fdabobi@gmail.com,爪子/>
Copyright settings site
<meta Name="Copyright" content="www.jpasser.cn,自由版权,任意转载" />
Site briefing (recommended)
<meta Name="description" content="这是爪子的个人网站" />
Keywords site (recommended)
<meta Content="爪子, j2ee,jsp,j2se,struts,hibernate" name="keywords" />
XHTML Basic norms
1. Have all the markings must be a corresponding marking the end of
XHTML requires strict structure, all labels must be closed. If it is not alone on the label, the label and a final "/" to close it.
2. Label elements and attributes of the name must use a lowercase
XHTML case-sensitive. XHTML requires all tags and attributes must use a lowercase names. Inclusion case is not recognized, usually dreamweaver automatically generated attribute name "onMouseOver" must be changed into a "onmouseover."
3. All the XML tags must be reasonable because the same nesting XHTML requires strict structure, so all that must be nested sequence. That is to say, a level of nested must be strictly symmetrical.
4. Attributes must be in quotation marks "" enclose in HTML, you can attribute values do not need to quote, but in XHTML, they must be added in quotation marks.
<height=80> Must be amended as follows: <height = "80">
Special circumstances, you need to attribute value in the use of double quotes, you can use entities, such as single quotes can be used ', such as: <alt = "say'hello'">
5. To all <& special symbols and codes used any less than (<), is not part of the label, must be encoded & lt;
Any more than ( "), is not part of the label, must be encoded & gt;
Any (&), is not part of the entity, must be encoded & amp;
Note: The above no spaces between characters.
6. Given all the attributes to a value
XHTML requires all property must have a value of no value to repeat itself. For example:
<td Nowrap> <input type="checkbox" name="shirt" value="medium" checked>
To be amended as follows:
<td Nowrap="nowrap"> <input type="checkbox" name="shirt" value="medium" checked="checked">
7. Not in the footnotes on the use of "-"
"-" Only in the beginning and the end of the Notes, that is, the content they no longer valid. For example, the following code is not valid:
<! - Is here is here Notes ----------- Notes ->
Equate with the replacement or spaces within the dotted line.
<! - Is here is here Notes ============ Notes ->
CSS specifications:
1. Basic grammatical norms
P (COLOR: # FF0000; BACKGROUND: # FFFFFF)
The "p" We are known as the "selector" (selectors), that we give the "p" definition of style;
Written in a style statement of large brackets "()";
Background Color and known as the "attribute" (property), with a semicolon between the different attributes, "" separation;
"# FF0000" and the "# FFFFFF" is the value of the attribute (value).
2. Color RGB color values can be used to write, for example: color: rgb (255,0,0), can also use hexadecimal write, as the above examples color: # FF0000. If hexadecimal value is paired duplication can be abbreviated, the same effect. For example: # FF0000 # F00 can be written. But if we do not repeat can not abbreviated, for example, must be filled FC1A1B # 6.
3. Definition of fonts
web standards recommended Font definitions are as follows:
body (font-family: "Lucida Grande," Verdana, Lucida, Arial, Helvetica 10 lines, sans-serif;)
Fonts listed in the order in accordance with the selection. If the user's computer containing Lucida Grande font files will be designated as Lucida Grande. If not, it was designated as the Verdana font, Verdana If not, designated as the Lucida fonts, and so on;
Lucida Grande fonts for Mac OS X;
Verdana font for all Windows systems;
Lucida for UNIX users
"10 lines" for Chinese Simplified user;
If the list of fonts can not, the default sans-serif fonts can be guaranteed call;
4. Group selector when elements like style attribute, it can call a joint statement between the elements separated by a comma,: p, td, li (font-size: 12px;)
5. Derived selector selector can be used to derive an Element of the definition of style elements, such as this:
Li strong (font-style: italic; font-weight: normal;)
Li Below is the strong element of the definition of a non-bold italic styles.
Used 6.id choice css layout of the main "div" to achieve, by the style div "id selector" to the definition. For example, we first define a layer
<div Id="menubar"> </ div>
Then in the form of exterior this definition:
# Menubar (MARGIN: 0px; BACKGROUND: # FEFEFE; COLOR: # 666;)
Among them, "menubar" is the definition of your own id name. Attention to the front and "#".
Id selector also support derivatives, such as:
# Menubar p (text-align: right; margin-top: 10px;)
This method mainly used for the definition of those and more complex, there are a number of derivative elements.
6. Category selector in the CSS, with a dot that category selector definition, such as:
.14 Px (color: # f60; font-size: 14px;)
In the page, with class = "category of" Method Invocation:
<span Class="14px"> 14px font size of </ span>
This method is relatively simple flexible, and can be required at any time under the new and delete pages.
7. Definition of the style links
CSS pseudo four categories used to define the style of links, namely: a: link, a: visited, a: hover and a: active, such as:
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;)
Definition of the above statements were "link has been visited links, parked in the top of the mouse, the mouse at the point" style. Note that the order must be written in accordance with the above, you may show otherwise expected not the same. Remember them in the order is "LVHA."
CSS layout:
1. Definition DIV
A typical example of the definition of div:
# Sample (MARGIN: 10px 10px 10px 10px;
PADDING: 20px 10px 10px 20px;
BORDER-RIGHT: # CCC 2px solid;
BORDER-BOTTOM: # CCC 2px solid;
BORDER-LEFT: # CCC 2px solid;
BORDER-TOP: # CCC 2px solid;
BACKGROUND: url (images / bg_poem.jpg) # FEFEFE no-repeat right bottom;
COLOR: # 666;
TEXT-ALIGN: center;
LINE-HEIGHT: 150%; WIDTH: 60%;)
As follows:
For the name of the sample, used in the pages <div id = "sample"> can call this style.
Margin means to stay outside of the borders of the blank for the page margins or with other layers to create a distance. "10px 10px 10px 10px" on behalf of "the right lower left" (clockwise direction) four border, if we, can be abbreviated as "MARGIN: 10px;." If the margins to zero, as the "MARGIN: 0px;." NOTE: When the value is zero, in addition to RGB color values from 0% Percent must be other circumstances behind can not with the unit "px." MARGIN is transparent elements and can not be defined colours.
Padding layer refers to the borders of the gap between the content. And the same margin, are designated on the right lower left bezel to the contents of the distance. If all the same, can be abbreviated as "PADDING: 0px." Left alone can be designated as the "PADDING-LEFT: 0px;." PADDING is transparent elements and can not be defined colours.
Border refers to the borders of the "BORDER-RIGHT: # CCC 2px solid," a definition of the color box to the right to "CCC #" Width "px" style as "solid" line. If the dotted line styles can be used to "dotted."
BACKGROUND definition of the background. The two definitions, the definition picture background to the adoption of the "url (.. / images / bg_logo.gif)" to designate the background picture path followed by the definition Background Color "# FEFEFE." "No-repeat" means the background picture need not repeat, repeat if necessary horizontal "repeat-x", vertical repeat of "repeat-y", repeated covered the entire background of "repeat." Behind the "right bottom" refers to a background picture from the lower right corner of the beginning. If there is no background images can only define the background color BACKGROUND: # FEFEFE
COLOR used to define a font color, on the one already introduced.
TEXT-ALIGN used to define the content of the arrangement, the center middling, left Habitat left and right of abode right.
LINE-HEIGHT to high definition, 150% refers to the Height of standard height of 150 per cent, can be written as: LINE-HEIGHT: 1.5 or LINE-HEIGHT: 1.5em, are the same meaning.
WIDTH definition of the width of a fixed value can be used, for example, 500 px, the percentage can also be used, like here, "60 percent." It should be noted that: the width means you only the width of the content, not including margin, border and padding. But in some browser is not so defined, and we need you to try.
2.CSS2 Box Model 1996 CSS1 since the launch of W3C organizations on the proposal, as have all the right in a box (box), the designer can create this box to control the definition of the attributes, including paragraphs like these are Table, title, and the picture layer <div>. Box Model definition of the four main areas: content (content), from the borders (padding), border (border) and the margin (margin). We are talking of the above is a typical sample of the box. For beginners, often in confusion margin, background-color, background-image, padding, content, the border between the level of relations and mutual influence.
3. Assisted by the background picture will be handled by XHTML + CSS layout, a technical you are not accustomed to a beginning, it should be said that is a way of thinking and traditional forms layout not the same, that is: All are assisted by background picture to achieve. Something like this:
BACKGROUND: url (images / bg_poem.jpg) # FEFEFE no-repeat right bottom;
Although it could be used <img> directly from the content, but it is not recommended. Here the "auxiliary picture" refers to pages that are not as a part of the content of the expression, but merely for tinkering with intervals to remind the picture. For example: the photo in the picture, pictures, news photographs, the top three box model d picture belong to a part of the content, they can use <img> elements directly from the page, and other similar logo, the title picture, the list prefix must use background images, or other means CSS format.
The reason for this is 2:00:
Performance and will complete phase separation structure (a reference to read another article: "understanding of the structure and performance of Separation"), with the CSS to control all the appearance of performance, and ease of revision.
Make the page more user-friendly, more friendly. For example: the blind use screen readers with the background picture on the technology will not be read out.
- Two minutes to be a xhtml + css the Home
- Web standards: XHTML + CSS (W3C)
- Xhtml + css Guide
- XHTML CSS style into what?
- Web standards beginner: CSS and XHTML
- XHTML + CSS accumulation of 1
- XHTML
- On the XHTML CSS
- Css information xhtml +
- JS + CSS + XHTML ? ?
- XHTML + CSS: Call Style Sheets
- Domestic xhtml + css website
- Css & Web standards xhtml
- XHTML CSS = Reconstruction Site
- PhotoShop with two minutes to complete a xhtml + css Home
- Xhtml + CSS on the web standards
- XHTML + CSS = Reconstruction Site
- Http://www.w3cpro.cn/xhtml/index.html the css
- XHTML + CSS compatibility solutions
- Use the advantages of xhtml + css
