Web page production Knowledge style sheet CSS Common tips Summary

css| Tips | page | style sheet

CSS style sheet Common tips

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

· 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;}//ie7 Invalid

· 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 table (both IE5.0 IE6.0 and FF can pass the test, other not tested) 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)

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

· 4.<acronym style= "Cursor:help" title= "Enter text to Prompt" > text </acronym> put the mouse on the front 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>

· Title line-wrapping notation or in IE may change the annotation to:<!--[if! Ie]>
Put your commentary ...
<! [endif]-->

· How to invoke external font syntax with CSS: @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