Web Front End Learning notes: Text properties

Today's web front-end notes are mainly about text properties, hoping to help the beginners who are learning web front-end development, the nonsense is not much to say, together to see the text properties of the relevant content it.

Text properties

Text indent

Indents the first line of a paragraph on a web page, which is the most commonly used text formatting effect. Some websites put a small transparent image in front of the first letter of the paragraph, which pushes the text behind to create a feeling of indenting text. Other sites use a completely standard space (spacer) tag. There is a better way to implement text indentation in CSS. That's the Text-indent property.

By using the Text-indent property, the first line of all elements can be indented to a given length, or even the length can be a negative value.

The unit of/** Text-indent is em*/

P{text-indent:3em; }

P{text-indent:-3em;}

/*

* Text indent in percent

*/

p{text-indent:3%;}

Horizontal alignment

Compared to Text-indent, Text-align is a more basic property that affects the alignment of lines of text in an element with each other.

Note : Center The Block-level element or table element by setting the left and right margins appropriately on these elements.

The row height Line-height property refers to the distance between the baseline of the text line, not the size of the font. It determines whether to increase or decrease the height of each element frame.

Vertical alignment of the aligned

In CSS, the Vertical-algin property applies only to inline and replacement elements. Form input elements and images, the Verticl-align property cannot be inherited.

Text conversion

The default value of none does not make any changes to the text and will use the original case of the source document. As the name implies, uppercase and lowercase convert text to all uppercase or all lowercase characters.

Capitalize only capitalize the first letter of each word.

Text decoration

Underline will underline the elements;

Overline will be underlined at the top of the element;

Line-through draws a penetrating line in the middle of the text. Equivalent to the S and strike in HTML;

Blink will make the text blink;

Text Shadow

/** to define a green shadow that shifts 5 pixels downward by 0.5 relative to the text, and does not blur to write */p{

Text-shadow:green 50x0.5em;

}

Working with whitespace characters

Text direction

The Direcation property affects the direction of text writing in block-level elements, the direction of the column layout in the table, the direction in which the content fills its element box horizontally, and the position of the last line of justification elements.

For inline elements, the direction property is applied only if the short Unicode-bidi property is set to embed or bidi-override.

Normal: The element does not open an additional layer of nesting for the bidirectional algorithm, and for inline elements, the implicit rearrangement of the order occurs across the element boundary.

Embed: In the case of an inline element, this value opens an additional layer of nesting for the bidirectional algorithm, which is specified by the Direction property.

The order is automatically re-ordered inside the element.

Bidi-override: This creates an overlay for the inline element, and for block-level elements, an overlay is created for descendants that are not in the other piece.

This shows that the order is re-typesetting Ah, the element is strictly in accordance with the direction attribute, ignoring the implicit part of the bidirectional algorithm.

Recommended reading: JavaScript Object-oriented programming

Web Front End Learning notes: Text properties