CSS Application Basics Tutorial: Text nature

The main role of C s in this chapter

This chapter is about text-related CSS directives. Usually a Web site is the most content is text, through these text-related CSS directives, you can make your Web page content beautifully formatted. This chapter will be divided into two parts for you, the first part is a font-style CSS directives to control the various styles of the text font; The second part introduces the text-nature of the CSS instructions to control the appearance of text paragraphs and display methods.

C s s instruction of font nature

font-family Set Text font

Support: IE3, IE4

Applicable: All elements

Possible values: Font name

Preset values: Depending on the browser

Inheritance: Have

Generic example: SPAN {family-name: "superscript italics"}

Coaxial Example:<span style= "Family-name: Standard italics" >

Font-style Set Font style

Support: IE3, IE4, NC4

Applicable: All elements

Possible value: normal normal word

Italic Italic character

Oblique Italic character

Preset value: normal

Inheritance: Have

Generic example: SPAN {font-style:italic}

Coaxial Example:<span style= "Font-style:italic" >

Font-weight Set the font weight

Support: IE3, IE4, NC4

Applicable: All elements

Possible value: normal normal word

Bold boldface character

Bolder is slightly thicker relative to the parent element

Lighter is slightly thinner relative to the parent element

100,200,300,

400,500,600,

700,800,900. The number from small to large represents strokes from thin to coarse

normal=400 bold=700

Preset value: normal

Inheritance: Have

Generic example: SPAN {Font-weight:bolder}

Coaxial Example:<span style= "Font-weight:bolder" >

Font-size Set Text Size

Support: IE3, IE4, NC4

Applicable: All elements

Possible values: Absolute size, available parameters from small to large seven respectively

Xx-small, X-small, small, medium, large, X-large, Xx-large

Relative size, the available parameters are larger, smaller two items

Base on parent element font size

Length units, please refer to the first chapter of the basic units of the relevant instructions

Percent, base on parent element font size

Preset value: Medium

Inheritance: Have

Generic example: SPAN {font-size:12pt}

Coaxial Example:<span style= "font-size:12pt" >

Font-variant Set Text conversion

Support: IE3, IE4, NC4

Applicable: All elements

Possible value: normal normal word

Small-caps converts lowercase text to uppercase

Preset value: normal

Inheritance: Have

Generic example: SPAN {font-variant:small-caps}

Coaxial Example:<span style= "Font-variant:small-caps" >

Font Integrated set Font nature

Support: IE3, IE4, NC4

Applicable: All elements

Possible values: Set font style

Set Text conversion

Set Font weight

Set Text size and Liegau (please refer to the Set Text column high section)

Set Text font

Preset values: None

Inheritance: Have

Generic example: SPAN {font:bolder small-caps 12pt/120% Arial}

Coaxial example:< SPAN style= "Font:bolder small-caps 12pt/120% Arial" >

Character of the C s s instruction

Line-height Set Liegau

Support: IE3, IE4, NC4

Applicable: All elements

Possible value: Normal normal column height, according to the font changes reasonable height, depending on the browser

Multiply the element font size by the number that is Liegau

Set the length, please refer to the first chapter of the basic units of the relevant instructions

Percent, proportional to element font size

Preset value: normal

Inheritance: Have

Generic example: DIV {line-height:120%}

Coaxial Example:<div style= "line-height:120%" >

Text-align set Text to

Support: IE3, IE4, NC4

Applicable: block elements

Possible values: Center to center

Right right.

Left Right

Justify left and right

Preset values: Depending on the browser

Inheritance: Have

Generic example: DIV {text-align:center}

Coaxial Example:<div style= "Text-align:center" >

Vertical-align Set Vertical Pair

Support: IE4

Applicable: Coaxial elements

Possible values: Top of top of same column highest element

Bottom the bottom of the lowest element of the same column

Baseline to the bottom line

Middle to the central

Sub places an element in subscript

Super puts elements on superscript

Text-top to the top of the text

Text-bottom to the bottom of the text

The reference element itself is high, and the parent element's bottom line is the base for the displacement

Preset value: Baseline

Inheritance: Have

Generic example: SPAN {vertical-align:sub}

Coaxial Example:<span style= "Vertical-align:sub" >

Text-decoration Set Text decoration

Support: IE3, IE4, NC4

Applicable: All elements

Possible values: none common word

Underline text plus bottom line

Overline text plus top line

Line-through text plus Strikethrough

Blink set Text Flashing

Preset values: None

Inheritance: Have

Generic example: SPAN {Text-decoration:blink}

Coaxial Example:<span style= "Text-decoration:blink" >

Text-transform Set Text conversion

Support: IE3, IE4, NC4

Applicable: All elements

Possible values: none common word

Capitalize converts a letter from an English word to uppercase

Uppercase convert all text to uppercase

Lowercase convert all text to lowercase

Preset values: None

Inheritance: Have

Generic example: SPAN {text-transform:uppercase}

Coaxial Example:<span style= "Text-transform:uppercase" >

Letter-spacing Set Letter Spacing

Support: IE4

Applicable: All elements

Possible values: Normal does not change the letter spacing, using browser presets

To increase the length of an extra interval, it can be negative

Preset value: normal

Inheritance: Have

Generic example: SPAN {letter-spacing:0.5pt}

Coaxial Example:<span style= "letter-spacing:0.5pt" >

Text-indent Set Text indent

Support: IE3, IE4, NC4

Applicable: block elements

Possible values: Length units, please refer to the first chapter of the basic units of the relevant instructions

Percent value as the base of the parent element width

Preset values: 0

Inheritance: Have

Generic example: DIV {text-indent:3pt}

Coaxial Example:<div style= "text-indent:3pt" >