Style sheet CSS Common tips

css| Skills | style sheet

The UL label in Mozilla defaults to have the padding value, but in IE only margin has the value.

The same class selector can appear repeatedly in one document, but only once for the ID selector, and a label with both class and ID for the CSS definition, and if the definition has duplicates, the ID selector does the definition effectively.

A stupid way to adjust compatibility (ie and Mozilla):
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 of the upside.

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

If you need some spacing between a set of tags that you want to nest, leave the margin attribute in the tag that is inside, rather than defining the label on the outside padding

The icon in front of the Li label recommends using Background-image instead of List-style-image

IE can not tell the difference between inheritance and parent-child relationships, all of which are inherited relationships.

When you give your label a crazy selector, don't forget to annotate the selector in the CSS. When you change your CSS later on, you'll know why you're doing it.

If you give a label a deep tonal background picture and a bright tonal text effect. It is recommended that you set a darker background color for your label this time.

To define the four states of a link note the order: Link visited Hover Active

Content-Independent Pictures please use the background

The definition color can be abbreviated #8899ff = #89F

In some ways, table is much better than other labels. Use it where you want the column to be aligned.

<script> No language This attribute should be written in this way:
<script type= "Text/javascript" >

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

Perfect Tan Shansu Frame line form (both IE5.0 IE6.0 and FF1.0.4 can pass the test, the other husband test)
Table {border-collapse:collapse;}
td {border: #000 solid 1px;}

Margin negative values can be used when the label use absolute positioning of the role of relative positioning, in the middle of the page display, the use of absolute positioning of the layer is not suitable for the use of Left:xxpx this property. 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.

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

A few common 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;
The truncation of the text on one line cannot handle more than one line. ) (IE5 above)

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

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)} passed in IE6 and IE5 tests, FF failed;

6.FLASH transparent: Select SWF, open the original Code window, before </object> enter <param name= "wmode" value= "Transparent" >

We often use to do the Web page to put the mouse on the picture will appear to brighten the effect of the picture can be replaced by the technique, you can use the following filter, the code is as follows:
. Pictures img {
Filter:alpha (opacity=45); }
. Pictures a:hover img {
Filter:alpha (opacity=90); }

If the text is too long, the long section becomes an ellipsis display: IE5,FF is invalid, but can be hidden, IE6 valid
<div style= "width:120px; height:50px; BORDER:1PX solid blue;
Overflow:hidden; Text-overflow:ellipsis ">
<NOBR> is for example, there is a line of text, very long, a row in the table does not show .</nobr>

The Symbol & # 1 3 of the title line change; or & # 1 0;

You can change the annotation to:< in IE due to the repetition of the text caused by the annotation!--

[If! Ie]>put your commentary in here...<! [endif]-->

How to call an external font with CSS
Grammar:
@font-face {font-family:name; Src:url (URL); Srules}

Take value:
Name:  font names. The value of any possible font-family property
URL (URL):  use absolute or relative URL address to specify OpenType font file
Srules:  style sheet definition