Practical tips for CSS page layouts

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,

The following is a reference fragment:

14, the title is the title, the title of the text is the title of the text. Sometimes headings don't necessarily need to display text, so here's a quote fragment:

Change the title content to caption content

15, the perfect Tan Shansu outside the Frame Line table (in IE5, IE6, IE7 and FF1.0.4 above all can pass the test) the following is a reference fragment:

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

The is for example a line of text, very long, a row in the table does not appear.

19, in IE may be due to the comments caused by the text duplication problem can be changed to:

put your commentary in ... ! [endif]–>

20. How to use CSS to invoke external fonts

Grammar:

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

Name: Font names. The value of any possible font-family property

URL (URL): 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 is previously defined as p{padding:1px 2px 3px 4px},

In the subsequent project added a style of 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

Your style is repeated, and you don't have to look for the original bottom filler and the left filler value!

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 The two ends of the text are aligned: 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) text with the mouse on the 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 things;

6 Flash Transparency: Select SWF, open the original code window, in the before the input

Add a similar parameter to the tag for Firefox wmode= "Transparent"

7 in doing web pages are often used to put the mouse on the picture will appear in the picture to brighten the effect, you can replace the skills of the picture, you can also use the following filters:

. Pictures img {

Filter:alpha (opacity=45); }

. Pictures a:hover img {

Filter:alpha (opacity=90); }