Web page Production Learning Summary: CSS Common tips

css| Skills | Web page

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 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.

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:

The perfect Tan Shansu frame Line table (in IE5.0 IE6.0 IE7 and FF1.0.4 above all can pass the test, other not 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 (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 the 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, before </object> enter <param name= "wmode" value= "Transparent" > above is for IE code.

For Firefox give <embed> tags also add similar parameters wmode= "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;

In IE, you may change the comment to read as follows:

<!--[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

How do I get text in a text box in a form to be centered 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.