Tenth: adding styles to Text

The contents of this chapter:

1. Select the Font method: Enter Font-family:name after the selector you want in the style sheet. For example: To change the font of the BODY element to Geneva code: Body{font-family:geneva;}. It is important to note that although the Font-family property is inherited, several elements do not inherit the parent element's font settings, which have the form's Select, textarea, input elements. However, you can force them to inherit the font settings of the parent element, code: Input,select,textarea{font-family:inherit;}

2. Specify an alternate font: The font list becomes the font stack and typically includes three fonts: the font you want to use, one or more alternate fonts, and a standard font that represents the genus. Each font is separated by commas. such as: Body{font-family:geneva,tahoma,sans-serif;}

3. Create Italic: Font-style:italic (create italic) or oblique (create italic text). Note: The italic is removed: Font-style:normal. The Font-style property is inherited.

4. Apply bold formatting: Enter: Font-weight:blod to make the text appear bold with an average coarse straight. or enter a multiple of 100 between 100~900, 400 for normal thickness, and 700 for bold. or enter: Bloder (thicker) or lighter (finer). Remove bold formatting: Font-weight:normal. The Font-weight property is inherited.

5. Set the font size: (1) Use pixels directly to specify the special font size to use. (2) Specify the size relative to the parent element text with percentages, EM, or REM. Algorithm using EM vs. percent number: The size of the font to be specified/the font size of the parent element = value. For example: Enter: font-size: Font size value.

6. Set the row height: The line height refers to the paragraph spacing, that is, the distance between the paragraphs. Input: Line-height:n. Here n is a number, which is multiplied by the font size of the element, resulting in the desired row height.

7. Set the font color: Enter: Color:colorname.

8. Setting the background: Modifies the background color of the text: background-color:colorname (color name) or transparent (indicates the background color allowed through the parent element). Use background image as background: Background-image:url (or none means no image is used). Repeat background Image: input: background-repeat:direction, here the direction can take four values: Repeat, Repeat-x, repeat-y, No-repeat. Controls whether the background image scrolls with the page: background-attachment:fixed (the background image is attached to the browser's window)/scroll (the background image moves when the Visitor Scrolls the page)/local (only when the visitor scrolls the element that contains the background image, The background image will not move). Specifies the position of the element background image: Background-position_x y_, where x and Y can be represented as absolute distances or percentages from the upper-left corner.

9. Control spacing: Specify word spacing: word-spacing:length The length here is a number with a unit, such as 0.4em or 5px. Specify the kerning: Letter-spacing:length, where length is a number with a unit, such as 0.4em or 5px.

10. Add indent: Text-indent:length The length here is a number with a unit, such as 1.5em or 18px.

11. For its text: input: Text-align:left (left-aligned)/right (right-aligned)/center (centered).

12. Modify the case of the text: The Text-transform property defines the case of the text for the style. Text-transform:capitalize let the first letter of each word capitalize, text-transform:uppercase all the letters uppercase, text-lowercase all the letters lowercase, text-transform: None lets the text remain the same.

13. Decorate text: Text-decoration:underline to add an underscore, or enter overline to add an underscore, or enter Line-through to add a strikethrough.

14. Set the blank attribute: White-space:pre (let the browser display all the spaces and carriage returns in the original text), nowrap (make sure all spaces continue to line), normal (white space is handled as normal).

Tenth: adding styles to Text