Typically, the site creator decides which letters will be uppercase and which lowercase, based on spelling rules and their own preferences. However, the process of changing the case of characters can be automated using the property text-transform. This property can take four values:
- none - the text is written without changes;
- capitalize- each word will start with a capital character;
- lowercase - all characters become lowercase (lower case);
- upper case- all characters become capital (upper case).
For example, the following rule specifies that the H1 heading should be in capital letters:
H1 (text-transform: uppercase;)
It is convenient to set automatic character case change for abbreviations, element names, headings, and others. text elements, where you want to write in uppercase or lowercase characters.
Text decoration: text-decoration property
Property text-decoration allows you to set the text additional design. The values of this property are constants none, underline, overline, line-through and blink, which let you display normal text, draw a line above, below, or through text, or make text blink. An example of using different values of this property is shown in Figure 11.4.
Rice. 11.4.
The most common application of the property text-decoration is to change the default link underlining. For example, the following rule specifies that links should be underlined:
A:link (text-decoration: underline;)
Word spacing: word-spacing property
To set the spacing between words in text, use the word-spacing property. The value of this property can be set using keyword normal , which is the default and sets the standard spacing for the current font. To set the interval, in addition to the standard one, you can specify a value in any available CSS units, and the value can be negative.
So, the following rule increases the spacing between words in the H1 heading by 1em :
H1 (word-spacing: 1em;)
Text alignment: the text-align property
Alignment refers to placing the left or right edge of a block of text along an invisible vertical line. Used to align text. text property-align . Valid values of this property are left, right, center, and justify , which specify left, right, center, and justify alignment, respectively.
The following rule sets the center alignment of all elements contained within a DIV element:
DIV (text-align: center;)
Leading: the line-height property
Leading is the distance between baselines of closely spaced lines. Under normal circumstances, line spacing depends on the type and size of the font and is automatically determined by the browser. But this value can be changed using the line-height property. The default value of normal causes the browser to calculate line spacing automatically. Any number greater than zero is taken as a multiplier of the font size of the current text. It is also possible to use any length units accepted in CSS as values for this property. It is also allowed to use a percentage notation, in which case the font height is taken as 100%. Negative line spacing is not allowed.
Letter spacing: the letter-spacing property
The browser automatically selects character spacing based on font size and type. In some cases, it is necessary to correct the spacing between letters. The letter-spacing property is used to control letter spacing. Any CSS length units can be used as values for this property, but it is recommended to use relative units based on font size (em and ex). Unlike line spacing, the letter-spacing property allows a negative value, but in this case you need to make sure that the readability of the text is preserved.
The following rule increases the spacing between characters in the H1 header by 0.5em .
Module CSS text describes the CSS functions that control source-to-formatted translation and line-breaking. Various properties CSS provides control over case conversion, whitespace handling, hyphenation rules and text and line wrapping, alignment, spacing, and indentation.
The basic unit of text is a character. However, since writing systems are not always as simple as the basic English alphabet, what a character actually is depends on the context in which the term is used. For example, in the Korean writing system, each square representation of a syllable (e.g. 한 = han) can be considered a character. However, the square symbol does indeed consist of several letters, each representing a phoneme (e.g. ㅎ = h, ㅏ = a, ㄴ = n), and each of these can also be considered a symbol.
1. Text transformation: text-transform property
The text-transform property styles the text. It does not affect the underlying content and should not affect the content of a plain text copy and paste operation.
The property is inherited.
Syntax
text-transform: none; text-transform: capitalize; text-transform: uppercase; text-transform: lowercase; text-transform: inherit; text-transform: initial;
2. Handling spaces and line breaks: the white-space property
The white-space property handles spaces between words and line breaks within an element.
The property is inherited.
| white space | |
|---|---|
| Values: | |
| normal | Default value. Only one space is inserted between words, additional spaces are discarded. Text wraps only when necessary. |
| nowrap | Disables line breaks except when applied . |
| pre | Spaces in text are not ignored, the browser displays extra spaces and line breaks. |
| pre-wrap | Preserves whitespace in text by making line breaks where necessary. |
| pre-line | Removes extra spaces, except for the cases . |
| break-spaces | Behavior is identical to pre-wrap , except that: any sequence of non-removable spaces always occupies space, including at the end of a line; the possibility of a line break exists after each non-removable space, including between spaces. |
| initial | |
| inherit | |
Syntax
White-space: normal; white-space: nowrap; white-space: pre; white-space: pre-wrap; white-space: pre-line; white-space: break-spaces; white-space: inherit; white-space: initial;
3. Tab setting: tab-size property
The tab-size property is used to change the amount of indentation obtained with the TAB key. Property values are ignored when one of the three pre-line , normal , or nowrap white-space property values is set.
Only works for elements '); }); } } }); })(jQuery);