24 well-organized CSS techniques_Experience exchange

Although this aspect has been mentioned many times in many documents, there are still many friends who make mistakes on these issues. Let’s take a look at these CSS techniques today. Read them carefully. Maybe you don’t fully understand them. You can search and expand the knowledge you want. I believe you will gain a lot!

1. The ul tag has a padding value by default in Mozilla, but in IE only margin has a value.
2. 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 definitions are repeated, the definition made by the id selector is valid because the weight of id is greater than that of class.
3. A stupid way to adjust compatibility (IE and Mozilla):
Beginners may encounter such a situation: the attribute of the same label is normal when set to A in IE, but must be displayed in Mozilla It must be set to B to display normally, or the two are reversed.
Temporary solution: The selector {attribute name: B !important; attribute name: A} may not work sometimes. You can search for more BUG solutions at jb51.net.
IV. If some spacing is required between a group of nested tags, leave it to the margin attribute of the tag located inside instead of defining the padding of the tag located outside
5. li tag It is recommended to use background-image instead of list-style-image for the previous icons.
6. IE cannot distinguish the difference between inheritance relationship and father-son relationship. They are all inheritance relationships.
7. When adding selectors to your tags, don’t forget to add comments to the selectors in CSS. You'll know why you do this when you modify your CSS later. Also a word of caution, don’t go too crazy.
8. 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. Because the images are lost, the text remains readable.
9. When defining the four states of a link, pay attention to the order: Link Visited Hover Active
10. Please use background for pictures that have nothing to do with the content. Always remember to separate presentation from content.
11. The definition of color can be abbreviated as #8899FF=#89F
12. Table is still useful in some aspects. When encountering a data table, don't hate it.
13. <script> does not have the language attribute. It should be written like this: <script type=”text/javascript”> <br> 14. Perfect single-pixel outline table (in IE5, IE6, IE7 and FF1. 0.4 or above can pass the test) <br> table{ border-collapse:collapse; } <br> td{ border:#000 solid 1px; } <br> You can also refer to: <br> CSS related to table borders Syntax <br><br> CSS removes the default spacing of table td and creates a 1px thin line table <br><br> Implements a thin line table that complies with Web standards <br><br> 15. Negative margin values ​​can be used in tags Absolute positioning plays the role of relative 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 needs to be positioned relatively, and then use negative values ​​for margin. <br> 16. 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> 17. If the text is too long, change the long part into an ellipsis and display it: IE5, FF are invalid, but can be hidden, IE6 is valid <br> <DIV STYLE=”width:120px;height:50px;border: 1px solid blue;overflow:hidden;text-overflow:ellipsis"> <br> <NOBR> is, for example, a line of text that is very long and cannot be displayed in one line in the table. <br> 18. In IE, it may be due to the comment band When the text is repeated, you can change the comment to: <br> <!–[if !IE]>Put your commentary in here…<![endif]–> <br> 19. How to call external fonts with CSS <br> Syntax: <br> @font-face{font-family:name;src:url(url);sRules} <br> Value: <br> name: font name. Any possible value of the font-family attribute <br> url (url): Use absolute or relative url address to specify the OpenType font file <br> sRules: Style sheet definition <br> 20. How to make a text box in a form Is the text vertically centered? <br> If using row height and height groups has no effect in FF, the way is to define upper and lower padding to achieve the desired effect. <br> 21. Small issues to note when defining the A tag: <br> When we define a{color:red;}, it represents the four states of A. If we want to define a mouse position For the above state, you only need to define a:hover. The other three states are the styles defined in A.When only one a:link is defined, be sure to remember to define the other three states! <br> 22. Not all styles need to be abbreviated: <br> When the style sheet is defined such as p{padding: 1px 2px 3px 4px}, another style is added in the subsequent project with a padding of 5px on the top and a padding of 5px on the bottom. Filler 6px. We don't necessarily have to write p.style1{padding:5px 6px 3px 4px}. It can be written as p.style1{padding-top:5px;padding-right:6px;}. You may feel that writing it this way is not as good as the original one, but have you ever thought about it? Your writing method repeatedly defines the style. In addition, You don’t have to find out what the original lower and left padding values ​​are! If the previous style P changes in the future, the style of p.style1 you defined will also change. <br> 23. The larger the website, the more CSS styles there are. Before starting, please make full preparations and plans, including naming rules. Page block division, internal style classification, etc. <br> 24. Fixed-width Chinese character truncation: overflow: hidden; text-overflow: ellipsis; white-space: nowrap; (However, it can only handle truncation of text on one line, not multiple lines.) (IE5 and above) FF can't, it only hides. <br><br> If you don’t understand a lot, it doesn’t matter, record these skills and come to jb51.net often, you will definitely gain something. You can also enter the content you are interested in in the search box on the left to search. You are welcome to leave comments and add CSS tips. <br></script>