Getting Started with HTML-4

Getting Started with HTML-4

A. Text style:

1.text-align: (Horizontal alignment)

left ( center ) Centre ( right )

2.text-indent: ( indent )

Unit: EM ( character ) px ( pixels )

3.line-height: ( row height )

4.cursor: ( cursor )

Pointer ( hand-type pointer ) wait ( wait )

help text ( text cursor )

Two Border Style: ( border)

1.top ( up ) Bottom ( bottom ) left ( right )

2.width ( line width )

3.style:solid ( solid line ) dashed ( point slip line ) dotted ( point line )

4.color ( color )

Note: The composition style Chinese bit property (　　 Top,bottom, etc. ) directly behind the border !

Three Line Elements and block Element

• Block elements:

1. Exclusive Line

2. Setting width and height is useful

• Line element:

1. The row element is displayed next to the previous element, and no exclusive row

2. Setting the width height is not used

• Row & Block elements can be converted to each other

Display:block turning into block elements

Display:inline to the rows of elements

Display:inline-block The block element into a row element, but with the feature of the Block element (can be set to a wide height)

Four. elf Technology (CSS spirit)

1.background-image

2.background-color

3.background-position ( location )

Left center Right

Top center Bottom

4.background-repeat: ( tiling mode )

No-repeat ( uneven ) repeat-x ( horizontal tile ) repeat-y ( vertical tile )

5.background-attachment: ( fixed )

6.background composition Style

　　　　Background:url ("./img/1.jpg") no-repeat Center top fixed;

7. Set the width height of the container to the size of the target image ( Width & Height )

8. Adjust the Background-position coordinate value

Five. Box Model

1.padding: The contents of the box are within the distance of the box and can be easily understood as "div"

padding:20px; (The distance from the content to the four-week frame is 20px)

padding-top:10px; (The distance from the content to the top border is 10px)

padding-right:20px; ( the distance from the content to the right border is 20px)

padding-bottom:30px; (The distance from the content to the bottom border is 30px)

padding-left:40px; ( the distance from the content to the left border is 40px)

　　　　padding:10px 20px; (The distance between the top and bottom borders is 10px, and the distance to the left and Right boxes is 20px)

padding:10px 20px 30px; (The distance from the content to the top border is 10px, the distance to the left and right borders are 20px, and the distance to the bottom border is 30px)

2.margin: The Distance between box & box

The Azimuth property, like padding, defaults to four sides when no (top ) Azimuth property is set

Getting Started with HTML-4