Detailed explanation of commonly used styles in CSS3 [Basic text and font styles]

Summary: In order to make your web page look more beautiful, here you will see some commonly used styles in CSS3. Great for beginners! One day the great roc rises with the wind and soars up to 90,000 miles! Learn together and make progress together!

1. Font size unit

px (pixel): This is an absolute unit;

em : 1em is equivalent to the width of the capital letter M in the current parent element;

rem : The effect is similar to em. 1rem is equal to the font size of the root element in HTML, not the parent element. It supports new versions of browsers. If you use old versions (IE8 and below), it is recommended to use the first two.

2. Font style

font-style : normal (normal text)/italic (italic);

font-weight : nominal (normal font)/bold (bold);

text-transform : allows you to set the font for the transformation;

• none (prevent any transformation)
• uppercase (convert all text to uppercase)
• lowercase (convert all text to lowercase)
• capitalize (capitalize the first letter of all words)
• full-width (all glyphs converted to full-width)

text-decoration : Set/cancel text decoration on the font

• none (cancel any existing text decoration)
• underline
• overline
• line-through

Note: Multiple values ​​can be set for line, style, and color.

3. Text shadow

text-shdow : 4px 4px 5px red;

• Property 1: The horizontal offset of the shadow from the original text;
• Property 2: The vertical offset of the shadow from the original text;
• Attribute 3: Blur radius, higher values ​​mean wider shadows;
• Attribute 4: The base color of the shadow;

Note: A positive offset moves to the right; a negative offset moves to the left.

Try a variety of shades

text-shadow:-1px -px 1px #aaa,
  0px 4px 1px rgba(0,0,0,0.5),
  4px 4px 5px rgba(0,0,0,0.7),
  0px 0px 7px rgba(0,0,0,0.4);

The effect diagram is as follows:

4. Text layout

text-align : controls how text is aligned with its box

• left: left alignment;
• right: right alignment;
• center: centered text;
• justify: expands the text so that all text lines have the same width. This attribute should be used with caution .

line-height : Sets the height between each line of text. You can set a unitless value. line-height: 1.5; means that the text line height is set to 1.5 times the font height.

letter-spacing : Set the spacing between letters;

word-spacing : Set the spacing between words;

p::first-line{
    letter-spacing: 2px;
    word-spacing: 4px;
}

As shown in the figure below, the first sentence is styled, while the last sentence is not styled.

5. Let’s look at some more important attributes

Font style

font-variant : Toggle between small caps and normal text.

font-kerning : turn on/off spacing options;

font-feature-settings : Enable/disable different OpenType font features;

font-variant-alternates： controls the use of alternative glyphs for a given custom font;

font-variant-caps : Controls the use of alternate glyphs for uppercase letters;

...

Text layout style

text-indent : Specifies how much space should be left before the first line of text content;

text-overflow : defines how to indicate to the user that there is hidden overflow content;

white-space : defines how to handle blank spaces and line breaks within an element;

word-break : specifies whether to break within a word;

...

6. Font abbreviation

In the following order: font-style , font-variant , font-weight , font-stretch , font-size , line-height , font-family .

Among them, font-style and font-family must be specified; a forward slash must be placed between font-size and line-height .

A complete example is as follows:

font: italic normal bold normal 3em/1.5 Helvetica,Arial,san-serif;

The above are all important knowledge points summarized with reference to the most authoritative MDN Web Docs. I hope you can share them with me. If there are any inappropriate comments, you are welcome to comment!

This concludes this article on the detailed explanation of commonly used styles in CSS3 [Basic text and font styles]. For more relevant CSS3 commonly used styles, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future!