Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

Text decoration (text-decoration)

  • Text-decoration-line property: Used to set the type of decoration for the text in the element.

    • Underline: underline
    • Overline: top line
    • The line – through: delete the line

  • Text-decoration-color property: Used to set the color of the text decoration line.

  • Text-decoration: Used to set the style of the line set by the text-decoration line.

Line spacing (line-height)

In CSS, line-height is used to control the vertical distance between two lines of elements.

As shown in the figure above, the red line is the top line, the purple line is the middle line, the green line is the baseline, and the yellow line is the bottom line. The top, middle, baseline, and bottom lines of vertical-align attribute will be explained later in this section refer to these four lines.

  • Line spacing, also known as line height, refers to the distance between the baseline of two lines of text, the distance between the two green lines. Regions 1, 2, 3, and 4 in the figure above.
  • The line spacing refers to the distance between the bottom line of the previous line and the top line of the next line, i.e. the distance between the yellow line on the previous line and the red line on the next line.
  • The font size values the distance from the top line to the bottom line, the distance between the red line and the yellow line. The regions 1, 2, and 4 in the figure above.

The value of the line-height attribute

The CSS line-height property can be of the following four types:

  • Normal keyword: This value depends on the user’s computer. Generally, the default value used by browsers is 1.2.
  • Numeric value: The final effect value of the line-height attribute is the numeric value multiplied by the font size of the element.
  • Length value: Refer to the unit of this value. If you are usingemUnit may have an uncertain effect.
  • Percentage value: The final effect value of the line-height attribute is the percentage value multiplied by the font size of the element.

When setting the value of the line-height attribute, you are advised to use a numeric value. Because when numeric values are used, there is no ambiguity in inheritance.

Letter spacing (letter-spacing) and word spacing (word-spacing)

The letter spacing

The CSS letter-spacing property is intended to set the spacing between text characters. In English there are words and characters, but in Chinese there are only characters. Chinese characters are equivalent to English characters, so the spacing property applies to Chinese environments.

There are two types of values for the letter-spacing property, as follows:

  • Normal: This value is based on the normal spacing of the current font.
  • Length value: Specifies the spacing between text in place of the default spacing. It can be negative.

The word spacing

The CSS word-spacing property is used to set spacing between tags or words on HTML pages. This property is valid for English but not for Chinese. There are three types of values for the word-spacing attribute, as follows:

  • Normal: This value is based on the normal spacing of the current font.
  • Length value: Specifies the spacing between words instead of the default spacing.
  • Percentage value: The percentage that specifies the spacing between words instead of the default spacing.

Horizontal alignment (text-align)

The CSS text-align property is used to set the horizontal alignment of the text with the element on the HTML page. Note that the text-align attribute does not set the horizontal alignment of the HTML element itself. Rather, it sets the horizontal alignment of the text content inside the HTML element within its element.

  • The value of the text-align attribute has seven types, as follows:
  • Start: Equals left if the content direction is left to right, and right if it is not.
  • End: Right if content is left to right and left if content is left to right.
  • Left: Line content is aligned to the left. Right: Line content is aligned to the right.
  • Center: Center the contents in the line. Justify: Text is aligned to the side, does not justify the last line.
  • Context-all: is consistent with justify, but forces the last line to be aligned.

Vertical alignment (vertical-align)

The CSS vertical-align property is used to set the vertical alignment of inline elements or table cells on an HTML page. The vertical-align attribute can be applied to two environments:

  • Sets the vertical alignment of an inline element’s box model with the inline element’s parent container element.

  • Sets the vertical alignment of content in a cell in the table.

    Note: The vertical-align attribute is valid only for inline elements and form cells, not block-level elements.

    Concepts such as box models, inline elements, block-level elements, and form cells will be explained in more detail in subsequent chapters.

The value of the vertical-align attribute varies between the two application environments:

  • Values applied to inline elements

    • Value relative to the parent element

      • Baseline: Aligns the element’s baseline with the parent element’s baseline.
      • Sub: Aligns the element baseline with the subscript baseline of the parent element.
      • Super: Aligns the element’s baseline with the superscript baseline of the parent element.
      • Text-top: Aligns the top of the element with the top of the font of the parent element.
      • Text-bottom: Aligns the bottom of the element with the bottom of the font of the parent element.
      • Middle: aligns the middle of the element with the baseline of the parent element plus half of the x-height of the parent element.

    • Values relative to rows

      • Top: Aligns the top of the element and its descendants with the top of the entire line.
      • Bottom: Aligns the bottom of the element and its descendants with the bottom of the entire line.

  • Values applied to form cells

    • Baseline: Aligns the baseline of a cell with that of all other cells in the row that are aligned with the baseline.
    • Top: Aligns the upper edge of the inner margin of the cell with the top of the row.
    • Middle: Aligns the cell margin box model in the middle of the row.
    • Bottom: Aligns the lower edge of the inner margin of the cell with the bottom of the row.

Indent text (text-indent)

The CSS text-indent property is used to set the amount of indentation before the first line of text content of a block-level element in an HTML page.

The value of the text-align attribute has four types, as follows:

  • Length value: Negative values are allowed.
  • Percentage value: Indent using the percentage of the width of the block-level element.
  • Each -line: Indentation affects the first line and the first line after the use of an element to force a line break.
  • Hanging: This value inverts all rows: all rows except the first one are indented, so it looks like the first one has a negative indent value set.

Text shadow (text-shadow)

The CSS text-shadow property is used to set the shadow of text on an HTML page. The syntax structure for this property is as follows:

selector {
    text-shadow: color offset-x offet-y blur-raduis;
}
Copy the code

The meanings of specific values in the above syntax are as follows:

  • Color: Optional, set the shadow color of the text content.

  • Offset-x: specifies the offset of the text shadow in the horizontal direction.

    • If the value is less than 0, the deviation is left.
    • A value equal to 0 indicates that there is no horizontal deviation.
    • A value greater than 0 indicates a shift to the right.

  • Offset-y: specifies the offset of the text shadow in the vertical direction.

    • A value less than 0 indicates an upward offset.
    • A value equal to 0 indicates that there is no vertical offset.
    • A value greater than 0 indicates a downward offset.

  • Blur -raduis: This option allows you to set the radius of shadow blur for text.

    If not specified, it defaults to 0. The larger the value, the larger the blur radius, the larger and lighter the shadow.

Setting up multiple shadow effects requires setting multiple shadow values separated by commas (,).

Text wrap (word-wrap 和 word-break)

The browser has its own text wrapping capability. When the browser displays text, wrap the text and the right side of the browser automatically. The specific situation is as follows:

  • For Western text, the browser wraps the line in place of a half-corner space or hyphen.
  • For Chinese text, you can wrap a line after any text. Usually the punctuation mark and the preceding text wrap as a whole.

There are two properties that can be used to set text newlines in CSS:

  • Word wrap attribute
  • Word – break properties

Word wrap attribute

The word-wrap property is a private property of Microsoft and was renamed overflow-wrap in the CSS3 text specification. Word-wrap is an alias for overflow-wrap.

The CSS overflow-wrap property is used to set whether the browser will allow word breaks to prevent an HTML page from overflowing if a string that cannot be separated is too long to fill its wrapper.

The overflow-wrap attribute has the following two values:

  • Normal: newlines at the end of normal words.
  • Break-word: indicates that if there is no room in the line for the word to end, the normal words that cannot be split will be forced to break a new line.

Word – break properties

The CSS word-break property is used to set the processing mode of wrapping text on an HTML page. With specific property values, the browser can be told to implement line breaks anywhere.

The word-break property has the following three values:

  • Normal: Use the default line breaking rule.
  • Break-all: For text content except Chinese, Japanese, and Korean, the value can be set to break lines at any character.
  • Keep-all: The text content in Chinese, Japanese and Korean is continuous. The text content in other languages is equal to normal.

Handling whitespace (white-space)

The CSS white-space property sets how whitespace in HTML elements is handled.

Code:

<style> p { white-space: pre; } </style> </head> <body> <! <p> </p> </body>Copy the code

The value of this attribute has the following six types:

  • Normal: The default value. Consecutive whitespace characters are merged and newlines are treated as whitespace. When filling a box model with inline elements, wrap it if necessary.

  • Nowrap: As with normal, successive whitespace characters are merged. But a newline inside the text is invalid. Pre: Successive whitespace characters will be preserved. Line breaks occur only when a newline character or

    element is encountered.

  • Pre-wrap: Successive whitespace characters are retained. Line breaks occur when a newline character or

    element is encountered, or when a box model is needed to fill in inline elements.

  • Pre-line: Consecutive whitespace characters are merged. Line breaks occur when a newline character or

    element is encountered, or when a box model needs to be filled with inline elements.

  • Break-spaces: Behaves the same as the pre-wrap, except as follows:

    • Any reserved whitespace always takes up space, including the end of the line.
    • A newline occurs after each reserved space character, including between space characters.
    • This reserved space takes up space without hanging up, thus affecting the proper size of the box.

    The following list summarizes the behavior of the various white-space attribute values: