CSS (5) Text

In the previous article, I learned the CSS background. In this article, I will learn CSS text. The background and text are rendered to present the page content. The background is like a canvas, and the text is the text line we draw on the canvas. CSS text attributes mainly include text color, Character spacing (letter-spacing), align, and decoration) and text-indent.

I. text color

CSS uses the color attribute to set the text color (foreground color ). The color attribute sets the foreground color of an element (in the HTML representation, the color of the element text). The Raster image is not affected by the color. The color attribute is also applied to all borders of the element unless it is overwritten by the border-color or another border color attribute. The value of the color attribute can be the color name, hexadecimal color value, or RGB value. The following is an example of a color attribute:

/* Set the text color of the entire body to red (color name) */body {color: red;}/* level 1 title to green (hexadecimal color value) */H1 {color: #00ff00;}/* The section is blue (RGB value) */P {color: RGB (255 );}

Ii. Text indent

Like the indent effect of the first line in word, we can also use the text-indent attribute in CSS to indent the first line of block-level elements such as paragraphs on the web page, this is the most common text formatting effect. The text-indent attribute can be applied to all block-level elements, but cannot be applied to intra-row elements (Note: If you want to "indent" the first line of an intra-Row Element ", you can use the left or outer margin to create this effect ). The value of the text-indent attribute can be a given length value (length), percentage (%), or even a negative value. It can also be inherited from the parent element.

1. Use a fixed value (length)

The default value of text-indent is 0, and the unit of length such as PX, em, cm, and in can be used. The most common purpose of the text-indent attribute is to indent the first line of a paragraph. The following rules indent the first line of all paragraphs by 5 EM:

p {text-indent: 5em;}

2. percentage (%)
 
When text-indent is defined by percentage, it is the indentation that defines the percentage based on the width of the parent element. For example, if you set the text-indent value to 20%, the first line of the affected element is indented to 20% of the width of its parent element. In the following example, the indent value of the element (<p> </P>) is 20% of the parent element (<div> </div>), that is, 100 pixels:

div {width: 500px;}p {text-indent: 20%;}

<div>    <p>this is a paragragh</p></div>

3. Use a negative value

Text-indent can also be set to a negative value. Using this technology, you can achieve a lot of interesting effects, such as the "suspension indent" in the word, that is, the first line is hung on the left of the remainder part of the element:

p {text-indent: -5em;}

Be careful when setting a negative value for text-indent. If a negative value is set for a paragraph, some text in the first line may exceed the left border of the browser window. To avoid this problem, we recommend that you set an extra margin or some padding for the negative indent:

p {text-indent: -5em; padding-left: 5em;}

4. Inheritance of the text-indent attribute

The text-indent attribute can be inherited. For example, the Section marked below will also be indented to 50 PX, because this section inherits the indent value of the DIV element whose ID is inner.

div#outer {width: 500px;}div#inner {text-indent: 10%;}p {width: 200px;}

<div id="outer"><div id="inner">some text. some text. some text.<p>this is a paragragh.</p></div></div>

Iii. Horizontal Alignment
The text-align attribute specifies the horizontal alignment of text in an element. This attribute sets the horizontal alignment of text in block-level elements by specifying the point to which the row box is aligned. The value of the text-indent attribute can be left, right, or center. The user agent can also adjust the interval between letters and words in the row content, the value justify is supported (alignment at both ends). Different user proxies may obtain different results.

Default Value of the text-align attribute: if the direction attribute is LTR (left to right), the default value is left. If the direction attribute is RTL (Right to left), the default value is right.

h1 {text-align:center}h2 {text-align:left}h3 {text-align:right}

Center of block-level elements: to center block-level elements or table elements, you can set the left and right margin (margin) on these elements.

Text-align: the difference between the center and <center> </center> elements:

Sometimes we may think that the text-align: center and <center> </center> elements play the same role, but they actually do not. <Center> </center> not only affects the text in the element, but also centers the entire element. Text-align does not control the alignment of elements, but only affects internal content. Elements are not moved from one segment to the other, but the text is affected.

4. Word spacing

The word-spacing attribute adds or removes spaces (that is, word intervals) between words ). This attribute defines how many blank characters are inserted between words in an element. The "word" in this attribute is defined as a string surrounded by blank characters. If it is specified as the length value, the general interval between words is adjusted. Therefore, normal is equivalent to 0. The negative length value can be specified, which makes words more tight.

<HTML> 
5. Character Spacing
The letter-spacing attribute sets the spacing between letters in the text. The difference with word-spacing is that the letter-spacing parameter modifies the interval between characters or letters; word-spacing modifies the spacing between words.
Like the word-spacing attribute, the value of the letter-spacing attribute includes all lengths. The default keyword is normal (which is the same as letter-Spacing: 0 ). The entered length value increases (positive) The interval between letters or reduces (negative) the specified amount:
h1 {letter-spacing: -0.5em}h4 {letter-spacing: 20px}
Vi. case-insensitive Conversion
The text-transform attribute processes the case of text. The text-transform attribute has four values: None, uppercase, lowercase, and capitalize. The default value is none, indicating that the source document uses the original case. Uppercase and lowercase convert the text to all uppercase and lowercase characters. Finally, Capitalize only capitalized on the first letter of each word.
As an attribute, text-transform may be irrelevant. However, this attribute is useful if you suddenly decide to change all H1 elements to uppercase. You do not have to modify the content of all H1 elements separately. You only need to use text-transform to modify the content for you:
h1 {text-transform: uppercase}
VII. Text Decoration
The text-decoration attribute settings are added to the text modifier. This attribute allows you to set a certain effect on text, such as underline. If the descendant element does not have its own decoration, the decoration set on the ancestor element will "extend" to the descendant element.
There are five values for text-Decoration: none (no decoration, and all decorations originally applied to the elements will be closed), underline (underline the elements ), overline, line-through, and blink ). For example, the link is underlined by default. If you want to remove the underline Of the hyperlink, you can use the following CSS to do this:
a {text-decoration: none;}
8. Handling of blank spaces
The white-space attribute sets how to process the white space in the element. This attribute declares how to process the blank characters in the element during layout creation. Values pre-wrap and pre-line are newly added in CSS 2.1.
Value of the white-space attribute:
1. Normal: default value. Blank space is ignored by the browser.
2. Pre: the blank space is retained by the browser, and its behavior is similar to the <PRE> label in HTML.
3. nowrap: The text will not wrap, and the text will continue on the same line until the <br> label is encountered.
4. Pre-wrap: Reserved blank character sequence, but line feed is normal.
5. Pre-line: merges the blank character sequence, but retains the line break.
6. inherit: specifies that the value of the white-space attribute should be inherited from the parent element.
Example:
/* The text in the specified paragraph does not wrap */P {white-space: nowrap}
9. Text direction
If we are reading English books or modern Chinese, we will read from left to right (LTr) and from top to bottom. This is the stream direction of English and modern Chinese. However, not all languages do. We know that ancient Chinese is read from the right to the left (RTL), including Hebrew and Arabic. Css2 introduces an attribute to describe its directionality.
The direction attribute affects the writing direction of the text in the block-level element, the direction of the column layout in the table, the direction of the element box filled with content horizontally, and the end of the last row in the alignment element at both ends. For intra-row elements, the direction attribute is applied only when the Unicode-bidi attribute is set to embed or Bidi-override.
The direction property has two values: LTR and RTL. In most cases, the default value is LTr, which displays text from left to right. If the right-to-left text is displayed, the RTL value is used.
1 <HTML> 2 
Reference: http://www.w3school.com.cn/css/css_text.asp