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

This article focuses on "the sharing of advanced skills in the use of CSS". Interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "the sharing of advanced skills in the use of CSS".

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

Second, the same class selector can be repeated in a document, while the id selector can only appear once. Both class and id are used for CSS definition of a tag. If the definition is duplicated, the definition of the id selector is valid because id is more important than class.

Third, a stupid way to adjust compatibility (IE and Mozilla):

Beginners may encounter a situation where the attribute of the same tag is set to An in IE, but it must be set to B in Mozilla to display properly, or two upside down.

Temporary workaround: the selector {attribute name: B! important; attribute name: a} may sometimes have no effect. You can search for more BUG solutions at 52CSS.com.

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

Fifth, 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.

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. And to remind you, don't be too crazy.

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. Because the picture is lost, you can also keep the text readable.

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

For pictures that have nothing to do with the content, please use background. Always remember to separate performance from content.

11. Color definition can be abbreviated as # 8899FF=#89F

12. Table still has the opportunity to show its talents in some aspects, so don't hate it when it comes to a data table.

13. Without the attribute language, it should be written as follows:

14. Perfect single-pixel framing form (can pass the test in IE5, IE6, IE7 and FF1.0.4 or above)

The code is as follows:

Table {border-collapse:collapse;}

Td {border:#000 solid 1px;}

Fifteen, the negative value of margin can play the role of relative positioning when the label uses absolute positioning. 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.

Sixteen, absolute positioning using margin value positioning can achieve relative to its own location, 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.

If the text is too long, change the too long part into an ellipsis: IE5,FF is invalid, but can be hidden, IE6 is valid

For example, there is a line of text, very long, a row in the table does not fit.

Eighteen. In IE, you can change the comment to:

The code is as follows:

Put your commentary in here...

19. How to use CSS to call external fonts

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 an OpenType font file using an absolute or relative url address

SRules: style sheet definition

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.

21. Minor issues to pay attention to when defining the A tag:

When we define a {color:red;}, it represents the style of the four states of A. if you want to define a mouse state 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!

22. 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.

23, the larger the website, the more CSS styles. Before you start, please make full preparation and planning, including naming rules. Page block division, internal style classification and so on.

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

At this point, I believe you have a deeper understanding of "the sharing of advanced skills in the use of CSS". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

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.