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

This article introduces the relevant knowledge of "what are the practical skills of CSS to make the front-end web layout better?" in the operation of the actual case, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

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 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 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 sequence:

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

It should be written like this:

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 (can pass the test in IE5, IE6, IE7 and FF1.0.4 or above)

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. When the page is centered and displayed, 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, very long, a 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 p {padding:1px2px3px4px} 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: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 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

(however, you 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 lines:

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) set the image to translucent:

.halfalpha {background-color:#000000;filter:Alpha (Opacity=50)}

Passed the IE6 and IE5 tests, but failed FF 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);}

This is the end of the content of "what are the practical skills of CSS to make the front-end web layout better?" Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.