CSS Learning Notes

1, recently look at some CSS things, found every time to forget, do things will be very slow, so there is time to look at other people's website, and then think that they can not make this effect.
2, there are several ways to set style:

Browser default settings

External style sheet

Internal style sheet (inside label)

Inline style (inside HTML elements)

This is a paragraph

Multiple styles
Get the final result based on the priority level

3. Not affected by inheritance

Element Selector
Body {

Font-family:verdana, Sans-serif; }

Group Selector
TD, UL, OL, UL, Li, DL, DT, DD {

Font-family:verdana, Sans-serif; }

p {

Font-family:times, "Times New Roman", serif; }

P again set the value will not be affected by the Body property

Wildcard Selector

• {color:red;}
  A wildcard selector can be ignored in the same class selector as the ID selector.

Multi-Class selectors

. important.urgent {background:silver;}

This selector will only match the P element that contains the word important and urgent in the class attribute. Therefore, if only the word important and warning are in the class attribute of a P element, it will not match. However, it can match the following elements:

This paragraph is a very important and urgent warning.

4. ID Selector

Cannot have the same ID in the same document

Red {color:red;}

5. Class Selector

. Center {Text-align:center}

6. Derivation Selector

Li Strong {

Font-style:italic;font-weight:normal;

}//will select only elements with strong markup for descendants

H1 > Strong {color:red;}//Select only H1 child nodes are strong elements

Table.company td > P//This is a combination of descendant selectors and sub selectors

H1 + P {margin-top:50px;}//This selector reads: "Select the paragraph that appears immediately after the H1 element, and the H1 and P elements have a common parent element."

Sidebar p {

Font-style:italic;text-align:right;margin-top:0.5em;}

. Fancy TD {

Color: #f60; background: #666;}

td.fancy {

Color: #f60; background: #666;}

7. Attribute Selector

[Title]
{
color:red;
}

[Title=w3school]
{
BORDER:5PX solid blue;
}

[attribute] is used to select the element with the specified attribute.

[Attribute=value] is used to select an element with the specified attributes and values.

[Attribute~=value] is used to select the element in the attribute value that contains the specified vocabulary.

[Attribute|=value] is used to select an element with an attribute value that begins with the specified value, which must be the entire word.

[Attribute^=value] matches the property value to specify each element at the beginning of the value.

[Attribute$=value] matches the property value to specify each element at the end of the value.

[Attribute*=value] matches each element of the property value that contains the specified value.

The property must match the property value exactly :

This paragraph is a very important warning.

If written as p[class= "important", then this rule does not match the sample tag.
To select the element based on a specific property value, you must write this:

P[class= "Important warning"] {color:red;}

You can link multiple properties together to select a document:

a[href= "http://www.w3school.com.cn/"][title= "W3school"] {color:red;}

8. The most common use to remember

The law of the margin attribute value:

Margin:top Right Bottom Left

If the value of the left margin is missing, the value of the right margin is used.

If the value of the margin is missing, the value of the top margin is used.

If the value of the right margin is missing, the value of the top margin is used.

Margin merging is only possible with the vertical margin of the block box in the normal document flow. Margins between inline boxes, floating boxes, or absolute positioning are not merged.

9. Positioning

Position place elements in a static, relative, absolute, or fixed position.

Top defines the offset between the top margin boundary of an anchored element and the upper boundary of its containing block.

Right defines the offset between the left margin boundary of the anchored element and the right boundary of its containing block.

Bottom defines the offset between the margin boundary beneath the anchor element and the lower boundary of its containing block.

Left defines the offset between the right margin boundary of the positioned element and the left edge of its containing block.

Overflow sets what happens when the content of an element overflows its area.

Clip sets the shape of the element. The element is cut into the shape and then displayed.

Vertical-align sets the vertical alignment of elements.

Z-index sets the stacking order of elements.

Where the Position property value means:

Static

The element box is generated normally. Block-level elements generate a rectangular box that, as part of the document flow, creates one or more row boxes in the parent element of the inline element.

Relative

The element box offsets a distance. The element still retains its pre-positioned shape, and the space it originally occupies remains.

Absolute

The element box is completely removed from the document flow and is positioned relative to its containing block. The containing block may be another element in the document or an initial containing block. The space that the element originally occupied in the normal document flow is closed as if the element did not exist. The element is positioned to generate a block-level box, regardless of what type of box it was generated in the normal flow.

Fixed

The element box behaves like the position is set to absolute, but its containing block is the window itself.

CSS Learning Notes