CSS Action notes

Tag: size ref height over operation cannot ack head pixel

To write a CSS style:
1. The Style property of the label
2. Write style in the Style tab in the head
-ID Selection Area
#i1 {
Background-color: #2459a2;
height:48px;
}
-Class Selector
Name
...
}
< label class= ' name ' > </tag >
-Tag Selector
div{
...
}
All div settings on this style
-level selector (space)
. C1. C2 div{

}
-Combo Selector (comma)
#c1,. c2,div{

}
-the property selector
Filters The selected labels through the properties again
. c1[n= ' Alex ']{width:100px; height:200px;}
PS:
-priority, style first on label, write order, nearest principle
3, CSS style can also be written in separate file
<link rel= "stylesheet" href= "Commons.css"/>
4, Border
-width, style, color (border:4px dotted red;)
-Border-left
5,
Height, percent of height
width, width pixels, percent
Text-al Ign:ceter, centered horizontally
Line-height, vertically based on label height
color, font color
font-size, font size
Font-weight font Bold
6, float
Let the tags fly up, block-level labels can also be stacked
when the parent label does not have a float, the child label float:
<div style= "Clear:both;" ></div>
7, display
Display:none;--Let the label disappear
Display:inline;
Display:block;
Display:inline-block;
has inline, default how much you own
has block, you can set the height, width, padding margin
Inline label: Cannot set height, width, padding margin
block-level label: set height, width , padding margin
8, padding margin (0,auto)
padding margin
9, Position:
A. fiexd = fixed somewhere on the page
B. Relative + ABS Olute
<div style= ' position:relative; '
<div style= ' position:absolute;top:0;left:0; ' ></div>
</div>

10. opcity:0.5 Transparency

11, Z-index: Hierarchical order, the higher the value, the higher the upper

12, Overflow:hidden (see picture in the upper left corner) auto (will add scroll bar)

13, Hover:
The following CSS properties take effect when you move the mouse over the current tab (change to a different color). ）
hover{
Background-color:blue;
}

14, Background-image:url (' image/4.gif '); # default, div big, picture repeat visit
Background-repeat:repeat-y;no-repeat no repetition, x transverse repetition, y longitudinal repetition
Background-position-x:
Background-position-y: Move the big picture up or down to get a small picture inside

CSS Action notes