Detailed explanation of CSS paragraph properties

CSS can not only statically modify web pages, but also dynamically format various elements of web pages in conjunction with various scripting languages. CSS can perform pixel-level precise control over the layout of element positions in web pages, supports almost all font size styles, and has the ability to edit web page object and model styles. In this article, we share with you a detailed explanation of CSS paragraph properties.

Using CSS, you can also control the properties of paragraphs, including word spacing, character spacing, text modification, vertical arrangement, text conversion, text arrangement, text indentation and line height, etc.

1.1 Word-spacing

Grammar:

word-spacing: Value

Description:

Take The value can be normal or the length value. Normal refers to the normal interval and is the default option; length is the value and unit for setting the word interval, and negative values ​​can also be used.

1.2 Character spacing letter-spacing

Use spacing to control the spacing distance between characters.

Grammar:

letter-spacing: value

##1.3 Text decoration text-decoration

Use text decoration Properties can modify text, such as setting underline, strikethrough, etc.

Syntax:

text-decoration: value

Description:

none means no decoration, which is the default value; underline means underlining the text; Overline means adding an overline to the text; line-through means adding a strikethrough to the text; blink means text flashing effect.

1.4 Vertical alignment bertical-align

Use vertical alignment to set the vertical alignment of text.

Syntax:

vertical-align: Arrangement value

Description:

vertical-align includes the following values:

baseline : The default vertical alignment of the browser;

sub: the subscript of the text;

super: the superscript of the text

top: vertical alignment at the top;

text-top: Align the fonts of the element and the superior element upward;

middle: Align the vertical center;

text-bottom: Align the fonts of the element and the superior element downward.

1.5 Text transformation text-transform

The text transformation property is used to convert the upper and lower case of English letters.

Syntax:

text-transform: Conversion value

Description:

text-transform includes the following values:

none: Indicates using the original value;

capitalize: Indicates using the first letter of each word in uppercase;

uppercase: Indicates using all letters of each word in uppercase;

lowercase : Indicates using all lowercase letters of each word;

##1.6 Horizontal alignment text-align

Use the text-align attribute to set the horizontal alignment of text Way.

Syntax:

text-align:arrangement value

Description:

Horizontal alignment values ​​include: left, right, center, justify four types.

1.7 Text-indent

In HTML, you can only control the overall right indentation of the paragraph. If you do not set it, the browser will The default is no indentation, but in CSS you can control the indentation of the first line of the paragraph and the distance of the indentation.

Syntax:

text-align: indent value

1.8 Text line height line-height

Use the text line height attribute to control the distance between lines in a paragraph.

Syntax:

text-align: line height value

Description:

The line height value can be length, multiple or percentage.

1.9 Handle blank white-space

white-space attribute is used to set the processing method of blank page content

Syntax:

white-space: blank value

Description:

white-space includes 3 values, where normal is the default attribute, pre causes spaces and newlines in the source code to be preserved, and nowrap forces all text to be displayed on the same line.

1.10 Text reverse flow unicode-bidi, direction

unicode-bidi, direction attributes are often used together to set the reading order of objects.

1.unicode-bidi attribute

Syntax:

unicode-bidi:bidi-override |normal| embed

Description:

In the value of the unicode-bidi attribute, bidi-override means rearranging strictly according to the value of the direction attribute; normal means the default value; embed means that the object opens an additional embedding layer. The value of the direction attribute specifies the embedding layer and performs implicit rearrangements within the object.

2.direction attribute

Syntax:

unicode: lir |rtl| inherit

Description:

In the value of the direction attribute, ltr indicates sequential reading from left to right; rtl indicates sequential reading from right to left; inherit indicates that the value of the text stream cannot be inherited.

The above content is a detailed explanation of CSS paragraph properties. I hope it can help everyone.

Related recommendations:

How to implement ladder tab page with CSS

##Sample code for CSS grid layout

Detailed explanation of CSS content attribute

The above is the detailed content of Detailed explanation of CSS paragraph properties. For more information, please follow other related articles on the PHP Chinese website!