Collection of common tips for CSS style sheets_Experience exchange

· The ul tag has a padding value by default in Mozilla, but in IE only margin has a value.

· The same class selector can appear repeatedly in a document, but the id selector can only appear once; use both class and id to define a label in CSS. If the definition is repeated, the id selector The definition made by the symbol is valid.

· Beginners may encounter a situation where the same label attribute is displayed normally when set to A in IE, but must be set to B in Mozilla to display normally, or the two are reversed.
Temporary solution: Selector {Attribute name: B !important ; Attribute name: A;} //Invalid under IE7

· If some spacing is needed between a group of nested tags, Then leave it to the margin attribute of the label located inside, instead of defining the padding of the label located outside

· It is recommended to use background-image instead of list-style-image for the icon in front of the li label

· IE can’t tell the difference between inheritance relationship and father-son relationship. They are all inheritance relationships.

· When adding selectors to your tags, don’t forget to annotate the selectors in CSS. You will know why you do this when you modify your CSS in the future.

· If you set a dark background image and bright text effect for a label. It is recommended to set a darker background color for your label at this time.

· When defining the four states of a link, pay attention to the order: Link Visited Hover Active

· Please use background for pictures that have nothing to do with the content

· The defined color can be abbreviated #8899FF = #89F

· table performs much better than other tags in some aspects. Please use it where column alignment is required.

· <script> does not have the language attribute. It should be written like this: <script type="text/javascript"> <br><br>· The title is the title, and the text of the title is the text of the title. Sometimes the title does not necessarily need to display text, so: <h1>Title content is changed to <h1><span>Title content <br><br>· Perfect single pixel Border table (can pass the test in IE5.0, IE6.0 and FF, others have not been tested) table {border-collapse:collapse;} td {border:#000 solid 1px;} <br><br>· A negative value for margin can play a role in relative positioning when the label uses absolute positioning. When the page is centered, the left:XXpx attribute is not suitable for layers using absolute positioning. It's a good idea to place this layer next to a label that you want to position relatively, and then use a negative value for margin.<br><br>· When using absolute positioning, using margin value positioning can achieve positioning relative to its own position, which is different from the positioning of attributes such as top and left relative to the edge of the window. The advantage of absolute positioning is that it allows other elements to ignore its existence. <br><br>Several commonly used CSS styles<br><br>· 1. Align Chinese characters at both ends: text-align:justify; text-justify:inter-ideograph; <br><br>· 2 .Fixed width Chinese character truncation: overflow:hidden;text-overflow:ellipsis;white-space:nowrap;(However, it can only process text truncation on one line, not multiple lines.) (IE5 and above) <br><br> · 3. Fixed-width Chinese character (word) line break: table-layout:fixed; word-break:break-all; (IE5 and above) <br><br>· 4.<acronym style="cursor: help" title= "Enter the text to be prompted">Text Use the mouse to place the previous text to see the effect. This effect can be seen on many foreign websites, but very few domestic ones. <br><br>· 5. Set the image to be semi-transparent: .halfalpha { background-color: #000000; filter: Alpha(Opacity=50)} passed the test in IE6 and IE5, but failed in FF. <br><br>· 6. FLASH transparency: Select swf, open the original code window, enter <param name="wmode" value="transparent"> before We often use the mouse when making web pages The effect of brightening the picture will appear on the picture. You can use the picture replacement technique, or you can use the following filter. The code is as follows: <br><br>.pictures img { filter: alpha(opacity=45); } < BR>.pictures a:hover img { filter: alpha(opacity=90); } <br><br>· If the text is too long, the long part will be displayed as an ellipse: invalid in IE5 and FF, but can be hidden , valid for IE6<BR><div style="width: 120px; height: 50px; border: 1px solid blue; overflow: hidden; text-overflow:ellipsis"> <BR><NOBR>For example, there is a line of text, which is very long , one line in the table cannot be displayed. <br><br>· Title The symbol used for line breaks or the text duplication problem caused by comments in IE can be changed to: <!--[if ! IE]> <BR>Put your commentary in here... <BR><![endif]--> <br><br>· How to use CSS to call external fonts Syntax: @font-face { font-family : name ; src: url ( url ); sRules } Value: <BR>name: font name. Any possible value of the font-family attribute <BR>url ( url ): Specify an OpenType font file using an absolute or relative url address <BR>sRules: Style sheet definition <BR></script>