DIV+css structure
Are you learning CSS layout? Can't you fully master the pure CSS layout? There are usually two situations that hinder your study:
The first possibility is that you have not yet understood the principle of CSS processing pages. Before you consider the overall performance of your page, you should first consider the semantics and structure of the content, and then add CSS to the semantics and structure. This article will tell you how to structure HTML.
Another reason is that you are helpless about those very familiar presentation layer attributes (such as cellpadding, hspace, align=left, etc.) and do not know what CSS statement to convert to. When you solve the first problem and know how to structure your HTML, I will give a list of details on what CSS to replace the original performance attribute.
Structured HTML
When we first learned web page production, we always first consider how to design and consider the pictures, fonts, colors, and layout plans. Then we use Photoshop or Fireworks to draw and cut into small pictures. Finally, all designs are restored on the page by editing HTML.
If you want your HTML page to be layouted in CSS (which is CSS-friendly), you need to start over without considering the appearance, and first think about the semantics and structure of your page content.
Appearance is not the most important thing. A well-structured HTML page can be expressed in any appearance, and CSS Zen Garden is a classic example. CSS Zen Garden helps us finally recognize the power of CSS.
HTML is not just read on computer screens. The pictures you carefully designed with photoshop may not be displayed on PDAs, mobile phones, and screen readers. But a well-structured HTML page can be displayed anywhere, on any network device through different definitions of CSS.
Start thinking
First of all, we need to learn what structure is, which some writers also call semantics. The term means that you need to analyze your content blocks and the purpose of each content service, and then build a corresponding HTML structure based on these content purposes.
If you sit down and carefully analyze and plan your page structure, you may get a few pieces like this:
Logo and site name
Main page content
Site Navigation (Main Menu)
Submenu
Search box
Functional area (such as shopping cart, cashier)
Footer (Copyright and relevant legal statements)
We usually 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 content blocks. When you understand your structure, you can add the corresponding ID to the DIV. The DIV container can contain any content block or nest another DIV. Content blocks can contain any HTML elements - title, paragraph, picture, table, list, etc.
According to what was described above, you already know how to structure HTML, and now you can do layout and style definitions. Each content block can be placed anywhere on the page, and then the color, font, border, background, alignment attributes, etc. of the block are specified.
Using a selector is a wonderful thing
The name of an id is a means to control a certain content block. By putting a DIV on this content block and adding a unique id, you can use the CSS selector to accurately define the appearance of each page element, including title, list, picture, link or paragraph, etc. For example, if you write a CSS rule for #header, it can be completely different from the image rules in #content.
Another example is: you can define link styles in different content blocks through different rules. Similar to this: #globalnav a:link or #subnava:link or #content a:link. You can also define the same elements in different content blocks with different styles. For example, the styles of p in #content and #footer are defined by #content p and #footerp, respectively. Structurally speaking, your page is composed of pictures, links, lists, paragraphs, etc. These elements themselves have no effect on what network device (PDA or mobile phone or network TV) are displayed. They can be defined as any appearance.
A carefully structured HTML page is very simple, and each element is used for structural purposes. When you want to indent a paragraph, you don’t need to use the blockquote tag. Just use the p tag and add a CSS margin rule to p to achieve the indentation purpose. p is a structured tag, margin is a representation attribute, the former belongs to HTML, and the latter belongs to CSS. (This is the phase separation of structure and expression.)
There are almost no tags that represent attributes in a well-structured HTML page. The code is very clean and concise. For example, the original code <tablewidth=80% cellpadding=3 border=2align=left> can now only be written in HTML, and all things that control representation are written into CSS. In structured HTML, table is a table, not something else (such as being used for layout and positioning).
Practice structure yourself
What is mentioned above is just the most basic structure. In actual application, you can adjust the content blocks as needed. There are often DIV nesting situations, and you will see that there are other layers in the container layer, with a structure similar to this:
＜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, then give #globalnav a rule to make the list left, and give #subnav a list another completely different performance.
Replace traditional methods with CSS
The following list will help you replace traditional methods with CSS:
HTML attributes and corresponding CSS methods
HTML attributes
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 attribute, you must define a width for the floating element.
marginwidth=0leftmargin=0 marginheight=0 topmargin=0 margin: 0; Using CSS, margin can be set on any element, not just a body element, but more importantly, you can specify the margin values of the top, right, bottom and left of the element respectively.
vlink=#333399 link=#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 an attribute value of the body. The link styles of the entire page are the same. Using CSS selector, the link styles of different parts of the page can be different.
bgcolor=#FFFFF background-color: #ffff; In CSS, any element can define the background color, not just body and table elements.
bordercolor=#FFFFFF border-color: #ffff; Any element can set a border (boeder), you can define top, right, bottom and left respectively
border=3cellspacing=3 border-width: 3px; With CSS, you can define the border of the table as a unified style, or you can define the color, size and style of top, right, bottom and left borders respectively.
You can use table, td or th selectors.
If you need to set a borderless effect, you can use 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 use the float attribute to locate. If you define the background color or background image in the floating layer, you can use the clear attribute.
cellpadding=3
vspace=3
hspace=3 padding: 3px; With CSS, any element can set padding attributes. Similarly, padding can set top, right, bottom and left respectively. padding is transparent.
align=center text-align: center;
margin-right: auto; margin-left: auto;
Text-align only works with text.
Block levels like div and p can be centered horizontally through margin-right: auto; and margin-left: auto;
Some regrettable tips and work environments
Due to the incomplete support of CSS by browsers, we sometimes have to take some hacks or create a workaround to enable CSS to achieve the same effect as traditional methods. For example, block-level elements sometimes require the use of horizontal centering techniques, box model bug techniques, etc. All of these tips are detailed in MollyHolzschlag's article "Integrated Web Design: Strategies for Long-Term CSS HackManagement".
Another resource site for CSS tips is Big John and Holly Bergevin's Position is Everything.
Understand floating behavior
Eric Meyer's Containing Floats will help you master how to use float attribute layouts. float elements sometimes need to be cleared, and reading How To Clear Floats Without Structural Markup will be very helpful.