CSS Application Basics Tutorial (5) character

css| Basic Tutorials

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: <family-name> 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 values: Normal Ordinary words 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 Font weight support: IE3, IE4, NC4 Applicable: All elements Possible values: Normal Ordinary words Bold Bold Word Bolder Slightly thicker relative to the parent element Lighter Slightly finer relative to the parent element 100,200,300, 400,500,600, 700,800,900. Numbers from small to large represent 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> Absolute size, available parameters from small to large seven items respectively Xx-small, X-small, small, medium, large, X-large, Xx-large <relative-size> Relative size, the available parameters are larger, smaller two items Base on parent element font size <lenght> Length units, please refer to the first chapter of the basic units of the relevant instructions <percentage> 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 values: Normal Ordinary words Small-caps Convert 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: <font-style> Set font style <font-variant> Set Text conversion <font-weight> Set Font weight <font-size/line-height> Set Text size and Liegau (please refer to the Set Text column high section) <font-family> 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 column high support: IE3, IE4, NC4 Applicable: All elements Possible values: Normal Normal column height, depending on the font change reasonable height, depending on the browser <number> Multiply the element font size by the number that is Liegau <length> Set the length, please refer to the first chapter of the basic units of the relevant instructions <percentage> 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 the Central Right Right, right. Left To the left Justify Right and left 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 Top of the top element of the same column Bottom Bottom of the lowest element of the same column Baseline to the bottom line Middle to the Central Sub Placing an element in subscript Super Placing an element on the superscript Text-top To the top of the text Text-bottom To the bottom of the text <percentage> 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 Ordinary words 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 Ordinary words 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 Use browser presets without changing the letter spacing <length> 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> Length units, please refer to the first chapter of the basic units of the relevant instructions <percentage> 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" >