05 using CSS to set font and text styles

Use CSS To set the font and text style:

1. define font type font-family

Usage:

Font-family:name;

Font-family:ncursive|fantasy|monospace|serif|sans-serif

Name indicates the font name, and you can specify multiple fonts, separated by spaces. Ranked in order of precedence. If the font name contains spaces, you should enclose it in parentheses ().

A font is a composite property, so-called composite attribute is the ability to set a variety of font properties, the use of the following:

font:font-style| | font-variant| | font-weight| | font-size| | line-height| | Font-family

Font:caption|icon|menu|message-box|small-caption|status-bar

Property values are separated by a space. Font The font size and font type should be set at least in the property, and must be placed behind, otherwise invalid. You can define font styles, font weights, capitalization, and row heights.

Traditionally, many Chinese web page fonts are defined as the type of the song, for the title or special information, if you need to use a special font, it is recommended that the image form to indirect expression. The reason is that the Chinese type is relatively small, the general font type is less, the font performance is weak, even if there are various art fonts, but its application scope is narrow.

The English font type is rich, the general font choice is big, the artistic expression is stronger. Traditionally, the headings are lined with sans-serif fonts, art fonts or handwriting, while the body of the Web page uses more serif fonts.

For English or other Latin fonts, CSS provides 5 common fonts.

(1) Serif: serif font.

(2) Sans-serif: Sans serif font.

(3) Cursive: cursive.

(4) Fantasy: singular font.

(5) monospace: equal width font.

The font list is delimited by commas, and the browser searches the user's computer for the installed font in the order of the font name, and once it encounters a font that matches the requirements, displays the page content in the font and stops the search, and if it does not match, continues the search until it is found. If all the fonts in the stylesheet are not installed, the browser will use its default font instead of displaying the contents of the page.

2. define the font size font-size

CSS uses the Font-size property to define the font size, which is as follows:

Font-size:xx-small|xsmall|small|medium|large|x-large|xx-large|smaller|length

where Xx-small (min), x-small (smaller), small (small), medium (normal), large (large), x-large (larger), Xx-large (maximum) represent absolute font sizes, these special values are adjusted according to the font of the object.

Large (increase) and smaller (decrease) these special values can be increased or scaled down according to the font size of the parent object, and calculated using proportional em units.

Length can be a percentage, or a value that consists of floating-point numbers and unit identifiers, but not negative values. The percentage value is calculated based on the size of the font in the parent object, which is the same as the EM unit calculation method.

in web design, common pixels (px ) and percent (% or EM ) as the font size unit.

CSS provides a number of units, which can be divided into two categories: absolute units and relative units.

Absolute units of the font defined by the big things fixed, the size of the display effect will not be affected by external factors. For example, in (inch), CM (centimeter), mm (millimeter), PT (point), PC (PICA). In addition, Xx-small, X-small, small, medium, large, x-large, xx-large These keywords are also absolute units.

The font size defined by the relative units is generally not fixed and will change according to the external environment. For example, the two keywords px, em, ex,%, larger, and smaller will be converted with the font size of the parent element as a reference.

In web design, web designers commonly used fonts with the units including pixels and percentages, then how to choose the appropriate font size units?

(1) The use of pixels is the right choice for layouts where the width of the Web page is fixed or the column width is fixed.

(2) for pages where the width of the page is not fixed or the column width is not fixed, using percentages or EM is the right choice. On the one hand, the client browser to adjust the font size, on the other hand, by setting the font size is em or percent, so that the font can adapt to changes in layout width.

3 . Define Font Color Color:color;

CSS uses the Color property to define the font color, which is used as follows:Color:color;

In CSS, the color of the uniform use of RGB format, that is, "red and yellow blue" three primary colors of the different proportions of various colors. such as RGB (100%,0%,0%), or in hexadecimal notation as #ff0000, which is red.

. p1{color:red;} /* Use color name */

. P2{color: #693333;} /* Use hex */

. P3{color:rgb (120,120,120);} /* Use rgb*/

. P4{color:rgb (0%,100%,50%);}

4. Define the font weight font-weight

CSS uses the Font-weight property to define the font weight, which is used as follows.

font-weight:normal|bold|bolder|lighter|100|200|300|400|500|600|700|800|900

The Font-weight property value is special, where the normal keyword represents the default value, which is the usual font, which is equivalent to a value of 400. The Bold keyword denotes bold, which is equivalent to a value of 700, or a font effect defined using the <b> tag. Bolder (thicker) and lighter (thinner) are relative to the normal font weight.

You can also set a value of 100,200,300,400,500,600,700,800,900, they represent the weight of the font, is a way to quantify the weight of the font, the larger the value is more coarse, the opposite is more thin.

For the Chinese web page design, generally only the bold and normal two attribute values can be used.

5. define italic font font-style

CSS uses the Font-style property to define the font skew effect, which uses the following.

Font-style:normal|italic|oblique

Where normal represents the default value, which is the normal font, italic represents italic. Italic and oblique two values can only be valid in Western text such as English.

6. define underline, strikethrough, and top dash text-decoration

CSS uses the Text-decoration property to define the font underline, strikethrough, and underline effects, which are used as follows.

text-decoration : none| | underline| | overline| | line-though| | Blink

None represents the default value, that is, no decorative font, underline for the underline effect, Line-though for the strikethrough effect, overline for the dash effect, and blink for the flicker effect. (Blink is not supported in IE6.) ）

If you need text that is not only underlined, but also underlined and strikethrough, you can assign the values of underline and overline to text-decoration at the same time, separated by a space.

7. Define the font case font-variant

CSS uses the Font-variant property to define the font case effect, which is used as follows.

Font-variant:normal|small-caps

Where normal represents the default value, which is the normal font, and small-caps represents a small, uppercase font.

Note: The font-variant only supports English-speaking western characters, and Chinese fonts have no case-sensitive effect. If you set a small uppercase font, but the font does not find the original small lowercase font, the browser simulates one. For example, you can replace lowercase letters with abbreviated uppercase letters by using a regular font.

CSS also defines a Text-transform property, which also defines the font capitalization effect. However, this property primarily defines the word case style, which is used in the following format.

Text-transform : None|capitalize|uppercase|lowercase

Where none represents the default value, no conversion occurs; Capitalize means that the first letter of each word is converted to uppercase, the rest is not converted, and uppercase means that all the letters are converted to uppercase letters, lowercase means that all the letters are converted to lowercase letters.

In IE and FF will find: IE browser think as long as the word, the first letter to uppercase, and the FF browser think only words through the space interval, can be called independent meaning of the word, so a few words together even if a word.

8. Define text alignment text-align

CSS uses the Text-align property to define the horizontal alignment of the text, which is used as follows.

Text-align:left|right|center|justify

The value of this property includes four: where left is the default value, right is aligned, and center is center aligned; justify is justified.

Text-align is a block-level attribute that can only be used in identifiers such as <div><p><ul>

in CSS , the method to center the element is usually using the margin attribute that margin-left the element and Margin-right property is set to Auto . In a real-world application, we can set the Text-align property of its parent element to center. (IE6 The following versions are required) It is important to note that you must specify the width and height for the centered element.

9. Define the vertical alignment vertical-align

CSS uses the Vertical-align property to define the vertical alignment of text, which is used in the following way:

vertical-align : Auto|baseline|sub|super|top|text-top|middle|bottom|lengh

Where the Auto property value aligns the object content according to the value of the Layout-flow property, baseline represents the default value, which indicates that the object content that supports the valign attribute is aligned with the baseline, and the sub represents the subscript for vertical aligned text; Super represents the superscript of the aligned text. Top indicates that the object content that supports the valign attribute is aligned with the top of the object, Text-top aligns the object text that supports the valign attribute with the top of the object, and middle aligns the object content that supports the valign attribute with the middle of the object ; Text-bottom aligns the object text that supports the valign attribute with the top of the object; length is a value or percentage that consists of a floating-point number and a unit identifier, can be negative, defines the offset from the baseline, the baseline is 0 for the value, and 0% for the percentage.

The Vertical-align property does not support block-level element alignment and is only valid if block-level elements are displayed as cells.

Ten. define word spacing and line spacing letter-spacing and word-spacing

CSS uses the letter-spacing property to define child spacing and to define word spacing using the word-spacing attribute, which is a length value consisting of floating-point numbers and unit identifiers. It can be either an absolute value or a relative value, and the default value is normal, which indicates the default interval.

When you define word spacing, you adjust it as a space, and if multiple words are joined together, the word-spacing is treated as a single word, and multiple Chinese characters are considered different words, and the Word-spacing property is valid at this time.

For Chinese users, the Letter-spacing property is valid, and the Word-spacing property is not valid.

One by one . define line spacing line-height

Line spacing, which is the distance between the lines of the paragraph text. CSS uses the Line-height property to define the row height, which is used as follows.

Line-height : Normal|length

Where normal represents the default value. Typically 1.2em,length represents a percentage number, or a length value consisting of floating-point numbers and unit identifiers, which is allowed to be negative.

The line spacing value units are generally em or percentages, with little or no pixel usage.

When the Line-height property value is less than one word size, the upper and lower lines of text overlap.

The optimal setting range for general line spacing is 1.2~1.8em, and of course, it can be handled as needed. According to the principle: the larger the font, the smaller the line spacing.

For example: if the paragraph font size is 12px, the line spacing is set to 1.8em is appropriate, if the font size is 14px, the line spacing is 1.5~1.6em more appropriate, if the paragraph font size is 16~18px, the line spacing is set to 1.2em more appropriate. The default line spacing for general browsers is around 1.2em. For example, IE browser defaults to 19PX, (the default font size is 16px) is 1.18em, and the FF browser defaults to 1.12EM.

defining indentation text-indent

Use the Text-indent property in CSS to define the first-line indentation, which is used as follows.

text-indent : Length

Length represents a percentage number or a value of a number consisting of floating-point numbers and unit identifiers, which is allowed to be negative. It is recommended that when you set the indent unit, set the unit to EM, which represents a word spacing so that you can accurately determine the first line indent effect.

For example: TEXT-INDENT:2EM;

Use the Text-indent property to design the drape indent effect.

The Text-indent property can go negative, define the left padding, and prevent the negative indentation from causing the first line of text to extend outside the bounds of the paragraph.

05 using CSS to set font and text styles