Are you studying CSS position? Cannot still master pure CSS layout completely? Have set back of two kinds of circumstances normally your study:

The first kind may be the principle that you had not understood CSS to handle a page. Before the page whole that considers you in you behaves the effect, you ought to consider the semantics of content and structure first, add CSS in the light of semantic, structure again next. This article will tell you should how HTML structuralization.

Another kind of reason is your very familiar to those expressional layer attribute (for example: Cellpadding, , Hspace, Align=left is waited a moment) be at a loss what to do, the what CSS statement that does not know to should be changed into correspondence. Solved the first kind of problem when you, knew how structuralization your HTML, I give out again a list, list original expressional attribute is replaced with what CSS in detail.

Structured HTML

When we just were learning a webpage to make, always consider how to be designed first, consider those pictures, font, facial expression, and distribution plan. Next we use Photoshop or Fireworks picture comes out, cut Cheng Xiaotu. Final repass edits HTML all designs reductive expression is on the page.

If you hope your HTML page uses CSS position (the) that is CSS-friendly, you need to turn round to come again, take no account of “ exterior ” first, want to ponder over the semantics of your page content and structure first.

The exterior is not the most important. The HTML page with a good structure can be shown with any exteriors come, CSS Zen Garden is a typical case. CSS Zen Garden helps us realise the powerful force of CSS finally.

HTML is read on computer screen only not just. The likelihood cannot show your picture with Photoshop elaborate design to go up in PDA, mobile telephone and screen reader. But the different definition that the HTML page with a good structure can pass CSS, show in anyplace, on any network equipment.

Begin to think

What should learning above all is a structure, a few writers also say for semantics. You need the means of this term the content that analyses you piece, and the purpose that every content serves, build corresponding HTML structure according to these content purposes again next.

If you sit anatomize and program your page structure, you may get similar such a few:

The mark chooses a name with the station

Homepage extent content

Site navigation (entree is odd)

Child menu

Search casing

Functional area (shop for example car, counter)

Page foot (copyright and concerned law statement)

We use DIV element to come out these structural definitions normally, similar such:

<div Id=header></div>

<div Id=content></div>

<div Id=globalnav></div>

<div Id=subnav></div>

<div Id=search></div>

<div Id=shop></div>

<div Id=footer></div>

This is not layout, it is a structure. This is a semantic specification of pair of content piece. Understood your structure when you, go up in DIV with respect to the ID that can add correspondence. Any content can be contained in DIV container piece, OK also nest another DIV. Content piece can contain aleatoric HTML element—Caption, paragraph, picture, form, list is waited a moment.

Tell about above the basis, you had known how structured HTML, you can undertake layout and style were defined now. Each content piece can be put on the page anyplace, reassign this piece color, font, frame, setting and wait a moment to neat attribute.

Use selector is a wonderful thing

The name of Id is control some the method of content piece, go up through giving this content piece to cover DIV adds exclusive Id, you can define the exterior of each page element accurately to behave with CSS selector, include caption, list, picture, link or paragraph is waited a moment. For example you write regulation of a CSS for #header, can be different from the picture regulation in #content completely.

Another example is: You can define different content through different regulation piece the link style in. Similar such: #globalnav A:lInk or #subnav A:lInk or #content A:lInk. You also can be defined differ the type of identical element in content piece is different. For example, define the style of the P in #content and #footer respectively through #content P and #footer P. Tell from the structure, your page waits for composition by picture, link, list, paragraph, these elemental itself can not be to showing in what network equipment (PDA or mobile phone or network TV) influential, they can are by the definition any expressional outward appearance.

The HTML page of a careful structuralization is very simple, each element is used at structural purpose. Think when you retractive a paragraph, do not need to use Blockquote label, want to use P label only, the Margin regulation that imposes a CSS to P can achieve retractive goal. P is structured label, margin is expressional attribute, former belong to HTML, latter belongs to CSS. (This is the structural photograph depart at expression. (This is the structural photograph depart at expression..

The HTML of good structure did not behave the label of attribute almost inside the page. Code is very clean and concise. For example, former code <table Width=80% Cellpadding=3 Border=2 Align=left> , can write <table> in HTML only now, all things that dominate show are written in CSS, in structured HTML, table is form, other what is (be used to for instance layout and fixed position) .

Carry out structuralization personally

What say above is the basiccest structure only, in applying actually, you can adjust content piece according to needing to come. The circumstance of nest of occurrence DIV of constant regular meeting, you can see there is other layer again in Container layer, the structure is similar such:

<div Id=navcontainer>

<div Id=globalnav>

<ul>a List</ul>

</div>

<div Id=subnav>

<ul>another List</ul>

</div>

</div>

The Div element of nest allows you to define more CSS regulation to dominate show, for example: You can give #navcontainer a regulation make list house right, give #globalnav a regulation again make list house left, and the expression that the List that gives #subnav differs another times completely.

Replace traditional method with CSS

The list below will help you replace traditional method with CSS:

HTML attribute and corresponding CSS method

Method of HTML attribute CSS explains

Align=left

Align=right Float: Left;

Float: Right; use CSS can drift any elements: Iv of  of Wen Huan of plan  ⒍ , caption, form, list is waited a moment

Use Float property when you, must define a width to this float element.

Marginwidth=0 Leftmargin=0 Marginheight=0 Topmargin=0 Margin: 0; uses CSS, margin can be installed go up in any elements, it is Body element not just. More important, you can appoint elemental Top respectively, right, the Margin of Bottom and Left is worth.

Vlink=#333399 Alink=#000000 Link=#3333FF A:lInk #3ff;

A:vIsited: #339;

A:hOver: #999;

A:aCtive: #00f;

In HTML, the color of the link is worth a definition as an attribute of Body. The pattern of catenary give a dinner for a visitor from afar of whole page is same. The selector of use CSS, the page is different link style of the part is OK different.

Bgcolor=#FFFFFF Background-color: #fff; is in CSS, any elements can define setting color, not just Body of bureau be confined to and Table element.

Bordercolor=#FFFFFF Border-color: Any #fff; elements can set frame (Boeder) , you can define Top respectively, right, bottom and Left

Border=3

Cellspacing=3 Border-width: 3px; uses CSS, you can define the frame of Table to be unified style, also can define Top respectively, right, the color of frame of Bottom And Left, dimension and style.

You can use Table, these selector of Td Or Th.

If you need to install immensity casing effect, can use CSS definition: Border-collapse: Collapse;

<br Clear=left>

<br Clear=right>

<br Clear=all>

Clear: Left;

Clear: Right;

Clear: Both;

A lot of 2 list or 3 layout use Float attribute to locate. If you defined setting color in float layer or background picture, you can use Clear property.

Cellpadding=3

Vspace=3

Hspace=3 Padding: 3px; uses CSS, any elements are OK set Padding attribute, same, padding can install Top respectively, right, bottom And Left. Padding is transparent.

Align=center Text-align: Center;

Margin-right: Auto; Margin-left: Auto;

Text-align applies to text only.

Elephantine Div, p such piece class enmity can pass Margin-right: Auto; and Margin-left: Auto; comes horizontal be placed in the middle

The skill of a few regrets making a person and working environment

Because the browser is right what CSS supports is not perfect, we must take a few skill occasionally (Hacks) or build a kind of environment (the effect that Workarounds) will come to make method of CSS implementation tradition same. For example piece the skill that class element has accession to need to use horizontal be placed in the middle, the skill of box model Bug is waited a moment. All these skill are in the article of Molly Holzschlag ” Integrated Web Design: Strategies For Long-Term CSS Hack Management ” in have define.

Another the “Position Is Everything” that the resource site about CSS skill is Big John and Holly Bergevin.

Understand float act

Of Eric Meyer ” Containing Floats ” the help you master how to use Float attribute position. Float element needs to keep clear of occasionally (Clear) , read ” How To Clear Floats Without Structural Markup ” very will helpful.