25 div+css programming tips and tricks

1. The ul tag has a padding value by default in Mozilla, but only a margin value in IE.

2. The same class selector can appear repeatedly in a document, but the id selector can only appear once. When using both class and id to define a tag in CSS, if the definition is repeated, the definition made by the id selector is valid because the weight of ID is greater than that of CLASS.

3. A stupid way to adjust compatibility (IE and Mozilla): Beginners may encounter a situation like this: the same tag attribute is displayed normally when set to A in IE, but must be set to B in Mozilla to display normally, or vice versa. Temporary solution: selector {attribute name: B !important; attribute name: A}

4. If a group of nested tags need some spacing, leave it to the margin attribute of the inner tag instead of defining the padding of the outer tag.

5. It is recommended to use background-image instead of list-style-image for the icon in front of the li tag.

6. IE cannot distinguish the difference between inheritance relationship and parent-child relationship, all are inheritance relationships.

7. When adding selectors to your tags like crazy, don't forget to comment the selectors in the CSS. You will understand why you do this when you modify your CSS in the future.

8. If you set a dark background image and light text effect for a label. It is recommended to set a dark background color for your label at this time.

9. Pay attention to the order of defining the four states of the link: Link Visited Hover Active

10. For images not related to the content, please use background

11. Define the color can be abbreviated #8899FF=#89F

12. Table performs much better than other tags in some aspects. Please use it wherever you need column alignment.

13. <script> does not have the language attribute, it should be written like this: <script type="text/javascript">

14. A title is a title, and the text of a title is the text of a title. Sometimes the title does not necessarily need to display text, so: <h1>Title content</h1> is changed to <h1><span>Title content</span></h1>

15. Perfect single-pixel border table (can be tested in IE5, IE6, IE7 and FF1.0.4 and above) table{border-collapse:collapse;} td{border:#000 solid 1px;}

16. Negative margin values ​​can play a role in relative positioning when the tag uses absolute positioning. When the page is centered, the layer using absolute positioning is not suitable for using the left:XXpx attribute. A good approach is to place this layer next to a label that is to be relatively positioned, and then use negative margin values.

17. When positioning absolutely, using margin values ​​can achieve positioning relative to the element's own position. This is different from positioning with attributes such as top and left relative to the edge of the window. The advantage of absolute positioning is that it allows other elements to ignore its existence.

18. If the text is too long, the long part will be displayed as ellipsis: Invalid for IE5 and FF, but can be hidden. Valid for IE6 <DIV STYLE="width:120px;height:50px;border:1px solid blue;overflow:hidden;text-overflow:ellipsis"> <NOBR>For example, if there is a line of text that is too long to fit in one line of the table.</NOBR>

19. In IE, if there is a text duplication problem caused by comments, you can change the comment to: <!?[if !IE]>Put your commentary in here…<![endif]?>

20. How to use CSS to call external fonts. Syntax: @font-face{font-family:name;src:url(url);sRules} Value: name: font name. Any possible value of the font-family property url(url): Use an absolute or relative URL address to specify the OpenType font file sRules: Style sheet definition

21. How to vertically center the text in a text box in a form? If using the line-height and height group has no effect in FF, the solution is to define the upper and lower padding to achieve the desired effect.

22. Small issues to note when defining the A tag: When we define a{color:red;}, it represents the styles of the four states of A. If you want to define a state when the mouse is placed on it, just define a:hover. The other three states are the styles defined in A. When only one a:link is defined, be sure to define the other three states!

23. Not all styles need to be abbreviated: When the style sheet defines p{padding:1px 2px 3px 4px}, a style with 5px padding on the top and 6px padding on the bottom is added in the subsequent project. We don't have to write p.style1{padding:5px 6px 3px 4px}. It can be written as p.style1{padding-top:5px;padding-right:6px;}. You may feel that this is not as good as the original one, but have you ever thought that your writing method repeats the style definition? In addition, you don’t have to find out the original values ​​of the bottom and left padding! If the previous style P changes in the future, the style of p.style1 you defined must also change.

24. The larger the website, the more CSS styles there are. Before you start, please make adequate preparations and plans, including naming rules. Page block division, internal style classification, etc.

25. Several commonly used CSS styles:
-1) Align Chinese characters at both ends: text-align:justify; text-justify:inter-ideograph;

-2) Fixed-width Chinese character truncation: overflow:hidden;text-overflow:ellipsis;white-space:nowrap; (However, it can only handle the truncation of text on one line, not multiple lines.) (IE5 and above) FF cannot, it only hides.

-3) Fixed-width Chinese characters (words) line break: table-layout:fixed; word-break:break-all; (IE5 and above) FF cannot.

-4) <acronym title=”Enter the text to be prompted” style=”cursor:help;”>text</acronym>Put the mouse on the previous text to see the effect. This effect can be seen on many foreign websites, but it is rare in China.

-5) Set the image to be semi-transparent: .halfalpha { background-color:#000000;filter:Alpha(Opacity=50)} The test passed in IE6 and IE5, but failed in FF. This is because this style is private to IE.

-6) FLASH transparency: Select swf, open the source code window, and enter <param name=”wmode” value=”transparent”> before </object>. The above is the code for IE. For FIREFOX, add similar parameter wmode="transparent" to the <embed> tag

-7) When making web pages, you often use the effect of brightening the image by placing the mouse over it. You can use the image replacement technique or the following filter: .pictures img { filter: alpha(opacity=45); } .pictures a:hover img { filter: alpha(opacity=90); }