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

This article mainly talks about "what are the practical skills of CSS page layout". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Next, let the editor take you to learn "what are the practical skills of CSS page layout?"

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 solution: selector {attribute name: bounded importance; 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: LinkVisitedHoverActive

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:

The following is a reference clip:

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 following is a quote clip:

Change the title content to the title content

15. A perfect single-pixel outlining table (which can pass the test in IE5, IE6, IE7 and FF1.0.4 or above) is a quote:

Table {border-collapse:collapse;}

Td {border:#000solid1px;}

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, change the too long part into an ellipsis to show: IE5,FF is invalid, but can be hidden, IE6 is valid

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

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

Putyourcommentaryinhere...

20. How to call external fonts with CSS

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

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 issues that should be paid attention to in the A label:

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!

23. Not all styles should be abbreviated:

When a stylesheet such as p {padding:1px2px3px4px} is defined in front of the style sheet

In the follow-up project, a style white 5px is added and the next white 6px is added.

We don't have to write p.style1 {padding:5px6px3px4px}.

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 about it?

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 it can only handle 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 set to 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 place the mouse over the picture to brighten the image. You can use the technique of replacing the image with the following filter:

.picturesimg {

Filter:alpha (opacity=45);}

.picturesa: hoverimg {

Filter:alpha (opacity=90);}

At this point, I believe you have a deeper understanding of "what are the practical skills of CSS page layout?" 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.