CSS Text attributes can define the appearance of the text.
Through text attributes, you can change the text Color, character spacing, align text, decorate text, indent text, etc.
㈠Indented text text-indent< /strong>
By using the text-indent attribute, the first line of all elements can be indented Enter a given length, even the length can be negative.
⑴Use negative values
For example, “hanging indentation”, that is, the first line is hanging to the left of the rest of the element, as shown below: p>
p {text-indent: -6em;}
However, be careful when setting negative values for text-indent. If you set a negative value for a paragraph, first Some text of the line may extend beyond the left border of the browser window.
In order to avoid this display problem, it is recommended to set a margin or Some padding, as follows:
p {text -indent: -6em; padding-left: 6em;}
⑵Use the percentage value
The percentage should be relative to the width of the parent element of the indented element. In other words, if you set the indent value to 20%, the first line of the affected element will be indented by 20% of the width of its parent element.
In the following example, the indentation value is 20% of the parent element, or 100 pixels:
div {width: 500px;} p {text-indent: 20%;}this is a paragragh
⑶ use the text-indent attribute to demonstrate how to shrink Enter the first line of text.
< /span>
㈡Horizontal alignment text-align span>
The text-align attribute specifies the horizontal alignment of the text in the element.
This attribute sets the text in the block-level element by specifying which point the line box is aligned with. Horizontal alignment.
Another horizontal alignment attribute is justify. In justified text, the left and right ends of the text line are placed on the inner boundary of the parent element. Then, adjust the spacing between words and letters so that the length of each line is exactly the same.
The following values may be used:
< p> How to use the text-align attributeAlign text,The code is as follows:
Word-spacing word-spacing
The word-spacing property accepts a positive or negative length value.
If a positive length value is provided, the space between words will increase.
Set a negative value for word-spacing, which will bring it closer.
The following values may be used:
⑴normal: Default. Define the standard space between words.
⑵length: Define a fixed space between words.
⑶inherit: Specifies that the value of the word-spacing attribute should be inherited from the parent element.
Using the word-spacing attribute to demonstrate How to increase the distance between words in a paragraph, the code is shown below:
< strong>㈣ letter-spacing
The difference between letter-spacing attribute and word-spacing is, The letter interval modification is the interval between characters or letters.
Use the letter-spacing attribute to set characters Spacing, as shown below:
< strong>
㈤ character conversion < span style="font-size: 18pt;">text-transform attribute
The default value of none does not make any changes to the text, and the original capitalization in the source document will be used.
As the name implies, uppercase and lowercase convert text to all uppercase and all lowercase characters.
Finally, capitalize only capitalizes the first letter of each word. span>
Note: It is decided to capitalize all h1 elements, the text-transform attribute is very it works. You don’t need to modify the contents of all h1 elements individually, just use text-transform to complete this modification for you:
For example: h1 {text-transform: uppercase}
The following values may be used:
Demonstrate how to< span style="color: #0000ff;">Control the capitalization of letters in the text, the code is as follows:
< p>
㈥Text decoration text-decoration
The text-decoration attribute specifies the decoration added to the text.
Note: The color of the decoration is set by the “color” attribute.
The following is Possible values:
Demonstrate how to Add decoration to the text, the code is as follows:
< p>㈦Text direction
< span style="font-size: 16px;">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 in which the content fills its element box horizontally, and the last in the justified element The position of a line.
Note: For inline elements, only when the unicode-bidi attribute is set to The direction attribute will only be applied when embed or bidi-override.
The direction attribute has two values: ltr and rtl. In most cases, the default value is ltr, which displays text from left to right. If displaying right-to-left text, the value rtl should be used.
The following values may be used;
⑴ltr By default. The text direction is from left to right.
⑵rtl The text direction is from right to left.
⑶inherit specifies that the value of the direction attribute should be inherited from the parent element.
Demonstrate how to set the direction of the text, the code is as follows:
strong>
㈧Handle Blank character white-space
How to deal with the white-space property setting White space within the element.
The following values may be used;
Demonstrate how to Prohibit text wrapping in elements, the code is as follows:
< img alt="share picture" src="/wp-content/uploads/images/web/css/1626794568378.png" >
㈨text color< /p>
⑴Set the text color, the code example is as follows:
⑵Set the background color of the text, the code example is as follows;
Hope it helps.