How to modify text with css? 9 properties of css to modify text style (summary)

How to modify text with css? This article summarizes some methods for modifying text with css, introduces some attributes of css modified text, and lets you know what the 9 attributes of css modify text are. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

1. CSS settings Text color attributes

color attribute: Set the text color. The usage is as follows:

color：颜色值;

The legal color values ​​that can be set by the color attribute include: hexadecimal color value (for example: #ffffff), rgb color value [for example: rgb(0,0,0)], rgba color Value [Example: rgb(0,0,0,0.5), 0.5 represents transparency], HSL color value [Example: hsl(120,65%,75%)], HSL color value [hsl(120,65%,75 %,0.3), 0.3 represents transparency].

2. CSS Text line height (line spacing) attributes

line-height attribute: Set the distance between lines (line height). The usage is as follows:

line-height：值;

The specific css line-height attribute is how to set the line spacing of text. You can refer to the previous article [How to set the line spacing in css? Line spacing setting of css text text], I hope it will be helpful to everyone.

3. CSS settings Horizontal alignment of text attributes

text-align attribute: Sets the horizontal alignment of text in an element. The usage is as follows:

text-align: left || right || center || justify ;

left: Set the text to be left aligned. Default: determined by the browser.

right: Set the text to be right aligned.

center: Set the text to be aligned in the center.

justify: To achieve the effect of aligning text on both ends.

4. css Text indentAttribute

text-indent attribute: Set the text indent.

Specificcss text-indent attributeHow to set text indentation, you can refer to [How to achieve the first line indentation effect in css? The text-indent attribute implements the indentation of the first line ].

5. Set Text text decoration Effect

text-decoration attribute: Define the decoration added to the text.

Description:

This attribute allows you to set certain effects on text, such as underlining. If the descendant element does not have its own decorations, the decorations set on the ancestor element will "extend" to the descendant elements.

Usage:

text-indent：none ||  [underline(下划线) || overline(上划线) || line-through(中划线)] || blink ;

none: Default value, defining standard text.

underline: Define a line under the text.

overline: Define a line on the text.

line-through: Define a line that passes under the text.

blink: Define blinking text.

6, The case of text charactersTransformation attribute

text-transform attribute: Control the case of text characters.

Usage:

text-transform:uppercase(全大写) || lowercase(全小写) || capitalize(首字母大写) || none ;

You can refer to the article [How to set the upper and lower case of letters in css? The text-transform attribute sets the capitalization of letters ], which is described in detail.

7, Text text spacing attributes

word-spacing attribute: Set the spacing between text or words, the spacing between words = word- spacing space size.

Letter-spacing property: Set the spacing between letters.

You can refer to the article [How to set text spacing in css? A simple comparison of the word-spacing attribute and the letter-spacing attribute], which introduces the methods of the word-spacing attribute and the letter-spacing attribute to set the spacing of text, as well as their differences.

8, Attributes of text shadow

text-shadow property: Set shadow to text

How to achieve text shadow effect, everyone You can read the article [How to add text shadow effect in css3? text-shadow sets the text shadow effect】Learn more.

Summary: The above is the entire content of this article, I hope it will be helpful to everyone's study. For more related tutorials, please visit CSS Basics Video Tutorial, CSS3 Video Tutorial, bootstrap Tutorial!

The above is the detailed content of How to modify text with css? 9 properties of css to modify text style (summary). For more information, please follow other related articles on the PHP Chinese website!