You are learning CSS layout? Is not fully grasp the pure CSS layout? There are usually two circumstances prevent you from learning: The first possibility is that you do not understand the principles of CSS processing page. You consider the effect of the overall performance of your page before, you should first consider the semantic content and structure, and then for the semantics, structure to add CSS. This article will show you how the HTML should be structured. Another reason is that you are very familiar with the performance of those layer properties (eg: cellpadding,, hspace, align = “left”, etc.) do nothing, do not know what the conversion to the corresponding CSS statement. When you solve the first problem, to know how the structure of your HTML, I’ll give a list detailing the performance of the original properties of what CSS instead.
Structured HTML We are just learning web production, always first consider how to design, consider the pictures, fonts, colors, and layout programs. Then we painted with Photoshop or Fireworks, cut into small figure. Finally, all design by editing the HTML to restore the performance of the page. If you want your HTML pages using CSS layout (a CSS-friendly), you need to go back again, to not consider the “look”, we must first think about your page content and structure of the semantics. Appearance is not the most important. A well-structured HTML pages can be shown in any appearance, CSS Zen Garden is a typical example. CSS Zen Garden to help us finally realize the power of CSS. HTML not just on the computer screen reading. You use photoshop well-designed screen may not display in the PDA, mobile phones and screen readers on. But a well-structured HTML pages can be different definitions of CSS to display in any place, any network device.
Start thinking First, learn what is “structure”, some writers have referred to as “semantic.” This term means that you need to analyze the contents of your block, and the purpose of each content services, and then set up according to the purpose of the content structure of the corresponding HTML. If you sit down to 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 areas (such as shopping cart, checkout) Footer (copyright and related legal statement)
We usually use DIV elements to the definition of these structures out, 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 the layout, is the structure. This is a semantic description of the content block. When you understand your structure to the corresponding ID can be added on the DIV. DIV container can contain any content block, you can nest another DIV. Content block can contain any HTML element — headings, paragraphs, pictures, tables, lists and so on. According to the above described, you already know how the structure of the HTML, now you can define the layout and style. Each content block can be placed anywhere on the page, and then specify the block of color, fonts, borders, backgrounds, and align attributes and so on. Using the selector is a wonderful thing id is the name of the control means of a content block, put the block through to the content DIV and add a unique id, you can use CSS selectors to accurately define each element of the appearance of a page, including title, list , pictures, links or paragraphs and so on. For example, # header you to write a CSS rule to be completely different from the picture in the # content rule. Another example is: you can define different rules for different aspects of the link block style. Like this: # globalnav a: link, or # subnav a: link, or # content a: link. You can also define the same element with different content blocks in different styles. For example, by # content p and # footer p are defined in # content and # footer p style. Structurally, your page is from the pictures, links, lists, paragraphs, etc., these elements does not in itself will show what network device (PDA or cell phone or Internet TV) influence, which can be defined as the appearance of any performance. A carefully structured HTML pages is very simple, each element is used for structural purposes. When you want to indent a paragraph, do not use blockquote tags, simply use the p tags, and CSS-p plus a margin indentation rules objective can be achieved. p is the structured tags, margin is a performance attribute, the former is HTML, which is CSS. (This is the structure of the phase separation in the performance.) Well-structured HTML page label virtually no performance attributes. Code is clean and simple. For example, the original code <table width=”80%” cellpadding=”3″ border=”2″ align=”left”>, now you can only write in HTML <table>, all things are written to control the performance of the CSS to go, in the structure of the HTML in the, table is the table, rather than anything else (such as layout and positioning is used).
Structured hands-about The above said, only the most basic structure, practical applications, you need to adjust the content according to the block. Nested DIV often the case there, you will see the “container” layer there are other layers, the structure like this: <div id=”navcontainer”> <div id=”globalnav”> <ul> a list </ ul> </ Div> <div id=”subnav”> <ul> another list </ ul> </ Div> </ Div> Nested div element allows you to define CSS rules to control more of the performance, for example: you can give # navcontainer a list of rules for living right, give # globalnav a list of home rule to the left, while the list to # subnav a completely different performance.
Replace the traditional method of using CSS The following list will help you use CSS to replace the traditional methods: HTML CSS properties and methods corresponding to HTML attributes
CSS Method Description align = “left” align = “right” float: left; float: right; use CSS to float any element: pictures, paragraphs, div, headings, tables, lists, etc.
When you use the float attribute to the floating element must define a width. marginwidth = “0″ leftmargin = “0″ marginheight = “0″ topmargin = “0″ margin: 0; use of CSS, margin can be set on any element, not just the body elements. More importantly, you can specify the elements the top, right, bottom and left of the margin value. vlink = “# 333399″ alink = “# 000000″ link = “# 3333FF” a: link # 3ff; a: visited: # 339; a: hover: # 999; a: active: # 00f; In HTML, the link color as the body of a property value defined. Link to the page are the same style. Use CSS selectors, the page links to different parts of the style can be different. bgcolor = “# FFFFFF” background-color: # fff; in CSS, any element can define a background color, is not limited to body and table elements. bordercolor = “# FFFFFF” border-color: # fff; any element can set borders (boeder), you can define top, right, bottom and left border = “3″ cellspacing = “3″ border-width: 3px; with CSS, you can define the border of a unified style table can also be defined, respectively, top, right, bottom and left border color, size, and style. You can use the table, td or th the selector. If you need to set no border effects, can be defined using the CSS: border-collapse: collapse; <br clear=”left”> <br clear=”right”> <br clear=”all”> clear: left; clear: right; clear: both; Many 2 or 3 column layouts use float property to locate. If you defined in the floating layer of background color or background image, you can use the clear property. cellpadding = “3″ vspace = “3″ hspace = “3″ padding: 3px; with CSS, set the padding of any element properties can be the same, padding can set top, right, bottom and left. padding is transparent. align = “center” text-align: center; margin-right: auto; margin-left: auto; Text-align only applies to text. As div, p This block can be margin-right: auto; and margin-left: auto; to the level of center
Unfortunately, some of the skills and work environment Because the browser support for CSS is imperfect, we sometimes have to take some skills (hacks) or create an environment (Workarounds) to allow CSS to achieve the same effect as the traditional method. For example, block-level elements sometimes need to use the middle level of skills, techniques, etc. box model bug. All these skills are in Molly Holzschlag’s article “Integrated Web Design: Strategies for Long-Term CSS Hack Management” is described in detail. Another resource site on the CSS skills are Big John and Holly Bergevin’s “Position is Everything”.
Floating behavior to understand Eric Meyer’s “Containing Floats” will help you learn how to use the float property layout. float element sometimes needs to be cleared (clear), read “How To Clear Floats Without Structural Markup” will be very helpful.
More Help Existing “CSS Discussion” list is a good resource for gathering information on a WiKiA discussion groups, including the summary of CSS layout (css-discuss.incutio.com /? Page = CssLayouts), CSS skills summary (css- discuss.incutio.com /? page = CssHack) and more.
Related posts:
- The eighth day : Getting Started of CSS layout CSS layout with the traditional form (table) the biggest difference...
- The eleventh day : the menu without table Build up the initial layout, I began to fill the...
- The Seventh day : Getting Started with CSS XHTML coding standards in understanding, we will be CSS layout. First...
- To achieve More div arranged Center To achieve More div arranged Center <?xml version=”1.0″ encoding=”iso-8859-1″?> <!DOCTYPE...
- Commonly used methods and techniques CSS layout of the commonly used method float: none |...
Related posts brought to you by Yet Another Related Posts Plugin.
