How to use CSS to set text styles in HTML __html

one. Length Unit

1. Relative type

A PX (PIEXL)

pixels, which represent different lengths depending on the resolution of the display device, are relative types. For example, a picture with a width of 100px is larger than the 1024x768 resolution in 800x600 resolution. Because 100px represents a different length in the two resolution.

B Em

This is set to the height of the current character as the unit. such as H1{margin:2em}, will be displayed as the current character twice times the height. EM as a scale unit is based on the font-size attribute, if there is no font-size attribute, the browser default character height as a reference.

2. Absolute type

Absolutely means the same length, regardless of the resolution of the display device.

Scale Unit Name	Description
In (inches)	is not an international standard unit, rarely used
CM (cm)	International standard unit, less used
MM (mm)	International standard unit, less used
PT (points)	Most basic display units, less used
PC (Printing unit)	Applied in the printing industry, 1pc=12pt

Ps: You can see that the use of CSS in the process of relative type length units used more, and the absolute type is less used.

two. Color Definition

In the HTML page, the color unification uses the RGB pattern to display, is commonly what people say "the Red Green Blue" Three primary colors mode, each kind of color is composed by the different proportion of three kinds of colors, each color's proportion divides into the 0~255 file. Red Green Blue Three components are set to 255 is white, such as RGB (100%,100%,100%) and #ffffff are white. (FF is 16 in the system of 255)

The text color in CSS is set by the Color property, as shown in the following example:

H3{color:bule;}

H3{color: #0000ff;}

H3{color: #00f;}

H3{color:rgb (0,0,255);}

H3{color:rgb (0%,0%,100%);}

The 1th is to use the English name of the color as the property value.

The 2nd type is the most commonly used 6-bit hexadecimal numeric representation.

The 3rd is the 2nd way of shorthand.

The 4th is to give the decimal value of 3 color components of red, green and blue respectively.

The 5th is the percentage of the red, green and blue 3 color components given respectively.

three. Set the font for text

Here we first prepare an HTML page, if you are not convenient can download my this 4-3.html

Then add the following code to its head:

<style type= "Text/css" >

h1{

Font-family: Bold;

}

p{

Font-family:arial, "Times New Roman",;

}

</style>

The above statement declares that the H1 font in the HTML page is in bold, and the text paragraph declares two fonts, the Arial font and the Times New Roman font, respectively. The implication is to tell the browser to look for the Arial font in the visitor's computer, and if there is no Arial font, look for the Times New Roman font and, if not both, use the browser default font to display.

The Font-family property can declare multiple fonts at the same time, and the fonts are separated by commas. Other font names will be preceded by a space, such as the "Times New Roman" font, when you want to enclose it in double quotes, is the browser know that this is a font name, in English quotes.

Ps: Many designers like a variety of fonts, but many of these fonts will not be installed, so be sure to set multiple alternative fonts, to avoid the browser directly replace the default font. The most direct way is to use the parts of uncommon fonts, using graphics software to produce the results of the picture, and then loaded into the page.

Four. Set the italic effect of a font

The slant of the text is not really to pull the font to achieve, italic font is a separate font, corresponding to the operating system of a certain font file.

Strictly speaking, in English, the tilt of the font has the following two kinds:

1.italic, that is, the Italian body, we usually say the tilt refers to the "Italian body", we see a variety of word processing software on the Tilt button is an i-letter, this is the reason.

2.oblique, the real tilt, is the effect of tilting a letter to the right of a certain angle. The Windows operating system does not implement the oblique font, just looking for a font close to it to indicate.

The Font-style property in the CSS is used to control the tilt of the font, which can be set to the normal, Italian, italic three styles, as shown in the following example:

Font-style:normal;

Font-style:italic;

Font-style:oblique;

Italic and oblique are not distinguishable on windows, and they are displayed in italic mode, not the browser's problem, but the operating system is not perfect.

Ps: For Chinese fonts, there is no such a lot of information. In addition, the Chinese font tilt effect is not good-looking, so the page is rarely used in Chinese font tilt effect.

Five. Set text bold effects

Use the <b>, or <strong> to make text bold in HTML, use the Font-weight property in CSS to control the thickness of the text, and you can divide the thickness of the text into detail. More importantly, CSS can also be bold text into the normal weight.

the setting value of the Font-weight property

Setting values	Description
Normal	Normal weight
Bold	Bold body
Bolder	Bold body
Lighter	It's thinner than normal weight.
100-900	A total of 9 levels 100,200 ... 900, bigger and thicker.

In fact, most operating systems and browsers can only set both "normal" and "bold" weights, examples are as follows:

Font-weight:normal;

Font-weight:bold;

PS: in HTML <b> and <strong> performance is the same, but <b> no semantic,<strong> to "highlight", "strengthen" the meaning, most search engines are on the Web page strong attention. But the designer on the one hand want to attract attention on the one hand and do not want to show in bold. At this point, you can use the <strong> "Font-weight:normal", so that it can return to normal thickness, without affecting the semantic effect.

Six. English letter Case Conversion

The English conversion is controlled by the attribute Text-transform property with three values:

Text-transform:capitalize; /* The first letter of the word * *

Text-transform:uppercase; /* ALL CAPS/*

Text-transform:lowerocase; /* All lowercase */

Examples are as follows:

<title> Letter Case Conversion </title>

<style type= "Text/css" >

#p1 {

Text-transform:capitalize;

}

#p2 {

Text-transform:uppercase;

}

#p3 {

Text-transform:lowercase;

}

</style>

<body>

<p id= "P1″>hello all World </p>

<p id= "P2″>hello all world</p>

<p id= "P3″>hello all world</p>

</body>

Browser results:

We can see that if you set text-transform:capitalize, the word that turns out to be lowercase is capitalized, and all the words that have already been capitalized, such as all, remain capitalized.

Seven. Control the size of text

CSS through Font-size control the size of the text, the most commonly used units are PX and EM. The length that Lem represents is the standard width of the letter M. You can also use a percentage as a unit: "font-size:200%" indicates that the text is twice times the size of the original.

Eight. The decorative effect of the text

In the CSS by the Text-decoration property for text underline, delete line and top line and other decorative effects.

Text-decoration property setting Value

Setting values	Description
None	Normal display
Underline	Underline text
Line-through	Add Strikethrough to Text
Overline	Add top line to text
Blink	Text blinking, only partial browser support

You can set multiple property values. Example:

Text-decoration:underline overline;

Note: Do not enter the text-decoration into font-decroation

Nine. Set the first line indent for a paragraph

The first line indent is controlled by the Text-indent property, and the first line of the Chinese paragraph indents two text blanks, example:

Text-indent:2em;

If you want the first row to be not indented, but rather to protrude a certain distance, also known as hanging indent, sample:

Padding-left:2em;

Text-indent:-2em;

Make the entire paragraph 2em to the right, and then set the Text-indent property to " -2em", which will protrude two words.

10. Set word spacing

Letter-spacing control of letter spacing;

Word-spacing control of Word spacing;

For Chinese, to adjust the distance between Chinese characters, you need to set the Letter-spacing property instead of the word-spacing.

11. Set the text line height inside the paragraph

CSS controls row heights with the Line-height property:

Setting of the Line-height property

Setting values	Description
Length	Values, you can use the scale units described earlier
Multiple	A multiple of the set value of the Font-size
Percentage	Percentage relative to Font-size

Row height is the way to set the distance between rows and lines, so to understand.

12. Set the distance between paragraphs

CSS uses margin to control the distance between paragraphs, margin called "outer margin." Example:

margin:1px,2px,3px,4px; Top right left margin 1234px in sequence

margin:1px,2px; The upper and lower margins are 1px and the left and right margins are 2px.

Note: The distance between two paragraphs = the value in which the outer margin is larger

Inserting a picture in a Shisan page can be a landscaping function. There is only one marker for inserting a picture, that is the tag. When inserting a picture, it is not enough to use only the tag, which needs to be done with other properties, as shown in the following table.

Property	Describe
Src	source files for images
Alt	Hint text
Width,height	width, height
Border	Border
Vspace	Vertical Spacing
Hspace	Horizontal Spacing
Align	Arranged
Dynsrc	Set AVI files to play
Loop	Set AVI file loop playback times
Loopdelay	Set AVI file Loop playback delay
Start	Set AVI file playback mode
Lowsrc	Set low resolution picture
Usemap	Image map

13. Insert Picture

Inserting a picture in a page can be a landscaping function. There is only one marker for inserting a picture, that is the tag. When inserting a picture, it is not enough to use only the tag, which needs to be done with other properties, as shown in the following table.

Property	Describe
Src	source files for images
Alt	Hint text
Width,height	width, height
Border	Border
Vspace	Vertical Spacing
Hspace	Horizontal Spacing
Align	Arranged
Dynsrc	Set AVI files to play
Loop	Set AVI file loop playback times
Loopdelay	Set AVI file Loop playback delay
Start	Set AVI file playback mode
Lowsrc	Set low resolution picture
Usemap	Image map

14. Image's source file properties src

With the SRC attribute to specify the path of the image source file, you can complete the insertion of the image.

Low-resolution source file properties for images Lowsrc

If the user's browser is slow, the Web page designer can insert a low-resolution image into the page for display.

15. Image hint Text attribute alt

Hint text has two effects. When browsing the web, if the image download is complete, the mouse is placed on the image, the mouse will appear next to the text prompts. In other words, when the mouse points to the top of the image, wait a moment, you can appear the image of the hint text, which is used to describe or describe the image. The second effect is that if the image is not planted, the prompt text is displayed in the position of the image.

15. Control the horizontal position of the text

CSS uses the Text-align property to control the horizontal position of the text, as shown in the following table:

the setting value of the Text-align property

Setting values	Description
Left	Left-aligned, also browser-default
Right	Align Right
Center	Center Alignment
Justify	Justify justification