The main instruction of applying CSS control text in Web page making

Source: Internet
Author: User
Tags inheritance lowercase relative
css| Control | Web page the main role of CSS 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.

CSS directives of the 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 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> absolute size, available parameters from small to large seven respectively
Xx-small, X-small, small, medium, large, X-large, Xx-large
<relative-size> relative size, 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 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: <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" >

text-quality CSS directives

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
<number> multiplying the element font size by that number is Liegau
<length> set the length, refer to the first chapter of the basic units of the relevant instructions
<percentage> percentage, relative 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
<percentage> reference element itself column height, with the parent element baseline as the base for 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
<length> to increase the length of the interval, 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 based on parent element width
Preset values: 0
Inheritance: Have

Generic example: DIV {text-indent:3pt}
Coaxial Example: <div style= "text-indent:3pt" >

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.