18 Tips for using style sheet CSS for Web page layout

Source: Internet
Author: User
Tags definition relative
css| Tips | page | style sheet

1. tags in mozilla default is padding value, and in IE only margin have a value.

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

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 in the inside of the margin attribute bar, and do not define the outside of the label padding

5.the icon in front of the Li tag is recommended to use Background-image instead of List-style-image

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

7. when you give your label crazy plus selector, don't forget to add a comment 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 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.

9. define the four states of the link to note the order: Link visited Hover Active

The Content-independent picture please use background

Define colors 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" >

title is the title, the title of the text is the text of the title. Sometimes the title does not necessarily need to display text, so:
the perfect Tan Shansu of the outer frame Line table

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

margin A negative value can play a relative position when the label uses absolute positioning, when the page is centered, using an absolutely positioned layer is not appropriate to use the Left:xxpx attribute. Put this layer next to a label to be positioned relative to it, Then it's a good way to use the negative values of margin.

The use of margin value positioning in absolute positioning can be achieved relative to the location of the position, which is different from the top,left and other attributes relative to the window edge positioning. The advantage of absolute positioning is that it allows other elements to ignore its existence.

in English and Chinese at the end of the alignment style (ie6,ie5 in English, FF)

text-align:justify;
Text-justify:inter-ideograph;



Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.