CSS page layout development, there will be a lot of tips, which like many articles related to introduction, and then expand the knowledge about where you want to get, I believe you will have a lot of harvest!
A, ul default label in Mozilla is padding value, and only in the margin has a value in the IE.
Second, the same class of selectors can be repeated in a document, and id selectors can only occur once. On a label at the same time using the CSS class and id be defined, if there are duplicate definitions, id selectors do define effective because id's important right is larger than the class.
Third, a compatibility adjustment (IE and Mozilla) of Benbanfa: beginner may encounter such a situation: a property of the label in the same IE is set to normal display A, while in Mozilla must be set to B in order to properly display, or both upside down.
Temporary Solution: selector {property name: B! important; property name: A} and maybe sometimes not effective. You can search more BUG solutions.
Fourth, need some spacing between words if you want a set of nested labels, it's left margin attribute label located inside the bar without going to define the label located outside of the padding
five li label icon in front of the recommended background -image, rather than list-style-image.
six, IE can not tell the difference inheritance and parent-child relationships, all inheritance.
Seven, in addition to your tags crazy selectors, do not forget in CSS selectors to add comments. So after you modify your CSS when you know why you should do it. In addition to remind you, do not get too crazy.
Eight, if you give a label to set a background image in dark colors and bright colors of text effects. Recommended at this time to give you a label and then set the background color in dark colors. Because the picture is lost, you can keep the readability of text.
Nine, four states define the link to pay attention to the order: Link Visited Hover Active
X. nothing to do with the content of the picture, please use the background always remember that the separation performance and content.
XI, custom colors can be abbreviated # 8899FF = # 89F
twelve, table in some respects still have its uses, and in the face of the contents of the data table, do not hate it produces psychological.
Create a front-end learning qun438905713, most in the group are zero-based learners, we help each other, answer each other, and also to prepare a lot of learning materials, welcomed the zero-based junior partner to the exchange.
XIV perfect frame line form a single pixel (in IE5, IE6, IE7 and can be tested in the above FF1.0.4)
Table {border-Collapse: Collapse; {TD} border: Solid 1px # 000;}
ten five, margin may function takes a negative value when the relative positioning of the label using absolute positioning, centered on the page, using the absolute positioning layer is not suitable for use left: XXpx this property. This layer to be placed next to a relative positioning of the label, then use negative margin is a good way.
Sixteen, with margin values positioning absolute positioning can be achieved with respect to the predetermined position where itself, which is top, left and other properties relative to the positioning edge of the window different. Absolute positioning has the advantage of allowing other elements to ignore its existence.
XVII if the text is too long, too long, it will become part of an ellipsis display: IE5, FF is invalid, but can be hidden, IE6 effective DIV STYLE = "width: 120px; height: 50px; border: 1px solid blue; overflow: hidden; text-overflow: ellipsis " > For example, there is a line of text is very long, in the table does not fit on one line.
XVIII may be due to bring the text notes can be changed when the annotation duplication in IE: <! - [if! IE]> Put your commentary in here ... <! [endif] ->
ninth, how to call external fonts syntax with CSS: @ font-face {font -family: name; src: url (url); sRules} values: name: the font name. Any possible value of the url font-family property (url): use absolute or relative url address specified OpenType font file sRules: stylesheet defined
XX, how to make the vertical text in a text box in the form of center?
If the row height to height in the FF group is not effective, way is to define the upper and padding to think about the effect can be achieved.
XXI A label should be noted that the definition of small problem: When we define a {color: red;}, it represents the style of the four states A, at this time if you want to define a state as long as the mouse to put the definition of a : hover on it, the other three state pattern a is as defined. Only defines one a: When the link, we must remember to define the other three states out!
XXII, not all styles should be short: the current stylesheet defined as p {padding: 1px 2px 3px 4px }. When, in the follow-up project has added padding 5px on a style, we are not under the padding 6px be sure to write p.style1 {padding: 5px 6px 3px 4px } can be written p.style1 {padding-top: 5px; padding-right: 6px;}., you might not feel so write as good as the original, but you want thought, you repeat the definition of the kind of writing styles, plus you do not have to go under the original padding and left padding value is how much! If after a former P style has changed, then, p.style1 you define the style have changed.
Xxiii, the larger the site, the more the CSS style, before starting to do, please make full preparation and planning, including the naming rules. Page blocks divided, internal style classification.
XXIV fixed width characters truncation: overflow: hidden; text-overflow : ellipsis; white-space: nowrap; ( but only on a word processing cutoff line, can not handle multiple lines.) (IE5 above) is not the FF, It only hides
