CSS public style

I. Summary of common style parsing

HTML, body, Div, p, ul, Li, DL, DT, DD, H1, H2, H3, H4, H5, H6, form, input, select, button, textarea, iframe, table, Th, TD {Margin:0; padding:0;}

img {border:0 none; vertical-align:top;}

UL, Li {list-style-type:none;}

H1, H2, H3, H4, H5, h6 {font-size:14px;}

Body, input, select, button, textarea {font-size:12px; Font-family:tahoma, Geneva, Sans-serif;}

button {Cursor:pointer;}

I, EM, cite {font-style:normal;}

Body {background: #fff; color: #363636; line-height:1.2;}

A, a:link {color: #222; text-decoration:none;}

a:visited {}

A:active, a:hover {text-decoration:underline;}

A:focus {outline:none;}

. fixed:after {content: "."; display:block; clear:both; height:0; visibility:hidden;}

. fixed {display:block; min-height:1%;}

*html. Fixed {height:1%;}

. clear {diplay:block!important; float:none!important; clear:both; overflow:hidden; width:auto!important; height:0!i mportant; Margin:0 auto!important; Padding:0!important; font-size:0; line-height:0; }

. more {float:right;}

. more a {font-weight:normal; font-size:12px;}

. FL,. fr {display:inline; float:left;}

. fr {float:right;}

This is my web site for nearly three years after the reference and their own research out of the common style, in general, the style will be based on the specific effect of the page to fine-tune.

Note: This is to write these annotations in order to let the first contact with the CSS friends understand that some things do not detour around, know that the code is what is going to jump to the third, may write some wordy. Oh!

First line HTML, body, Div, p, ul, Li, DL, DT, DD, H1, H2, H3, H4, H5, H6, form, input, select, button, textarea, IFRAME, table, t H, TD style everyone should understand that this is the original selector with the outer fill and the inner fill minus 0

Maybe someone is still using the "*" wildcard, but this is a disadvantage will let the code become redundant, especially the child parent nesting relationship deeper and more trouble, we recommend that we try to reduce the use, here is recommended to use my first line in the general style of writing, there may be fewer selectors, but my daily use of the selector is so many, If everyone is useful to pre fieldset blockquote these selectors or other selectors can be written inside.

The second line in the IMG picture label style Everyone is different, the purpose is to let the browser default picture is no border, there are IE6 pictures at the bottom of the blank space disappears. Some love with Display:block; Border:none;

But such writing, will have such or such shortcomings, display:block; What do you do when you want to center the picture in a box? Margin:auto; Is that right? But you have to let the outside box have an actual width, if it is replaced by vertival-align:top; or Vertival-align:middle;  Then the actual width will not have to write, just add a text-align:center; The picture does not have to be filled out.

There are some cool friends will be strange I write border:0 none; Here to write 0 plus a none, this question I still want to say is because I write text box input, I found that in different Windows system appearance, you write Border:none or border:0; No, the border of the text box is still in, so you must write border:0 none; This habit is also left to the IMG, so we can still write border:none; But when writing input, to the border does not have to write border:0 none;

The third line of UL, Li will not have to explain it, we all understand how.

Line four H1, H2, H3, H4, H5, h6 or according to the page header font size to be modified, or H1 H2 H3 h4 these selectors separate to write their own font size.

The body of the five, input, select, button, textarea is because I found in the page when the text box and drop-down menu IE6, etc... In the font size is not the normal 12th font, so in the compatibility is not very perfect, so I wrote the font size of 12th, and then in the Firfox the font of these labels is the default is the song body, so I wrote the font, and then the body to write the font size and size, so the input In front of the body, so there is no need to write the back.

The button's Mouse trigger property is the default arrow, which is not particularly good in the user experience, so I changed the mouse-triggered property to a small hand.

The seventh line is to write some labels that are not particularly important or decorative, I use these selectors because they have the default properties of the text, so I took it off, and I didn't use it.

The eighth line body write background color is because some Windows system appearance will change the browser background color to another color, so in order to not problem, add the background white, and then add text color, font size and font I have written in front.

Line Nineth to line 11th A:link are these people writing about the same?

The dotted box that appears when you click the link in line 12th disappears, eliminating the focus. (the description is not too professional, forgive me!) ）

In the following I wrote. Fixed and. Clear both clear floating styles

Where do I use these two exactly? After I have drawn two pictures, everyone will understand!

. fixed example

. Clear Example

There are a lot of properties in the. clear that I want to write!important questions

Because we are writing the child box floating will certainly write to Float:left; Margin or padding, and width and so on, I also in the. Clear properties Add as many conflicting attributes as possible to!important, the browser will prioritize these attributes to the front, and IE6 also support reading!important, As you can imagine, the IE6 browser simply reads the same property, takes precedence over the last attribute, but he is in the same style, not within the same style. He doesn't take precedence over the last attribute. Look at this code.

After reading these two pieces of code, you will understand!

. More this style in the process of the page or the title bar will definitely have more of this link, so I added this style in the front, in the back to reduce the Float:right this property, the meaning is not very large.

. fl. Fr These two are attached to a box that needs to float to the left or to the right, so the flexibility is high, and some CSS code can be omitted.

Tell me some of your own compatibility styles for IE6 browser display bugs

I think everyone is using jquery or some other JS framework now?

We use these frameworks to develop the Lightbox album (that is, click on the image after the picture pop-up image and the page has a layer of masking class).

Some Lightbox album code is not very well written, for example: IE6, when the content is not high enough to fill the entire page, and then click on a picture in the album, we found that the mask layer behind the image does not fill the entire browser.

Such as:

At this time we will think about the need to change a code to use, but this album code in addition to masking this outside the other is very perfect, can not find other perfect album. What are we going to do?

Here is the CSS solution I wrote! The maximum browser resolution currently tested is 1050px.

The code is as follows:

*html Body {overflow-x: hidden; position:relative; height:99%; margin-top: -1.5%; padding-top:1%;}

*html {padding-top:1.5%;}

Now, let me explain.

Overflow-x: Hidden; position:relative; Margin-top: 1.5% These three properties are for the height of 99% when the scroll bar does not appear on the right, and padding-top:1%; This is to make the scroll bar not appear on the right side of the high-resolution display

and *html {padding-top:1.5%;} is to fill the margin-top written in the above style:-1.5%; This negative value.

You can test this code in a flawed code developed with jquery or other JS frameworks.

Third, writing CSS and communication between the programmer

Cool friends have a little problem communicating with programmers after they finish the page.

Note: The following suggestions are written about the naming of ASP.

For example, when we write a child style, we write the following:. Wraper form {}, in this case, we have to consider that there are no pagination and other code in this page, because the ASP. NET programmer will add a form control to the page with pagination so that the form we write in will be removed. So we're going to change the. Wraper form {} to. wraper. Formwraper {} and that will solve the problem.

There is also a check box and a radio box where.

Similar to this way of writing in ASP. Most programmers still love to take the server control, output to the foreground page, will become

After that, the front page will get messy, so we still have to change the wording when we encounter a similar situation.

And the other one is button {}

in ASP. Server controls are also used, output to the foreground, it will be the case our style is invalid, so to give this button a style name, but not with the selector, for example:. message_btn {}

CSS public style