Text is very important as the main carrier of information in web pages. I have learned about text, paragraph and other formats in HTML before. These are just simple layouts. If you want to make better text styles , on the use of css fonts and text styles.

css font

css font attributes mainly include font family, font size, font style and other styles.

1. Set font family —— font-family

This attribute is used to set which type of font the web page uses to display text, the syntax is as follows:

"font 1", "font 2", "font 3"...

font-family attribute can define multiple fonts , the browser will give priority to using fonts from front to back. When the browser does not support the first font, it will try to use the second font, and so on. If the browser does not support all fonts, the default font is used.

The following example:

2. Font style - font-style

There are three font styles:

• normal - display text normally
• Italic - in italics Text to display
• Slanted text - Text that is slanted to one side (whether italic or normal)

Example:

There are 2 kinds of italics here, what is the difference between them?

Both italic and oblique are right-slanted text, but the difference is that italic refers to italic text, while oblique is oblique text. For fonts without italics, you should use the oblique attribute value to achieve the oblique text effect.

3. Font size —— font-size

"font- size" attribute to set the font size,It The value of can use predefined keywords, Absolute size, relative size.

Predefined keywords

predefined key The characters are xx-small, x-small, small, medium, large, x-large, xx-large, and the size increases in order. Its optional range is only these types, and the font sizes corresponding to the predefined keywords defined by different browser manufacturers are inconsistent, so the same attribute value, the size seen in different browsers is different, it is recommended not to use this method .

Absolute Size

Use absolute size For example: px (pixel), pt (point, 1pt is equivalent to 1/72in), in (inch), cm (centimeter), mm (millimeter) and other units to set the font size.

The following example:

The absolute size will not change as the page size changes. If you want to adapt the text size to different screens or devices, you need to use a relative size.

relative size:

Relative size usage em, %, rem, etc. to set the size, they are all relative to the font size of a reference base to calculate the current font size, but the reference base is different.

If you do not specify a font size, the default size is the same as a normal text paragraph, which is 16 pixels (1em = 16px, 100% = 16px).

Both em and % are relative to the font size of the parent element, and its child elements will continue to calculate the size based on the calculation results of their parent elements, as shown in the following example:

The font size of the p element above is 36px, not 12px * 200% equal to 24px, which is the value that continues to be calculated on the calculation result of its parent div element.

Using em or % can easily modify the text size, but when the elements are deeply nested, it becomes more complicated, and the text size of deep elements becomes uncontrollable, so css3 Newly added rem to set font size.

rem is relative to the root element (html element) The value of the font-size attribute, each level will be calculated with reference to the font size of the html root element, so that no matter how many layers of nesting, the calculation of the font size becomes uniform.

rem is a new relative unit of CSS3, but old browsers below IE9 do not support it, which is why many programmers have not yet used rem.

When defining the font size, it is recommended to define the font size required by most elements in the html element, and let all child elements inherit the font size of the html. If a child element is to change font size, redefine with relative size em or % or rem.

4. Composite attribute—font

The font attribute can be regarded as a shorthand for the font, which can define the font family, size, style, thickness, and other styles. The syntax is as follows:

 font: "font-style font-variant font-weight font-size/line-height font-family"

whereThe values ​​of font-size and font-family are required. If other values ​​are missing, the browser's default will be used.

The following example:

In addition to the above settings, font has other attribute values, as follows:

These attributes are only supported by some browsers, please check whether the browser supports them when using them.

5. Other font attributes

Fonts also have font-weight (properties for setting thickness), font-variant (Set the font display text of small caps) as follows:

font-weight Font thickness: There are three types: normal, lighter, bold, and numerical value. The numerical value ranges from 100 to 900 and becomes thicker in turn, and 900 is equivalent to bold.

font-variant value has normal (standard font display), small-caps (browser will display small caps font), inherit (Inherit the settings of the parent element)

The following example:

font-variant The property sets the small-caps font to display the text, meaning that all lowercase letters are converted to uppercase, but all letters using the small-caps font have a smaller font size than the rest of the text.

css text style

Css text attributes are mainly set such as character spacing, text color, word spacing, line height, text Retouching, alignment, and more.

1. Text color —— color

color Use the hexadecimal color code or color keyword (such as red, blue) starting with "#", as shown in the following example:

2. Character spacing - letter-spacing

Set the horizontal spacing between characters, as shown in the following example:

3. Word spacing——word-spacing

Set the spacing between words, as in the following example:

Note that Chinese is special, a Chinese character is not equivalent to an English word.

4. Line height —— line-height

Set the vertical spacing between font lines, as shown in the following example:

5. Text decoration —— text-decoration

You can set text underline, strikethrough and other styles, as shown in the following example:

You can also define the wave effect, as shown in the following example:

6. Horizontal alignment —— text-align

There are three horizontal alignment methods, left, center, and right, as shown in the following example:

7. Vertical alignment——vertical-align

vertical-align property to set the vertical alignment of an element.

This attribute defines The vertical alignment of the baseline of an inline element relative to the baseline of the line the element is in. Negative length and percentage values ​​are allowed. This lowers the element instead of raising it. In table cells, this property sets the alignment of the cell content within the cell box.

The following example aligns images:

There are many other attributes, not all of which are introduced here, you can refer to the following:

8. Text case conversion——text-transform

can be used for all Phrases become uppercase or lowercase, or the first letter of each word is capitalized. Here's an example:

9. Text indentation —— text-indent

text indent attribute is used to specify the indentation of the first line of text. Here's an example:

Text indentation can use absolute values ​​such as: px, pt, cm, etc., or relative units %. And it can be a negative value. If it is a negative value, it is equivalent to indenting to the left.

10. Blank processing —— white-space

white-space Attributes specify how whitespace within an element should be handled. Here's an example:

11. Text shadow - text-shadow

text-shadow can set the text shadow effect, such as inner shadow or outer shadow, syntax:

text-shadow: x-coordinate y-coordinate fuzzy size and color;

where x/y coordinates are relative to the offset of the upper left corner of the text , as an example:

12, Text overflow - text-overflow

text-overflow Attribute specifying how the containing element should be displayed when the text overflows. You can set the text to be clipped, to show an ellipsis (...), or to show a custom string (not supported by all browsers).

text-overflow It needs to be used with the following two attributes:

• overflow: hidden;

The following example:

Summary

This article describes most of the text and text style settings. It is very important to master these css usages. Most of them are text. If you want to make a beautiful page, these must be learned, and you must learn to integrate them.

This article mainly talks about the following:

1. Font family, size, style, weight and other style settings.
2. The use of font shorthand attributes.
3. Text color, character spacing, word spacing, line height and other settings.
4. Text decoration, case conversion, text indentation, whitespace processing, etc.
5. Text is aligned horizontally and vertically.
6. Text shadow and text overflow.

The above are the most basic, and you need to practice more before you can understand and learn to use them. Thank you for your attention, and happy learning!

Part 1: Getting started with the front end——css box model