CSS FAQ and Solutions

Source: Internet
Author: User
Tags .url beginners class content default display document it is

One, the UL label in Mozilla Default is to have padding value, and in IE only margin have value.

The same class selector can appear repeatedly in one document, but only once for the ID selector. Using both class and ID for CSS definitions for a label, if the definition is duplicated, the ID selector is valid because the ID has a larger weight than class.

三、一个 compatibility adjustment (ie and Mozilla) stupid way:
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} Maybe sometimes it doesn't work. You can search for more bug solutions at this site.

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

The icon in front of Li tag is recommended to use Background-image instead of list-style-image.

The difference between the inheritance relationship and the parent-child relationship is inherited by IE.

When you give your label a crazy selector, don't forget to annotate the selector in CSS. When you change your CSS later on, you will know why. Also remind you not to be too crazy.

Eight, if you give a label a deep tonal background picture and a bright tonal text effect. It is recommended that you set a darker background color for your label this time. Because the picture is missing, you can also keep the readability of the text.

Nine, define the four states of the link to note the order: Link visited Hover Active

Please use background for pictures that are not related to content. Always remember that performance is separate from content.

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

12, table in some ways still useful, in the face of content as a data table, do not produce hate to it psychology.

13, <script> No language this attribute, should be written like this: <script type= "Text/javascript" >

14, 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;}

XV, margin negative can be in the label using absolute positioning when the role of relative positioning, in the middle of the page display, the use of absolute positioning of the layer is not suitable for the use of 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.

16, the absolute positioning of the use of 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 existence.

17, 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> For example, there is a line of text, very long, a row in the table does not show .</nobr>

18, 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]–>

19. How to use CSS to invoke external fonts
Syntax:
@font-face{font-family:name;src:url (URL); Srules}
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

20. 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.

21, 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!

22, 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 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 down filler and left filler value is how much! If the previous style p changes, the style of the p.style1 you define will change.

23, the larger the Web site, the more CSS style, before you start, please do a full preparation and planning, including naming rules. Page Block division, internal style classification, etc.

24. 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.

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.