There are many tips in CSS web layout development, and novice friends are often unfamiliar with them. On one or two small issues, it may take a long time to figure it out. Although this aspect has been mentioned many times in the documents of 52CSS.com, many friends still 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 on 52CSS.com to 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 displayed normally when it is set to A in IE, but must be set to B in Mozilla to display normally, or the two are reversed.
Temporary solution: The selector {property name: B !important; property name: A} may not work sometimes. You can search for more BUG solutions at 52CSS.com.
4. 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. It is recommended to use background-image instead of list-style-image for the icon in front of the li tag.
6. IE cannot distinguish the difference between inheritance relationship and father-son relationship. They are all inheritance relationships.
7. When adding selectors crazily 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 defined color can be abbreviated #8899FF=#89F
12. Tables are still useful in some aspects. When you encounter a data table, don’t hate it.
13. <script> does not have the language attribute and should be written like this: <script type="text/javascript">
14. Perfect single-pixel outline table (can pass the test in IE5, IE6, IE7 and FF1.0.4 or above)
table{ border-collapse:collapse; } td{ border:#000 solid 1px; } |
15. Negative margin values can play a role in relative positioning when the label uses absolute positioning. When the page is displayed in the center, 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.
16. When using absolute positioning, the margin value can be used to position 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.
17. If the text is too long, change the long part into an ellipsis and display it: invalid in IE5 and FF, but can be hidden, valid in IE6
| <DIV STYLE=”width:120px;height:50px;border:1px solid blue;overflow:hidden;text-overflow:ellipsis”> <NOBR>For example, there is a line of text that is so long that it cannot be displayed in one line in the table.</NOBR> |
18. When there may be text duplication problems caused by comments in IE, you can change the comments to:
<!–[if !IE]>Put your commentary in here…<![endif]–> |
19. How to call external fonts using CSS
grammar:
| @font-face{font-family:name;src:url(url);sRules} |
Value:
name: font name. any possible value of the font-family attribute url(url): Specify OpenType font file using absolute or relative url address sRules: style sheet definition |
20. How to vertically center the text in a text box in a form?
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.
21. Small issues to pay attention to when defining the A tag:
When we define a{color:red;}, it represents the styles of the four states of A. If we want to define a state where the mouse is placed, just define a:hover. The other three states are in A. The defined style. When only one a:link is defined, be sure to remember to define the other three states!
22. Not all styles need to be abbreviated:
When p{padding:1px 2px 3px 4px} is defined before the style sheet, another style is added in the subsequent project with upper padding of 5px and lower padding of 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.
23. The larger the website, the more CSS styles there will be. Before starting, please make full preparations and plans, including naming rules. Page block division, internal style classification, etc.
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 cannot, It only hides.
If there are a lot of things you don’t understand, it doesn’t matter. Record these skills and come to 52CSS.com often to check them out. 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.