Are you learning CSS layout? Are you still not fully aware of the pure CSS layout? There are usually two situations that hinder your learning:
The first possibility is that you have not yet understood how CSS handles pages. Before you consider the overall performance of your page, you should consider the semantics and structure of the content before adding CSS to the semantics and structure. This article will show you how to structure HTML.
Another reason is that you have no idea what CSS statements to convert to, such as cellpadding, Hspace, align= "left", and so on, that are very familiar with the performance layer properties. When you solve the first problem and know how to structure your HTML, I'll give you a list of what CSS to use instead of the original performance attribute.
Structured HTML
When we were just learning how to make a Web page, we always thought about how to design, consider the pictures, fonts, colors, and layout plans. Then we use Photoshop or fireworks to draw out, cut into small pictures. Finally, all design restores are performed on the page by editing the HTML.
If you want your HTML page to have a CSS layout (css-friendly), you need to look back and start thinking about the semantics and structure of your page's content, regardless of the "look".
The appearance is not the most important. A well-structured HTML page can be displayed in any appearance, and CSS Zen Garden is a typical example. CSS Zen Garden helps us finally realize the power of CSS.
HTML is not just read on a computer screen. Your Photoshop-designed footage may not appear on PDAs, mobile phones, and screen readers. But a well-structured HTML page can be defined by different CSS, displayed anywhere, on any network device.
Start thinking
The first thing to learn is "structure", some writers also call it "semantics". The term means that you need to analyze your content blocks, and the purpose of each content service, and then build the appropriate HTML structure based on the purpose of the content.
If you sit down and carefully analyze and plan your page structure, you may get a few pieces like this:
Flag and Site name
Main Page Content
Site navigation (Main menu)
Sub-Menu
Search box
Ribbon (e.g. shopping cart, cashier)
Footer (copyright and related legal notices)
We typically use DIV elements to define these structures, like this:
<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 a layout, it is a structure. This is a semantic description of the content block. When you understand your structure, you can add the corresponding ID to the div. A div container can contain any block of content, or it can nest another div. Content blocks can contain arbitrary HTML elements---headings, paragraphs, pictures, tables, lists, and so on.
According to the above, you already know how to structure HTML, and now you can define the layout and style. Each content block can be placed anywhere on the page, specifying the block's color, font, border, background, alignment properties, and so on.
Using selectors is a wonderful thing.
The name of the ID is the means to control a block of content, by giving the content block a div and a unique ID, you can use the CSS selector to precisely define the appearance of each page element, including the title, list, picture, link, or paragraph, and so on. For example, if you write a CSS rule for #header, it can be completely different from the picture rules in #content.
Another example is that you can define the link styles in different content blocks by different rules. Similar to this: #globalnav a:link or #subnav a:link or #content a:link. You can also define different styles for the same elements in various content blocks. For example, the styles of p in #content and #footer are defined by #content p and #footer p respectively. Structurally, your pages are made up of pictures, links, lists, paragraphs, and so on, and these elements themselves do not have an impact on what network devices are displayed (PDAs or mobile phones or internet TVs), and they can be defined as any appearance of the presentation.
A carefully structured HTML page is very simple, and each element is used for structural purposes. When you want to indent a paragraph, you do not need to use the blockquote tag, as long as you use the P tag, and the P plus a CSS margin rules can be indented for the purpose. P is a structured label, margin is a performance attribute, the former belongs to HTML, the latter belongs to CSS. (This is the phase separation of the structure in the expression.)
A well-structured HTML page has almost no label that behaves as a property. The code is very clean and concise. For example, the original code <table width= "80%" cellpadding= "3" border= "2" align= "left" and now can only be written in HTML <table>, all the control performance of Everything is written in the CSS, In structured HTML, table is the table, not anything else (such as being used for layout and positioning).
Practice the structure of your own
The above is just the most basic structure, in practical applications, you can adjust the content block as needed. There are often div nesting cases, and you'll see that there are other layers in the "container" layer, similar in structure:
<div id= "Navcontainer" >
<div id= "Globalnav" >
<ul> a list </ul>
</div>
<div id= "Subnav" >
<ul> another list </ul>
</div>
</div>
Nested div elements allow you to define more CSS rules to control performance, for example: You can give #navcontainer a rule to make the list right, and then give #globalnav a rule to leave the list to the left, while giving #subnav's list another completely different expression.
Replace traditional methods with CSS
The following list will help you replace the traditional method with CSS:
HTML attributes and the corresponding CSS methods
HTML properties
CSS Method description
Align= "left"
Align= "Right" float:left;
Float:right; Use CSS to float any element: picture, paragraph, Div, title, table, list, etc.
When you use the Float property, you must define a width for this floating element.
Marginwidth= "0" leftmargin= "0" marginheight= "0" topmargin= "0" margin:0; With CSS, margin can be set on any element, not just the BODY element. More importantly, you can specify the margin values for the top, right, bottom, and left of the element, respectively.
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 defined as a property value for the body. The link style is the same throughout the page. Using the CSS selector, the different parts of the page can be styled differently.
Bgcolor= "#FFFFFF" Background-color: #fff; In CSS, any element can define the background color, not only the body and table elements.
Bordercolor= "#FFFFFF" Border-color: #fff; Any element can be set with a border (Boeder), you can define the top, right, bottom and left separately.
Border= "3" cellspacing= "3" BORDER-WIDTH:3PX; With CSS, you can define a table's border as a uniform style, or you can define the color, size, and style of the top, right, bottom and left borders, respectively.
You can use table, TD or th these selectors.
If you need to set a borderless effect, you can use the CSS definition: border-collapse:collapse;
<BR clear= "left" >
<BR clear= "right" >
<BR clear= "All" >
Clear:left;
Clear:right;
Clear:both;
Many 2-column or 3-column layouts are positioned using the float property. If you define a background color or background image in a floating layer, you can use the clear property.
Cellpadding= "3"
Vspace= "3"
Hspace= "3" PADDING:3PX; With CSS, any element can be set padding property, similarly, padding can set the top, right, bottom and left. The padding is transparent.
align= "center" text-align:center;
Margin-right:auto; Margin-left:auto;
Text-align only applies to text.
A block level like div,p can be passed through Margin-right:auto; and Margin-left:auto; to center horizontally
Some unfortunate skills and working environment
Because of the imperfections of the browser's support for CSS, we sometimes have to take some tricks (hacks) or create an environment (workarounds) to make CSS do the same with traditional methods. For example, block-level elements sometimes require the use of horizontal centering techniques, box-model bug tricks, and so on. All of these tips are detailed in Molly Holzschlag's article Integrated Web design:strategies for long-term CSS Hack Management.
