DIV+CSS Common Skills

1, the UL label in Mozilla Default is to have padding value, and in IE only margin have value.

2, the same class selector can appear repeatedly in one document, but only once for the ID selector, and for a label using both class and ID for CSS definition, and if the definition is duplicated, the ID selector is valid because the ID has a higher weight than class.

3, a compatibility adjustment (ie and Mozilla) stupid way: Beginners may encounter such a situation: the same label properties in IE set to a display is normal, and in Mozilla must be set to B to normal display, or two upside down. Temporary Workaround: Selector {property name: B!important; property name: A}

4, if a group of tags to be nested between the need for some spacing, then leave the tag inside the margin attribute bar, and do not define the outside of the label padding

5, Li tags in front of the icon recommended the use of background-image, rather than list-style-image.

6, IE can not tell the difference between inheritance and parent-child relationship, all are inherited relations.

7, when giving your label crazy plus selector, don't forget to add the annotation to the selector in the CSS. When you change your CSS later on, you'll know why you're doing it.

8, if you give a label set a dark background picture and bright tone of the text effect. It is recommended that you set a darker background color for your label this time.

9, the definition of links in the four states to pay attention to the order: Link visited Hover Active

10, Content-independent pictures please use background

11, the definition of color can be abbreviated #8899ff= #89F

12, table in some respects than other labels performance is much better. Use it where you want the column to be aligned.

13, <script> No language this attribute, should be written like this: <script type= "Text/javascript" >

14, the title is the title, the title of the text is the title of the text. Sometimes the title does not necessarily need to display text, so:

15, the perfect Tan Shansu outer frame line form (in IE5, IE6, IE7 and FF1.0.4 above can pass the test) table{border-collapse:collapse; Td{border: #000 solid 1px;}

16, margin negative can be in the label using absolute positioning when the role of relative positioning, in the middle of the page display, use the absolute positioning of the layer is not suitable to use left:xxpx this attribute. It's a good way to put this layer next to a label that you want to position relative to, and then use the negative value of margin.

17, the absolute positioning of the use of margin value positioning can be achieved relative to the location of their own, this and top,left and other attributes relative to the window edge positioning is different. The advantage of absolute positioning is that it allows other elements to ignore its existence.

18, if the text is too long, it will be too long part of the ellipsis display: Ie5,ff invalid, but can be hidden, IE6 effective <div style= "width:120px;height:50px;border:1px solid Blue;o Verflow:hidden;text-overflow:ellipsis "> <NOBR> is like a line of text, very long, a row in the table does not appear .</nobr>

19, in IE may be due to the annotation of the text to repeat the problem can be changed to the note: <!? [If! Ie]>put your commentary in here...<! [endif]?>

20, how to use CSS to invoke external font syntax: @font-face{font-family:name;src:url (URL); srules} value: Name: Font name. The value URL (URL) of any possible font-family property: Specifies the OpenType font file using an absolute or relative URL address srules: style sheet definition

21. How do I align text in a text box in a form vertically? If the row height and height of the group in FF is not effective, the way is to define the upper and lower filler can achieve the effect of thinking.

22, the definition of a label to pay attention to the small problem: when we define a{color:red;} , it represents the four states of a style, if you want to define a mouse on the state to define A:hover, the other three states are defined in a style. When defining only one a:link, be sure to remember to define the other three states!

23, not all styles should be abbreviated: when the style sheet defined before the p{padding:1px 2px 3px 4px}, in the subsequent project has added a style filler 5px, under the filler 6px. We do not necessarily write p.style1{padding:5px 6px 3px 4px}. Can be written as p.style1{padding-top:5px;padding-right:6px, you may feel like it's not as good as it used to be, but don't you think that the way you write repeats the style, In addition, you can not find the original bottom filler and the value of the left filler is how much! If the previous style p changes, the style of the p.style1 you define will change.

24, the larger the Web site, the more CSS style, before you start, please do a full preparation and planning, including naming rules. Page Block division, internal style classification and so on.

25, a few commonly used CSS styles:
-1 text in the two ends of the alignment: Text-align:justify;text-justify:inter-ideograph;

-2 fixed-width Chinese character truncation: overflow:hidden;text-overflow:ellipsis;white-space:nowrap (although only the truncation of text on one line can be processed, multiple lines cannot be processed.) (IE5 above) FF cannot, it is only hidden.

-3 Fixed width Chinese character (word) folding line: table-layout:fixed; Word-break:break-all (IE5 above) FF not.

-4) <acronym title= "Enter the text to be prompted" style= "CURSOR:HELP;" > Text </acronym> put the mouse in front of the text to see the effect. This effect in many foreign sites can be seen, while the domestic few and few.

-5 The picture is translucent:. halfalpha {background-color: #000000; Filter:alpha (OPACITY=50)} in IE6 and IE5 test pass, FF failed, this is because this style is IE private thing;

-6 Flash Transparency: Select SWF, open the original Code window, before </object> input <param name= "wmode" value= "Transparent" > above is for IE code. For Firefox give <embed> tags also add similar parameters wmode= "Transparent"

-7 in doing web pages often used to put the mouse on the picture will appear in the image of the effect of light, you can replace the skills of the picture, you can also use the following filter:. Pictures img {filter:alpha (opacity=45); pictures a:hover img { Filter:alpha (opacity=90); }