CSS Style Learning (II)

(A) element type

    1) block-level elements
    common block elements have div, p, h {n} , ul, ol, li like.
    Features:

One or more block elements exclusive entire row.
Always starts a new row.
The default width is the width of the parent container label.
You may be provided inside and outside the margin width, and height.
Other block elements can be nested within the element or row.

    2) the rows of elements
    within the element has a common line span, a, strong, em, del, ins
    features:

And other inline elements can be on the same line.
Inline elements can not set the width and height, but the margin and padding may be provided in the horizontal direction.
Width is the width of the content itself occupied.
Elements can be nested within the other rows (blocks of text as labels which can not be put h1 other block elements, a label which can not put a label).

    3) within the row block elements
    common row within the block elements img, input, td
    features:

And other elements can be on a single line, but there will be a blank gap between the two elements.
You can set high and wide margins inside and outside, but you can not remove the blank.
The default width is the content itself

4) interchangeable

Pronation trip elements display: inline
Converted into block-level elements display: block
Dump block elements within the row display: inline-block

(Ii) CSS background

Image-background : url () set the background picture by picture address
Color-background : solid color to set the background
REPEAT-background : REPEAT-X (tiled horizontally), repeat-y (vertical tile), no-repeat (Unique), REPEAT (default, both the horizontal and vertical tile).
background-position : [top | bottom | px值] [left | center | right | px值]
Attachment-background : [ Fixed | the Scroll ] Fixed is fixed on that, scroll scrolls with the scroll bar.
Write a system of grammar: background: url Color REPEAT Attachment position
background-size : [cover | contain | px值]
- BACKGROUND The label cover is stretched width and height of the container
- contain a hidden part of the background picture according to the original size of the display, if the size is not enough, can not be displayed

(Iii) text-shadow text shadow

<style>
	body {
	  background-color: #ccc;
	}
	div {
	  color:#ccc;
	  font: 700 80px "微软雅黑";
	}
	div:first-child {
	  /* text-shadow：水平位置 垂直位置 模糊距离 阴影颜色; */
	  text-shadow: 1px 1px 1px #000 ,-1px -1px 1px #fff;
	}
	div:last-child {
	  /* text-shadow：水平位置 垂直位置 模糊距离 阴影颜色; */
	  text-shadow: -1px -1px 1px #000 ,1px 1px 1px #fff ;
	}
</style>

Achieve results: Here Insert Picture Description

(Iv) text-decoration text decoration

text-decoration:[underline | none | overline | line-through ]

<style>
    /* 样式为空 */
    a:nth-child(1){
        text-decoration: none;
    }
    /* 下划线 a标签的默认样式 */
    a:nth-child(2){
        text-decoration: underline;
    }
    /* 上横线 */
    a:nth-child(3){
        text-decoration: overline;
    }
    /* 删除线 */
    a:nth-child(4){
        text-decoration: line-through;
    }
</style>