25 CSS programming reminders and tips finishing

Source: Internet
Author: User
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 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 is duplicated, the ID selector is valid because the ID has a higher weight than 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> did not language this attribute, should be written in this way:
<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)
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
<div 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:
<!? [If! Ie]>put your commentary in here...<! [endif]?>

20. How to use CSS to invoke external fonts
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;}

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.