CSS Page Layout tips

When you give your label a crazy selector, don't forget to annotate the selector in the CSS.

1, the UL label in Mozilla Default is to have padding value, and in IE only margin have value.
2, the same class selector can be repeated in one document, but the ID selector can only occur once; Use class and ID for a labelCSSdefinition, if the definition has duplicates, the ID selector makes the definition valid because the ID's weight is larger than the class.
3. A clumsy approach to compatibility adjustment (ie and Mozilla):
Beginners may encounter such a situation: the same label properties in IE set to a display is normal, and in Mozilla must be set to B to normal display, or two of the upside.
Temporary Workaround: Selector {property name: B!important; property name: A}
4, if a group of tags to be nested between the need for some spacing, then leave the tag inside the margin attribute bar, and do not define the outside of the label padding
5, Li tags in front of the icon recommended the use of background-image, rather than list-style-image.
6, IE can not tell the difference between inheritance and parent-child relationship, all are inherited relations.
7, when giving your label crazy plus selector, don't forget to add the annotation to the selector in the CSS. When you change your CSS later on, you'll know why you're doing it.
8, if you give a label set a dark background picture and bright tone of the text effect. It is recommended that you set a darker background color for your label this time.
9, the definition of links in the four states to pay attention to the order: Link visited Hover Active
10, Content-independent pictures please use background
11, the definition of color can be abbreviated #8899ff= #89F
12, table in some respects than other labels performance is much better. Use it where you want the column to be aligned.
13, <script> No language this attribute, should be written like this: <script type= "Text/javascript" >
14, the title is the title, the title of the text is the title of the text. Sometimes the title does not necessarily need to display text, so:15, the perfect Tan Shansu the outer frame line form (in IE5, IE6, IE7 and FF1.0.4 above all may pass the test)
Example Source Code
Table{border-collapse:collapse;}
Td{border: #000 solid 1px;}
16, margin negative can be in the label using absolute positioning when the role of relative positioning, in the middle of the page display, use the absolute positioning of the layer is not suitable to use left:xxpx this attribute. It's a good way to put this layer next to a label that you want to position relative to, and then use the negative value of margin.
17, the absolute positioning of the use of margin value positioning can be achieved relative to the location of their own, this and top,left and other attributes relative to the window edge positioning is different. The advantage of absolute positioning is that it allows other elements to ignore its existence.
18, if the text is too long, it will be too long part of the ellipsis display: Ie5,ff invalid, but can be hidden, IE6 effective
<p style= "width:120px;height:50px;border:1px solid blue;overflow:hidden;text-overflow:ellipsis" >
<NOBR> is for example, there is a line of text, very long, a row in the table does not show .</nobr>
19, in IE may be due to the comments caused by the text duplication problem can be changed to:
Example Source Code
<!–[if! Ie]>put your commentary in here...<! [endif]–>
20. How to useCSSCalling external fonts
Example Source Code
Grammar:
@font-face{font-family:name;src:url (URL); Srules}
Take value:
Name: Font names. The value of any possible font-family property
URL (URL): Specifies the OpenType font file using an absolute or relative URL address
Srules: Style sheet definition
21. How do I align text in a text box in a form vertically?
If the row height and height of the group in FF is not effective, the way is to define the upper and lower filler can achieve the effect of thinking.
22, the definition of a label to pay attention to the small problem:
When we define a{color:red;} , it represents the four states of a style, if you want to define a mouse on the state to define A:hover, the other three states are defined in a style.
When defining only one a:link, be sure to remember to define the other three states!
23, not all styles should be abbreviated:
When the stylesheet is defined as p{padding:1px 2px 3px 4px}, in the subsequent project added a style filler 5px, under the filler 6px. We do not necessarily write p.style1{padding:5px 6px 3px 4px}. Can be written as p.style1{padding-top:5px;padding-right:6px, you may feel like it's not as good as it used to be, but don't you think that the way you write repeats the style, In addition, you can not find the original bottom filler and the value of the left filler is how much! If the previous style p changes, the style of the p.style1 you define will change.
24, the larger the website,CSSThe more styles, before you start, be prepared and planned, including naming rules. Page Block division, internal style classification and so on.
25, a few commonly usedCSSStyle:
1 The two ends of the text are aligned: text-align:justify;text-justify:inter-ideograph;
2 fixed-width Chinese character truncation: overflow:hidden;text-overflow:ellipsis;white-space:nowrap (although only the truncation of text on one line can be processed, multiple lines cannot be processed.) (IE5 above) FF cannot, it is only hidden.
3 Fixed width Chinese character (word) folding line: table-layout:fixed; Word-break:break-all (IE5 above) FF not.
4) <acronym title= "Enter the text to be prompted" style= "CURSOR:HELP;" > Text </acronym> put the mouse in front of the text to see the effect. This effect in many foreign sites can be seen, while the domestic few and few.
5 The picture is translucent:. halfalpha {background-color: #000000; Filter:alpha (OPACITY=50)} in IE6 and IE5 test pass, FF failed, this is because this style is IE private things;
6 Flash Transparency: Select SWF, open the original Code window, before </object> input <param name= "wmode" value= "Transparent" > above is for IE code.
For Firefox give <embed> tags also add similar parameters wmode= "Transparent"
7 in doing web pages are often used to put the mouse on the picture will appear in the picture to brighten the effect, you can replace the skills of the picture, you can also use the following filters:
Example Source Code
. Pictures img {
Filter:alpha (opacity=45); }
. Pictures a:hover img {
Filter:alpha (opacity=90); }