Summary: Make Web pages to write CSS reference content

css| Reference | Web page

1, have the question, first verifies

When debugging, verify the code first. Incorrectly formatted XHTML/CSS can cause many errors.

Write and test CSS code in your most commonly used browsers, and try to refine your code as much as possible. Then try to be compatible with other browsers. This way your code will be compliant from the start, and you don't have to worry about supporting other browsers. (Standards-compliant browsers are Mozilla/firefox, Safari, Opera)

2. Ensure that the effect you expect is real

The proprietary CSS extensions for many specific browsers do not exist in the formal standard. For example, filter, scroll bar style, in addition to IE, in other browsers have no effect. If the validator tells you that the code is not defined, it is likely that you have used a private style so that it is difficult to achieve consistent results in different browsers.

3, if there is a float, it is necessary to timely use clear

If you find a problem with the floating object, consider clear!

4, margin of the merger

If margin is used, there is a problem with the margin merge speech. Avoid applying padding/border and fixed widths to the same element at the same time. Specifies padding for the parent element when the child element is fixed.

5, to avoid IE under the unspecified style content flashing.

If you use only @import to enter an external style sheet, you will find that IE has flashing problems sooner or later. Unformatted HTML text appears briefly before applying CSS.

6, poor min-width.

IE does not support it, but it treats the width as min-width.

7. If you use anchor points, be especially careful when applying hyperlink styles.

If you use traditional anchor points (<a name= "anchor" >) in your code, you will notice that hover and: active pseudo classes also work on it. To avoid this situation, you can use the ID

8, "Love/hate" (Love/Hate) Link rules

To specify the hyperlink pseudo class in the following order: link, visited, Hover, acitve. Any other order is not appropriate. If used: Focus, the order should be LVHFA

9, please remember the "clockwise" border.

The short order of the Border (border), margin (margin), and filler (padding) is: Clockwise from top, right, Bottom, left. For example, the margin:0 1px 3px 5px indicates that the top margin is zero, the right margin is 1px, and so on.

10, not 0 value to specify the unit.

When you specify a font, margin, or size in CSS, you must indicate the unit you are using. Some browsers Buwei the processing method for unspecified units. Zero is 0, whether it is PX or em or other units, it does not require units. For example: padding:0 2px 0 1em;

11, test the different font size.

Advanced browsers like Mozilla and Opera allow the font to be scaled, regardless of the unit you are using. The default font size for some users is certainly different from yours and do your best to meet them.
With embedded test, change to input when publishing.

12, embed the style sheet in your HTML source code, in the test can eliminate many cache caused errors, especially under some Mac browser. However, before publishing, be sure to remember to move the style sheet to an external file and introduce it @import or <link>.

13, plus a clear border is conducive to layout debugging.
Global rules like div {border:solid 1px #f00;} can temporarily detect layout problems for you. Adding a border to a particular element can help you find the jagged or blank issues that are difficult to detect.

14. Organize your CSS file well

Properly block annotation css, make similar CSS selectors into a group, develop consistent naming conventions and blank formats (for cross-platform considerations, suggest whitespace characters instead of tabs) and appropriate order.

15. Name the class and ID by function (not appearance)

If you create a. Smallblue class, and then plan to change the text to a red color, the class name no longer has any meaning. Instead, you can use a more descriptive name like. Copyright and. Pullquote.

16. Combination Selector

Keeping CSS short is important for reducing download time. Try to reduce redundancy by grouping selectors, using inheritance (inheritance), and using shorthand (shorthand).

17, the use of picture replacement technology to consider affinity (sfir, not commonly used, the technology to replace text with pictures)
It has been found that traditional fir in screen readers, as well as the turn off picture display [of the browser] will be problematic. There are other solutions to this, according to the specific circumstances, prudent use.