The fifth chapter of HTML

Fifth chapter CSS Beautification page elements

1. use CSS to beautify the meaning of Web page text:

① effectively delivers page information.

② use CSS to beautify the page text, make the page beautiful, beautiful, to attract users.

③ can be a good way to highlight the theme of the page, so that users can see the main content of the page at the first glance.

The ④ has a good user experience.

2.<span> Tags:

<span> tags are used to combine the elements of an expert in an HTML document, which does not have a fixed format, and it only produces visual changes when the CSS style is applied to it.

3. font style:

Property name	Meaning	Example	Note
Font-family	Set Font type	font-family: " Official script ";	When you need to set both English and Chinese fonts, be sure to set the English font before the Chinese font, separated by commas in the middle
Font-size	Set Font size	font-size:12px;	Unit: PX;
Font-style	Set font style	Font-style:italic;	Normal ( default value) , italic, oblique Italic and Oblique very similar effect
Font-weight	Set the weight of a font	Font-weight:bold;	Normal (400)	Default value, defining the standard font
			Bold (700)	Bold font
			Bolder	More coarse fonts
			Lighter	Finer fonts
			- , the , the , the , A , the , the , the , the	defined by thin to coarse, equivalent to normal,700 equal to Bold
Font ( abbreviated)	Set all font properties in a declaration	font:italic Bold 36px " song body ";	Order: Style, weight, size, type (Big category)

4. use CSS to compose Web page text:

Property	Meaning	Example	Note
Color	Set Text color	Color: #00C;	text-align Properties
			Left	(default) arranges text to the left
Text-align	Set element Horizontal Alignment	Text-align:right;	Right	Arrange the text to the right
			Center	Arrange the text in the middle
			Justify	To achieve justified justification of both sides of the effect
Text-indent	Set indent for first line of text	Text-indent:20em;	text-decoration Common Values
Line-height	Set the line height of the text	line-height:25px;	None	standard text defined by (default value)
			Underline	Set the underline of text
Text-decoration	Set the decoration of text	Text-decoration:underline;	Overline	Set the underline of text
			Line-through	Set Strikethrough for text
			Blink	Set text flicker (only available in Firefox)

5. Vertical alignment:

Sets the vertical alignment by Vertical-align in CSS. However, in the current browser, you can only use the alignment properties for the objects in the table cells, and for general labels, such as

6. Hyperlink Pseudo-class:

Pseudo-Class name	Meaning	Example
A:link	Hyperlink style when Access is not clicked	A:link{color: #9ef5f9;}
a:visited	Click Hyperlink style after Access	a:visited {color: #333; Text-decoration:none; ( no underline) }
A:hover	The hyperlink style on which the mouse hovers	A:hover{color: #ff7300;
A:active	Mouse click a hyperlink style that is not released	a:active {color: #999; Text-decoration:underline; ( underlined) }
Order:	A:link–> a:visited, A:hover, a:active ( front and rear floating release)

7.Cursor Properties Common values:

Value	Description	Legend
Default	Default cursor
Pointer	Pointers to hyperlinks
Wait	Indicates that the program is busy
Help	Indicates the available Help
Text	Indicate text
Crosshair	Mouse appears in a cross-shaped

8.<div> Tags:

< div> tags can split HTML documents into separate, different parts, so <div> tags are used for page layouts. The <div> tag is the same as the <p> tag. When you use the <div> layout page, it can nest <div>, and you can also nest lists, paragraphs, and other page elements.

CSS controls the two properties of a page element in
Wide	Width
High	Height

9. Page Background properties:

Background properties
Background-color	Background color value: Hexadecimal method representation
Background-image	Repeat	Tile horizontally and vertically in two directions
	No-repeat	Uneven, that is, the background image is displayed only once
	Repeat-x	Tile in horizontal direction only
	Repeat-y	Tile only in vertical direction
Background-position	Xpos Ypos	Represented by a pixel value, the first value represents the horizontal position, and the second value represents a vertical position	30px 40px forward offset, image moves down and to the right
	X Y%	Use percentages to indicate background position	30% 50% : Centered vertically, Horizontal offset 30%
	X , Y direction keywords	use keywords to indicate the position of the background, the keywords in the horizontal direction are left , center , right vertical keywords have top , center , bottom	use horizontal and vertical keywords for free combination, example: right  Top ( appears in the upper-right corner) Ieft Bottom ( the lower corner appears) Top ( appears horizontally centered)
Background ( abbreviated)	Color picture location positioning is tiled Example: Backgrond: #c00 url (image/arrow.gif) 205px 10px no-repeat

Ten List Style:

List-style-type	Value	Description		Syntax examples	diagram example
	None	No marker symbol		List-style-type:none;	Brushing Wash
	Disc	Solid Circle, default type		List-style-type:disc;	● Brushing ● Wash Face
	Circle	Hollow Circle		List-style-type:circle;	0 Brushing 0 Wash Face
	Square	Solid Square		List-style-type:square;	■ Brushing ■ Wash Face
	decimal	Number		list-style-type:decimal	1 . Brushing 2 . wash face
List-style-image	list-style-position The List-style-image property is a tag that uses the image to replace the list when it is set after List-style-type property will not work, only image markers are displayed on the page			li{ List-style-image:url (Image/arrow.gif) List-style-type:circle; }
List-style-position	Inside		Mark item markers are placed within text, and surround text is aligned according to markers
	Outside		is the default value, which keeps the tag on the left side of the text, the list item marker is placed outside the text, and the wrapping text is not aligned according to the tag
List-style ( abbreviated)	List-style:circle outsise URL (image/arrow.gif);

The fifth chapter of HTML