Web page making style sheet CSS common tips

css| Tips | page | style sheet

♠ul tags in Mozilla default is padding value, and in IE only margin have a value.

♠ the same class selector can appear repeatedly in one document, but only once for the ID selector, and for a label to use both class and ID for CSS definition, and if there is a duplicate definition, the ID selector is valid.

♠ 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 it to the margin attribute of the tag inside it, rather than define the padding on the outside label.

The icons in front of the ♠li label recommend using Background-image instead of List-style-image

♠ie the difference between the inheritance relationship and the parent-child relationship, all are inherited relations.

♠ When you're giving 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.

♠ defines the four states of the link to be aware of the sequence: link visited Hover Active

♠ A content-independent picture please use background

♠ defines a color that can be abbreviated #8899FF = #89F

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

♠<script> does not language this attribute, it should be written like this: <script type= "Text/javascript" >

♠ Title is the title, the title text is the title of the text. 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. Chinese characters are justified: 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 the notation used in line wrapping 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} values:
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