Style sheet CSS Layout experience

css| style Sheet

There will be additions or modifications to the content over time, and it is hoped that the following things will be helpful or useless to the later standard learners.

The main content is the difference between IE and Mozilla and easy to ignore details, some classic application of the best implementation method, should avoid violating the error.

Because it is the accumulation of their own experience, it is inevitable that there will be some erroneous explanations, such as the fortunate to see, please be sure to point out, first thanked.

The UL label in Mozilla defaults to have the padding value, but in IE only margin has the value.

The same class selector can appear repeatedly in one document, but only once for the ID selector, and a label with both class and ID for the CSS definition, and if the definition has duplicates, the ID selector does the definition effectively.

A stupid way to adjust compatibility (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;}

If you need some spacing between a set of tags that you want to nest, leave the margin attribute in the tag that is inside, rather than defining the label on the outside padding

The icon in front of the Li label recommends using Background-image instead of List-style-image

IE can not tell the difference between inheritance and parent-child relationships, all of which are inherited relationships.

When you give your label a crazy selector, don't forget to annotate the selector in the CSS. When you change your CSS later on, you'll know why you're doing it.

If you give a label a deep tonal background picture and a bright tonal text effect. It is recommended that you set a background color for your labels at this time.

To define the four states of a link note the order: Link visited Hover Active

Content-Independent Pictures please use the background

The definition color can be abbreviated #8899ff = #89F

Table in some ways is much better than other labels. Please use it where you want to align the columns

<script> No language This attribute should be written in this way:
<script type= "Text/javascript" >

The title is the title, and the text of the caption is the text of the caption. Sometimes the title does not necessarily need to display text, so:

The perfect Tan Shansu outer frame Line table

Table {border-collapse:collapse;}
td {border: #000 solid 1px;}

Margin negative can play a relative position when the label uses absolute positioning, when the page is centered, using the absolute positioning layer is not suitable to use the Left:xxpx attribute. It is a good way to put this layer next to a label to be positioned relative to it, and then use the negative value of margin.

Absolute positioning using margin value positioning can be relative to the location of their own position, 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 presence.