That's what css styles have to be written (css reference style collection)

body,p,h1,h2,h3,h4,h5,h6{margin:0; padding:0;}

v

About the style of Body, P or other label is invalid, consistent with the default, this style is padding:0 ;,for body , p , h1~6 These labels, itself padding The value is 0, so only need margin:0 Yes.

In CSS RESET, for convenience, it is a bunch of labels direct sets. margin:0 ; padding:0 What is going on.Also take the CSS style file of everyone, the first line of the personal home style of everyone is a long label with one. margin:0 ; padding:0 No matter what it put span , div , em The label and the like are also added, even if there is no such label, it is also very unbeworthy, complete waste resources, waste Rendering of CSS.More recommended practice is ul , ol Stand alone because ul , ol Also set up separately list-style Style, and common label ul , ol The list elements have default padding values, so efficient ways should be:

This is often there.This happens that this may be related to the floating bilateral BUG of IE6, we can set up display:inline The method fixes the BUG of IE6, but if it is not enough to understand this BUG, the abuse will occur if it is insufficient to understand the CSS.The above is one of the abuse, for span/a/em/cite/i/b/strong The election of the elements is default display:inline So give it to it display:inline Attributes are more.

Similar situations are itself block Horizontal element setting display:block Property, for example:

The above situation is not uncommon, even in a relatively excellent website, there will be such a low-level style problem.

---

CSS reference style set

one. Font properties: (font)

1. Size {font-size: xx-small; (very small) general Chinese can not be used, as long as the value can be, unit: PX, PD

2. Style {font-style: oblique;} (skew) italic; (体) NORMAL; (normal)

3. High {Line-height: Normal;} (Normal) Unit: PX, PD, EM

4. Rough {font-weight: bold;} (bold) Lighter; (fine) NORMAL; (Normal)

5. Variant {Font-Variant: Small-Caps;} (small uppercase letters) NORMAL; (normal)

6. Size {Text-Transform: Capitalize;} (首 大) Uppercase; (uppercase) LowerCase; (lowercase) None; (None)

7. Modification {text-decoration: underline;} (Underline) OVERLINE; (Upline) line-through; (deleted line) BLINK; (flashing)

two. Common font: (Font-Family)

"Courier New", Courier, monospace, "Times New Roman", Times, serif, Arial, Helvetica, sans-serif, Verdana

three. Background attribute: (Background)

1. Color {Background-Color: #fffff;}

2. Picture {Background-image: none;

3. Repeat {Background-Repeat: no-repeat;} repeat-x (horizontal); REAT-Y (vertical)

4. Scroll {Background-attachment: fixed;} (fixed) scroll; (scrolling)

5. Location {Background-Position: Left;} (horizontal) TOP (vertical);

Shorthand method {Background: # 000 URL (..) Repeat fixed left top;} / * Shorthand · This often appears in the reading code.

Four. Block Properties: (Block)

1. Word spacing {letter-spacing: normal;} value

2. Align {text-align: Justify;} (alignment) left; (left align) Right; (right align) center; (center)

3. Indented {text-indent: Numerical PX;

4. Vertical alignment {vertical-align: baseline;} (baseline) SUB; (subscript) SUP; (上 标) TOP; text-top; middle; bottom; text-bottom

5. Word spacing word-spacing: normal; value

6. Spaces White-Space: pre; (retained) NOWRAP; (without wrap)

7. Display {Display: block;} (block) inline; (inline) List-item; (list) Run-in; (additional part) Compact; (compact) Marker; (mark) table; inline-table;Table-Raw-group; table-footer-group; table-raw; table-color; table-color; Table-Cell; Table-Caption; (Table Title) / * DISPLAY Property understands very vague * /

five. Frame properties: (Box)

1. Width :; Height :; Float :; Clear: Both; Margin :; Padding :; Order: Upper right left

six. Border properties: (border)

1. Border-style: dotted; (point line) DASHED; (dotted) SOLID; Double; (double line) Groove; (slot line) Ridge; (ridge) INSET; (depression) Outset; border-width :; Border width

border-color:#;

Shorthand Method Border: Width Style Color; / * Shop * /

seven. List properties: (List-style)

1. Type List-style-type: disc; (round point) Circle; (circle) Square; (square) decimal; (number) Lower-Roman; (小罗 code number) Upper-roman; loWer-alpha; Upper-Alpha;

2. Location List-style-position: Outside; (outside) inside;

3. Image List-style-image: URL (..);

8. Positioning properties: (position)

1.Position: absolute; relative; static;

visibility: inherit; visible; hidden;

overflow: visible; hidden; scroll; auto;

CLIP: RECT (12px, AUTO, 12PX, AUTO) (Crop)

Nine. CSS text properties:

1. Color: # 999999; / * Text color * /

2. Font-Family: Song, Sans-Serif; / * Text Font * /

3. Font-size: 9pt; / * text size * /

4. Font-style: ney; / * text slope * /

5. Font-Variant: Small-Caps; / * Small font * /

6. Letter-spacing: 1pt; / * Word interval * /

7. Line-height: 200%; / * Set line high * /

8. Font-weight: bold; / * text bold * /

9. Vertical-align: Sub; / * Under the mark * /

10. Vertical-align: super; / * On the mark * /

11. Text-Decoration: line-through; / * Delivery and deletion * /

12. Text-Decoration: Overline; / * Top * /

13. Text-decoration: underline; / * Draw a line * /

14. Text-Decoration: none; / * Delete Link Underline * /

15. Text-Transform: Capitalize; / * The first word * /

16. TEXT-Transform: Uppercase; / * English Upper

17. Text-Transform: Lowercase; / * English lowercase * /

18. Text-align: Right; / * text right alignment * /

19. Text-align: left; / * text left align * /

20. Text-align: center; / * text is neutral * /

21. Text-align: Justify; / * Text Dispersion Align * /

Vertical-align attribute

22. Vertical-align: top; / * Vertical upwards * /

23. Vertical-align: bottom; / * vertical downwards * /

24. Vertical-align: middle; / * Vertical home alignment * /

25. Vertical-align: text-top; / * Text vertical upwards * /

26. Vertical-align: text-bottom; / * text is vertically aligned * /

ten. CSS border blank

1. Padding-top: 10px; / * Retention on the side of the frame * /

2. Padding-right: 10px; / * Remove the blank * /

3. Padding-bottom: 10px; / * Retention of the next frame * /

4. Padding-left: 10px; / * Leave the left frame

---

Pattern overlay order in the CSS style sheet

Sometimes some restrictions don't work in the process of writing CSS, which involves the problem of CSS style coverage, as shown below: In some textbooks, only the order of CSS is "STYLE"> "File head on the element"> "External Style File" on the element ">" External Style File ", but how to arrange the priority of multiple identical styles in style files, noDetailed description.After testing and continuing search, you know the priority is arranged as follows:

1. The more accurate elements selectors of the style sheet, the higher the style priority:

ID selector specified style> class selector specified style> Element type selector specified style
So in the above example #navigator Style priority is greater than .current_block Priority, timely .current_block It is the latest added, and it doesn't work.

2. For the style set by the same type selector, in the style sheet file, the higher the priority of the priority:

Note that this is the higher the priority of the stylesheet file, not the order in which the element class occurs.For example, .CLASS2 appears in .class1 in the style sheet:

And an element specifies the use of Class class="class2 class1" This way, at this time, although CLASS1 is specified behind the class 2 in the element, since the Class1 in the style table file is in front of the Class2, it is still the priority of Class2, and the properties of the color are RED.Non-Black.

3. If you want to make the priority of a style, you can use it. !important To specify:

At this time, Class will use Black, not RED.

There are two solutions for problems encountered at the beginning:

1. Put Border from #navigator Take it out, put it in a class .block, and .block Put in .current_block Before:

Need default #navigator Element designation class="block"

2. Use! Important:

There is no need to make any other changes in this point.It can be seen that the second solution is simpler.

Everyone knows that the full name of CSS is called "laminated style sheet", but it is estimated that many people don't know the meaning of "laminate".In fact, "laminated" refers to the coverage of the style. When an element is used in a variety of styles, the browser must select an attribute value from it, this process is called "laminated".Style coverage (this called method is more popular) follows a certain rule.

First of all, it is necessary to make it clear that many cases can cause an element to be used in a variety of styles, and the rules covered by the style also need to be determined according to different situations, and the specific rules are as follows.

Rule 1: When the style conflict occurs due to inheritance, the ancestors won recently.

The inheritance mechanism of CSS allows elements to inherit the style from the ancestral element that contains its ancestors, considering the following situation:

strong Respectively body with p Inherited color Attribute, but due to p Leaving on the inheritance tree strong Coal, therefore strong The text inheritance p Blue.

Rule 2: Inherited styles and direct specified style conflicts, the specified style will win.

In the example above, if still specified strong Pattern of elements, such as:

So according to rules, strong The text is finally displayed in red.

Rules 3: When the direct specified style has a conflict, the style weight is victorious.

The weight of the style depends on the selector of the style, the weight is defined as follows.