s1/use HTML language and CSS to develop commercial sites/05-css beautify web pages

<span> tags

In HTML,,<span> tags are used to combine inline elements in an HTML document, and it has no fixed format representation, and only makes visual changes when the CSS style is applied to it.

<span> tags can add styles to some of the text in a <p> tag, and do not change the direction in which the text is displayed. He wouldn't have a rectangular area for each pair of labels, like the <p> tag and the title tag.

Font style

Common font Properties

Property name	Meaning	Example
Font-family	Set Font type	Font-family: "Official script";
Font-size	Set Font size	font-size:12px;
Font-style	Set font style	Font-style:italic;
Font-weight	Set the weight of a font	Font-weight:bold;
Font	Set all font properties in a declaration	Font:italic Bold 36px "song Body";

1. Font type

Font types in CSS are controlled by the Font-family property. For example, to display the English and Chinese characters in all <p> tags in HTML using Verdana and italics respectively, you can define the font style of the elements in the <p> tag through the tag Selector, with the CSS settings shown below.

P{font-family:verdana, "in italics";}

This code declares the font style of the <p> tag in the HTML page, and declares two fonts, Verdana and italics, so that the browser will first display the text in English font, if the English font does not contain characters (usually English fonts do not support Chinese), From the back of the Chinese font to find, so that the English use of Verdana, Chinese use of different effects of italics.

The premise of this setting is to determine that there are Verdana, italics, and both fonts in the computer. If there is no Verdana on the computer, both Chinese and English will be displayed in italics, and if there is no italic in the computer, then both Chinese and English will be displayed as a default font for the computer. Therefore, in the setting of Chinese and English different font display, as far as possible to set up the computer fonts, so that the Chinese and English can display different font effects.

The Font-family property allows you to declare multiple fonts at the same time, separating the fonts with commas in English input mode. In addition, some fonts will appear in the middle of a space, such as Times New Roman font, or Chinese, such as italics, then need to enclose it in double quotation marks, is the browser know that this is a font name. As follows:

Body{font-family:times, "Times New Roman", "italics";}

Attention:

/1, when you need to set the English font and yellow total text hint, be sure to set the English font before the Chinese font, if the Chinese font is set before the English font, the English font settings will not work.

/2, in the actual web page development, the text in the Web page if there is no special requirements, usually set to "song Body"; the song body is the default font in your computer, and if you need other, more flashy fonts, use a picture instead.

2. Font size

In the Web page, the size of the text to highlight the main body is a very common method, CSS is through the Font-size property to control the size of the text, the usual unit is px (pixels). Setting the font size in CSS There are other units, such as in, CM, MM, PT, PC, and sometimes a percentage (%) to set the font size, but these units are not commonly used in actual Web page productions.

3. Font style

In CSS, using the Font-style property to set the style of the font, the Font-style attribute has 3 values, the normal, italic, and oblique, respectively, the three values tell the browser to display the standard font style, italic font style, italic font style, The default value for the Font-style property is normal. The effects of italic and oblique appear very similar in the page.

4, the weight of the font

CSS uses the Font-weight property to control the weight of the text, and it is important that the CSS turn the bold text to its normal thickness.

The value of the Font-weight property

Value	Description
Normal	Default value, defining the standard font
Bold	Bold font
Bolder	More coarse fonts
Lighter	Finer fonts
100, 200, 300, 400, 500, 600, 700, 800, 900	Defines a thin-to-thick font, 400 equivalent to normal,700 equivalent to bold

5. Font properties

Several of the font properties described above are used separately, and in fact, in CSS, if you set multiple font properties on the same part of the font, you need to use the Font property to declare all properties of the font at once using the Font property, separating each property with English spaces. However, it is important to note that the order of these font attributes is font style → font weight → font size → font type, as follows.

P span{font:oblique Bold 12px "italic";}

Use CSS to compose Web page text

Text properties

Property	Meaning	Example
Color	Set Text color	Color: #00C;
Text-align	Set element Horizontal Alignment	Text-align:right;
Text-indent	Set indent for first line of text	text-indent:20px;
Line-height	Set the line height of the text	line-height:25px;
Text-decoration	Set the decoration of text	Text-decoration:underline;

1. Text color

In the HTML page, colors are uniformly used in RGB format, which is commonly referred to as the "Red Green Blue" three-color model. In this 16-binary representation, the first two represent the red component, the middle two bits represent the green component, and the last two represent the blue component. Some colors are 6 bits, some are 3 bits, why? A 3-bit representation of a color value is a shorthand for the value of a color attribute, and when the 6-bit color value is the same as the adjacent number 22, 22 abbreviations are assumed, such as "#336699" can be abbreviated as "#369", "#EEFF66" can be shortened to "#EF6".

2, the horizontal alignment method

In CSS, horizontal alignment of text is controlled by the Text-align property, which allows you to set text left, center, right, and justify.

Common values for the Text-align property

Value	Description
Left	Arranges text to the left, default value, determined by the browser
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

3, the first line indentation and row height

Set the row height through the Line-height property in the CSS, and set the first line indent through the Text-indent property.

The value of the Line-height property is the same as the Font-size property value, which is also represented by a number, and the unit is PX. In addition to using pixels to represent row heights, it is possible to add no units, in multiples, where the row height is a multiple of the font size. For example, the font size in the,<p> tag is set to 12px, and its row height is set to "line-height:1.5;", then its row height is converted to pixels 18px. This method of not adding any units is not commonly used in actual Web page production, and the method of using pixels is usually used to denote row heights.

In CSS, text-indent directly indents the distance as a number, in units of EM or px. However, for Chinese web pages, EM is used more, usually set to "2EM", which means indenting two characters, such as P{text-indent:2em;}.

The unit of the indent distance is the relative unit, which represents the length equal to the multiple of the characters in the bank. Regardless of the size of the font changes, he will be based on the size of the character, automatically adapt, empty out the set of characters in multiples.

4. Text Decoration

In CSS, text decorations are set through the Text-decoration property.

Text-decoration Common values

Value	Description
None	Default value, defined standard text
Underline	Set the underline of text
Overline	Set the underline of text
Line-through	Set Strikethrough for text
Blink	Sets the text flicker. This value is only valid in Firefox browser and is not valid in IE

5. Vertical Alignment Method

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

In real-world web pages, the Vertical-align property is typically used to set the center alignment of the text to the picture, at which point the value is middle.

Using CSS to set up hyperlinks

1. Hyperlink Pseudo-Class

Note: To prevent a picture from appearing with a hyperlink after a border appears, there will usually be a CSS file at the beginning of the add "imgh{border:0px;}" To eliminate the borders that appear after a picture is added to a hyperlink.

The different colors before and after the hyperlinks are clicked are the default pseudo-class styles for hyperlinks. The so-called pseudo-class, is not based on the name, attributes, content, according to the label in a certain behavior or state of the characteristics to decorate the style, that is, the hyperlink will be based on the user did not click before access, hover over the hyperlink, click Not released, click Access after the 4 states display a different hyperlink style. The basic syntax for a pseudo-class style is "tag name: Pseudo-class name {declaration;}".

a:hover {color: #61E461;}

Tag name pseudo-class name declaration

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;}
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;}

Since the hyperlink pseudo-class has 4, is there a sequential difference when styling a hyperlink? Of course, in the CSS set pseudo-class order for a:link→a:visited→a:hover→a:active, if the first set "A:hover" and then Set "a:visited" in IE, "a:hover" will not work.

Now you want a question, if you set up 4 kinds of hyperlink style, then there are 4 kinds of hyperlink text style on the page, so it is not the same as the hyperlink style that people browse the web is common, the hyperlinks that people see when they are on the internet are the same as when they clicked before or after they clicked. Only when the mouse hover over the hyperlink style changes, why?

What you might think of is that "a:hover" sets a style, and the other 3 pseudo-classes set a style. Yes, this setting does make it possible to achieve the most common hyperlink settings on the Web, but it is not set up in real-world development. In the actual page development, only two kinds of hyperlinks are set, one is the hyperlink a tag selector style, and the other is the style of hovering the mouse over the hyperlink. as shown below.

......

<style type= "Text/css" >

img{border:0px;}

p{font-size:12px;}

a{

Color: #000;

Text-decoration:none;

}

a:hover{

Color: #B46210;

Text-decoration:underline;

}

</style>

<body>

<p><a href= "#" ></a></p>

<p><a href= "#" > Loulan Xinjiang Wild </a>&nbsp;&nbsp;<a href= "#" > Bleach-free thin-skinned walnut </a></p>

<P><SPAN>500GX2 Bag ￥48.8</span></p>

</body>

The page effect viewed in the browser, when the mouse hovers over the hyperlink is underlined, and the font color is #b46210, the mouse does not hover over the hyperlink without an underscore, and the font color is black.

A tag selector style means that the hyperlink is this style in any state, and then sets the A:hover hyperlink style, which indicates the style that is displayed when the mouse hovers over the hyperlink, which reduces the amount of code, the code looks at a glance, and the desired result is achieved.

Use CSS to set the mouse shape Xing

When you browse a Web page, you usually see the mouse pointer shape with arrows, hand shapes, and uppercase I, which are all kinds of mouse pointer styles that CSS sets with the Cursor property. The cursor property can be used in any selector to change the mouse pointer effect on various page elements.

Cursor Property common values

Value	Description	Sample Commentary
Default	Default cursor	Arrow
Pointer	Pointers to hyperlinks	Hand type
Wait	It's just that the program is busy	Hourglass
Help	Indicates the available Help	Arrows and question marks
Text	Indicate text	I in uppercase
Crosshair	Mouse appears in a cross-shaped	┼

Background style

1. Recognition <div> Labeling

<div> tags can be HTML documents split into separate, different parts, so the <div> tag is used for page layout. The <div> tag is the same as the <p> tag, and its syntax is as follows.

<div> Web content ......</div>

A pair of <div> tags that have no content and CSS styles, and a single line in Dreamweaver. Only after the use of the CSS CCTV, to control him, she can be the newspaper, the magazine section of the information block, the page layout, create a complex variety of page layouts. In addition, when you use the <div> layout page, it can nest <div>, and can also nest lists, paragraphs and other page elements.

A page layout using CSS controls <div> tags will be explained in a later section. This chapter first recognizes the use of CSS to control the width and height of page elements two properties, respectively, width and height. The values for both properties are expressed as numbers, in PX. For example, the ID name in the Settings page is the <div> width and height of the header, as shown in the code below.

#header {

width:200px;

height:280px;

}

2. Background properties

In CSS, the background includes the background color (background-color) and the background image (Background-image) in two ways.

/1/background Color

In CSS, you use the Background-color property to set the background color of page elements such as fonts, <div>, lists, and his value is represented in the same way as a color representation, but it is also a hexadecimal way of representing the background color value, but he has a special value-- Transparent, and transparent meaning, he is the default value of the Background-color property.

/2/background image

Not only can you set a background color for a page element in a Web page, you can also use an image as the background for an element, such as the background image setting for the entire page. CSS uses the Background-image property to set the background image of the page element.

When you set a background image in a Web page, it is usually used in conjunction with the background repetition (background-repeat) and background positioning (Background-position) two properties, which are described in detail below.

/1//background image

The way to set the background image using the Background-image property is Background-image:url (picture path);.

In the actual work, the picture path is usually written relative to the path; In addition, the background-image has a special value, that is, none, indicating that the background image is not displayed, but that this value is seldom used in real work.

/2//background Repeating mode

If Background-image is set only, the background image is automatically tiled horizontally and vertically in two directions by default. If you do not want the image to be tiled, or just want the image to be tiled in one direction, use the Background-repeat property to control that the property has 4 values to implement different tiling methods.

Repeat: Tile horizontally and vertically in two directions.

No-repeat: Uneven, that is, the background image is displayed only once.

Repeat-x: Tile horizontally only.

Repeat-y: Tiles are only vertically oriented.

In practice, repeat is typically used for small pictures to flatten the background of the entire page or to flatten the background of a piece of content in the page; No-repeat is usually used for small icons or only one background image to be displayed once; Repeat-x is typically used for navigating backgrounds, heading backgrounds Repeat-y is not commonly used in page making.

/3//background positioning

In CSS, use background-position to set the position of the image in the background. The background image defaults to displaying the image from the upper-left corner of the decorated page element, but you can also use the Background-position property to set the position where the background image appears, that is, a certain offset in the background. You can use specific values, percentages, and keywords 3 ways to represent the horizontal and vertical offsets.

Background-position property corresponding to the value

Value	Meaning	Example
Xpos Ypos	Using a numeric representation, the first value represents the horizontal position, and the second value represents the vertical position	(1) 0px 0px (default, indicates a background image from the upper left corner, no offset) (2) 30px 40px (forward offset, image down and right) (3) -50px-60px (reverse offset, image up and left)
X Y%	Use percentages to indicate the position of the background	30% 50% (center vertically, offset horizontally 30%)
X, y direction keywords	Use keywords to indicate the location of the background, the horizontal direction of the keywords have left, center, right, vertical keywords have top, center, bottom	Use horizontal and Vertical keywords for free combination, such as omit, and default to center. For example: Right top (appears in upper-left corner) Left bottom (appears in the lower right corner) Top (upper horizontal center position appears)

3. Background

As explained in the previous Font property in the CSS can be a combination of multiple attributes to implement shorthand, background style CSS properties can also be abbreviated, using the Background property shorthand background style.

The background color and background image of the navigation title are declared in the class title style above using 4 rules, and the following code is used with the background property shorthand.

. title{

font-size:18px;

Font-weight:bold;

Color: #FFF;

Text-indent:1em;

line-height:35px;

Background: #C00 URL (... /image/arrow-down.gif) 205px 10px no-repeat;

}

As you can see in the code above, using the Background property can reduce a lot of code and is very handy in late-stage CSS code maintenance, so we recommend using the Background property to set the background style.

Set Hyperlink background

Hyperlinks are the most basic elements of a Web page, any page jumps, and submissions are hyperlinked. In order to make hyperlinks more beautiful, the use of background color or background image in CSS to set the hyperlink background, often have a button background image, navigation menu hyperlinks, these are commonly used in the Web page background style.

List Style

The CSS list has 4 properties to set the list style, which is the following 4.

List-style-type,list-style-image,list-style-position,list-style.

1, List-style-type

The List-style-type property sets the type of the list item tag, and the commonly used property values are shown in the following table.

List-style-type common property values

Value	Description	Syntax examples	Illustration example
None	No marker symbol	List-style-type:none	Brushing Wash
Disc	Solid Circle, default type	List-style-type:disc;	Brushing Wash
Circle	Hollow Circle	List-style-type:circle;	0 brushing 0 Wash face
Square	Solid Square	List-style-type:square;	Brushing Wash
Decimal	Digital	List-style-type:decimal;	Brushing Wash

2, List-style-image

The List-style-image property is a marker that replaces the list item with an image, and when List-style-image is set, the List-style-type property does not work, and only the image marker is displayed on the page. However, in the actual web browsing, in order to prevent the individual browser may not support the List-style-image property, will set a List-style-type property in case the image is not available. For example, to set an image as an item tag in the list, the code looks like this.

li{

List-style-image:url (image/arrow-right.gif);

List-style-type:circle;

}

3, List-style-position

The List-style-position property sets where to place the list item tag, and he has two values, namely inside and outside. Inside indicates that the item tag is placed within the text and wraps around the text according to the tag; outside is the default, he 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 with the tag.

4, List-style

As with background properties, the set list style also has shorthand properties. The List-style shorthand property indicates that the properties of all lists are set in a declaration. Set the property value in List-style-type→list-style-position→list-style-image order. For example.

li{

List-style:cicle outside URL (image/arrow-right.gif);

}

When you use List-style to set a list style, you cannot set one of these values, and the properties that are not set use the default values. For example, "list-style:circle outside;" There is no image marker by default.

s1/use HTML language and CSS to develop commercial sites/05-css beautify web pages