CSS to make the front page layout better practical tips

There are a myriad of techniques for CSS front-end page layouts. Here will be suitable for the novice CSS front-end page layout tips summed up, perhaps to you more practical reference value:
1, the UL label in Mozilla default is padding value, and in IE only margin has value.
2, the same class selector can be repeated in a document, and the ID selector may only appear once, a tag with the class and ID for the CSS definition, if the definition is duplicated, the ID selector is defined as valid because the ID value is larger than class.

3, a compatibility adjustment (ie and Mozilla) Stupid method:
Beginners may encounter such a situation: the same Tag property in IE is set to a display is normal, and in Mozilla must be set to B in order to display normally, or two upside down.
Interim workaround:

Selector {property name: B!important; property name: A}

4, if a group of tags to be nested between the need for some spacing, it is left in the label inside the margin property bar, and not to define the outside of the label padding
5. The icon in front of the Li Tag recommends using Background-image instead of list-style-image.
6, ie not clear the inheritance relationship and the difference between the parent-child relationship, all are the inheritance relationship.
7. When adding a selector to your tag, don't forget to add a comment to the selector in CSS.

When you change your CSS later, you'll know why.
8. If you give a label a dark-toned background image and a bright-toned text effect.

It is recommended that you set a dark-toned background color for your label at this time.
9, the definition of the four states of the link to note the order:

Link visited Hover Active

10. For images unrelated to the content, please use background
11, the definition of color can be abbreviated #8899ff= #89F
12, table in some aspects than other labels performance is much better. Please use it where you want the column to be aligned.
13, <script> no language this attribute

It 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 outside the Frame line form (in IE5, IE6, IE7 and FF1.0.4 can pass the test)

Table{border-collapse:collapse;} Td{border: #000 solid 1px;}

16, margin negative value can be used in the absolute positioning of the label when the role of relative positioning

When the page is centered, using an absolutely positioned layer is not appropriate for the Left:xxpx property. It's a good practice to put this layer next to a label that you want to position relative, 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 its own, this and top,left and other properties relative to the edge of the window 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, then the too long part becomes an ellipsis display: Ie5,ff invalid, but can be hidden, IE6 effective

<p style= "width:120px;height:50px;border:1px solid blue;overflow:hidden;text-overflow:ellipsis" ><NOBR > For example, there is a line of text, very long, a row in the table does not show .</nobr>

19, in IE may be due to the text of the comments to repeat the problem can be changed to the note:

<!–[if! Ie]>put your commentary in here...<! [endif]–>

20. How to call external fonts with CSS
Grammar:

@font-face{font-family:name;src:url (URL); Srules}

Value:
Name: Font names. The value of any possible font-family property
URL (URL): Specify an OpenType font file with an absolute or relative URL address
Srules: Style sheet definition
21. How do I get the text in a form to be centered vertically?
If the group with row height and height is ineffective in FF, the idea is to define the upper and lower padding to achieve the effect you think.
22, the definition of a label to pay attention to the small problem:
When we define a{color:red;} , it represents the style of the four states of a, if you want to define a mouse position at this time as long as you define A:hover, the other three states are the styles defined in a.
When you define only one a:link, be sure to define the other three states!
23. Not all styles should be abbreviated:
When the style sheet is defined before the p{padding:1px 2px 3px 4px}, a pattern is added in the subsequent works of the filler 5px, the lower filler 6px. We don't have to write p.style1{padding:5px 6px 3px 4px}. Can be written as p.style1{padding-top:5px;padding-right:6px;}, you may feel that this is not as good as the original, but you do not think that the way you write a repeating definition of style, In addition you can not have to find the original lower filler and the value of the left padding is how much! If the previous style p is changed, the style of the p.style1 you define will also change.
24, the larger the website, the more CSS style, before you start, please do a good job of preparation and planning, including naming rules. Page Block division, internal style classification and so on.
25, a few commonly used CSS style:
1) Align both sides of the text:

Text-align:justify;text-justify:inter-ideograph;

2) Fixed width Chinese character truncation:

Overflow:hidden;text-overflow:ellipsis;white-space:nowrap;

(However, you can only handle truncation of text on one line, and you cannot handle multiple lines.) ) (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> Use the mouse to see the effect on the front text. This effect in many foreign sites can be seen, and the domestic less and less.
5) The image is set to 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 things;
6) Flash Transparent:

Select SWF, open the Original Code window, enter <param name= "wmode" value= "Transparent" in front of </object> > above is the code for IE.
Add similar parameters to the <embed> tag for Firefox wmode= "Transparent"
7) in the Web page often used to put the mouse on the picture will appear the effect of the picture, you can use the picture to replace the skill, you can also use the following filter:

.pictures img {filter:alpha (opacity=45);}. Pictures a:hover img {filter:alpha (opacity=90);}