CSS web page layout development tips 24

There are a lot of tips in CSS web page layout development, and new users are often unfamiliar with this. It may take a long time to figure out one or two small issues. Although I have mentioned this in www.bkjia.com, but there are still many friends who make mistakes on these issues. Let's take a look at these CSS skills today and read them carefully. You may not fully understand them. You can search at www.bkjia.com to expand your desired knowledge. I believe you will have a lot to learn!

1. ul labels have padding values by default in Mozilla, while only margin has values in IE.
2. The same class selector can be repeated in a document, but the id selector can only appear once. CSS is used to define a tag using both class and id. if the definition is repeated, the definition of id selector is effective because the id has a higher weight than the class.
III. A stupid way to adjust compatibility (IE and Mozilla:
A beginner may encounter this situation: it is normal to set the attribute of the same tag to A for display in IE, and B for display in Mozilla, or two for display.
Temporary solution: select the character {property name: B! Important; attribute name: A} sometimes does not work. You can search for more BUG solutions at www.bkjia.com.
4. If some spacing is required between a group of labels to be nested, leave it to the margin attribute of the label located inside, instead of defining the padding of the label located outside.
5. We recommend that you use background-image instead of list-style-image for the icon in front of the li label.
6. IE cannot tell the differences between the inheritance relationship and the parent-child relationship. All are inheritance relationships.
7. When adding a selector to your tag, do not forget to add comments to the selector in CSS. When you modify your CSS later, you will know why. We also remind you not to be crazy.
8. If you set a deep background image and a bright text effect for a label. We recommend that you set a deep background color for your tag at this time. Because the image is lost, the text can also be readable.
9. Pay attention to the order of the four states of the Link: Link Visited Hover Active
10. Use background for images unrelated to content. Always remember performance and content separation.
11. Define the color abbreviation # 8899FF = # 89F
12. table is useful in some aspects. When the content is a data table, do not hate it.
XIII. <script> the language attribute does not exist. It should be written as follows: <script type = "text/javascript">
14. Perfect single-pixel box line table (tests can be performed in IE5, IE6, IE7, and FF1.0.4)
Table {border-collapse: collapse ;}
Td {border: #000 solid 1px ;}

15. The negative value of margin can be used for relative positioning when the label is absolutely positioned. When the page is centered, the left: XXpx attribute is not suitable for the layer with absolute positioning. Place this layer next to a tag to be located, and then use the negative value of margin as a good method.
16. When absolute positioning is performed, you can use the margin value to locate the position relative to the position of the window. This is different from the top, left, and other attributes. The advantage of absolute positioning is that it allows other elements to ignore its existence.
17. If the text is too long, the excessive text will be changed to ellipsis: IE5, FF is invalid, but can be hidden. IE6 is valid.
<Div style = "width: 120px; height: 50px; border: 1px solid blue; overflow: hidden; text-overflow: ellipsis">
<NOBR> for example, a row of text is long and cannot be displayed in a table. </NOBR>
18. In IE, you can change the comment:
<! -[If! IE]> Put your commentary in here... <! [Endif]->
19. How to Use CSS to call external Fonts
Syntax:
@ Font-face {font-family: name; src: url (url); sRules}
Valid value:
Name: font name. Any possible font-family attribute values
Url: Specifies the OpenType font file with an absolute or relative url.
SRules: style sheet Definition
20. How to vertically center the text in a text box in a form?
If the Row Height and height groups are ineffective in FF, you can define the upper and lower whitelists to achieve the desired effect.
21. Notes for defining the tag:
When we define a {color: red;}, it represents the four state styles of A. If we want to define the State put by a mouse at this time, we only need to define: the other three States are the styles defined in. When defining only one a: link, remember to define the other three States!
22. Not all styles must be abbreviated as follows:
When p {padding: 1px 2px 3px 4px} is defined in the style sheet, a style is added in the subsequent project to add 5 PX and 6 PX. We do not 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 this writing is not as good as it was before, but you have never thought about it, you have already defined the style in your writing. In addition, you do not have to look for the original value of bottom and left fill! If the previous style P changes later, the style of p. style1 you define will also change.

• 2 pages in total:
• Previous Page
• 1
• 2
• Next Page