Shulou(Shulou.com)06/02 Report--

Div+css programming tips and tips, I believe that many inexperienced people do not know what to do, so this article summarizes the causes of the problem and solutions, through this article I hope you can solve this problem.

1. Ul tags have a padding value by default in Mozilla, while only margin has a value in IE.

2, the same class selector can be repeated in a document, but the id selector can only appear once; for a tag both class and id are used for CSS definition, if the definition is duplicated, the definition of the id selector is valid because the weight of ID is greater than CLASS.

3, a stupid method of compatibility adjustment (IE and Mozilla): beginners may encounter such a situation: the attribute of the same tag is set to An in IE to display normally, while in Mozilla it must be set to B in order to display normally, or two upside down. Temporary workaround: selector {attribute name: B! important; attribute name: a}

4. If some space is needed between a set of tags to be nested, leave it to the margin attribute of the tag inside, instead of defining the padding of the tag on the outside

5. The icon in front of the li tag recommends using background-image instead of list-style-image.

6. IE can't tell the difference between inheritance relationship and father-son relationship, all of which are inheritance relations.

7. When frantically adding selectors to your tags, don't forget to annotate selectors in CSS. You will know why you want to do this when you modify your CSS later.

8. If you give a tag a dark background picture and a bright text effect. It is recommended that you set a dark background color for your tag at this time.

9. When defining the four states of a link, you should pay attention to the order: Link Visited Hover Active

10. For pictures that have nothing to do with the content, please use background

11. Define colors by abbreviating # 8899FF=#89F

12. Table performs much better than other tags in some ways. Please use it where you need column alignment.

13. There is no language attribute, so it should be written as follows:

14. 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: the title content is changed to the title content.

15. Perfect single-pixel outlining table (which can be tested in IE5, IE6, IE7 and FF1.0.4 or above) table {border-collapse:collapse;} td {border:#000 solid 1px;}

16. Taking a negative value of margin can play the role of relative positioning when the label uses absolute positioning, and when the page is centered, the layer that uses absolute positioning is not suitable to use the attribute left:XXpx. It is a good idea to place this layer next to a label to be relatively positioned, and then use a negative value of margin.

17. Absolute positioning using margin value can be relative to its own position, which is different from the relative positioning of attributes such as top,left and the edge of the window. The advantage of absolute positioning is that it can be ignored by other elements.

18, if the text is too long, the long part will be turned into an ellipsis to show: IE5,FF invalid, but can be hidden, IE6 effective is, for example, there is a line of text, very long, the table does not show a line down.

19. In IE, you can change the comment to: Put your commentary in here because of the repetition of the text.

20. How to use CSS to call external font syntax: @ font-face {font-family:name;src:url (url); sRules} value: name: font name. The value of any possible font-family attribute url (url): specifies the OpenType font file sRules: style sheet definition using an absolute or relative url address

21. How do I center the text in a text box in a form vertically? If the group with row height and height has no effect in FF, the way is to define the top and bottom blanks to achieve the desired effect.

22. Define the minor problems that the A tag should pay attention to: when we define a {color:red;}, it represents the style of the four states of A. if you want to define a state on the mouse at this time, just define a:hover, and the other three states are the styles defined in A. When only one a:link is defined, be sure to define the other three states!

23, not all styles should be abbreviated: when p {padding:1px 2px 3px 4px} is defined in front of the stylesheet, a style 5px and a 6px are added in the subsequent project. We don't have to write p.style1 {padding:5px 6px 3px 4px}. Can be written as p.style1 {padding-top:5px;padding-right:6px;}, you may feel that this writing is not as good as it used to be, but have you ever thought that your way of writing repeatedly defines the style, and you don't have to find the value of the original next and left blanks! If the previous style P changes later, the style of the p.style1 you define will also change.

24. The larger the website, the more CSS styles. Please make full preparation and planning, including naming rules, before you start. Page block division, internal style classification and so on.

25. Several commonly used CSS styles:

-1) alignment of both ends of Chinese characters: text-align:justify;text-justify:inter-ideograph

-2) truncation of fixed-width Chinese characters: overflow:hidden;text-overflow:ellipsis;white-space:nowrap; (but only truncation of text on one line, not multiple lines.) (above IE5) FF cannot, it only hides.

-3) fixed width Chinese characters (words) break: table-layout:fixed; word-break:break-all; (above IE5) FF cannot.

-4) the text is placed on the front text with the mouse to see the effect. This effect can be seen on many websites abroad, but there are few at home.

-5) the picture is translucent: .halfalpha {background-color:#000000;filter:Alpha (Opacity=50)} passed the IE6 and IE5 tests, but FF failed because this style is proprietary to IE.

-6) FLASH transparency: select swf, open the original code window, and enter the above code for IE before. Add a similar parameter wmode= "transparent" to the tag for FIREFOX

-7) when making a web page, it is often used to brighten the picture by placing the mouse over the picture. You can use the technique of replacing the picture or the following filter: .lighting img {filter: alpha (opacity=45);} .lighting a:hover img {filter: alpha (opacity=90);}

After reading the above, have you mastered div+css programming tips and tips? If you want to learn more skills or want to know more about it, you are welcome to follow the industry information channel, thank you for reading!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.