The structure of div+css
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 for 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 the original performance attributes in detail which css is used instead.
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 and displayed on the page by editing html.
If you want your html page to be layouted with css (which is css-friendly), you need to start over, not considering the appearance first, 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, 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 establish 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. The content block can contain any html elements - title, paragraph, picture, table, list, etc.
According to what was told 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 write <table> in the html, and all the things that control performance are written into the css. In the structured html, table is a table, not something else (such as it is 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 attribute and corresponding css method
html attribute
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; Use css, margin can be set on any element, not just a body element, but more importantly, you can specify the margin values of 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 the css selector, the link styles of different parts of the page can be different.
bgcolor=#ffffff background-color: #fff; In css, any element can define the background color, not just body and table elements.
bordercolor=#ffffff border-color: #fff; Any element can set borders (boeder). You can define top, right, bottom and left respectively.
border=3cellspacing=3 border-width: 3px; Using 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 applies to 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 an environment (workarounds) 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 tricks 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 layout. The float element sometimes needs to be cleared, and reading "how to clear floats without structural markup" will be very helpful.