Summary: In order to make your web page look more beautiful, here you will see some styles commonly used in CSS3. Great for beginners! Dapeng rises with the same wind in one day and soars up to 90,000 miles! Learn together and progress together!
1, the unit of font size
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 the old version (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 of the transformation; none (prevents any transformation)
uppercase (turns all text to uppercase)
lowercase (convert all text to lowercase)
capitalize (capitalize all words)
full-width (all glyphs are converted to full width)
text-decoration: set/cancel text decoration on the font none (cancel any existing text decoration)
underline (text underline)
overline (underline the text)
line-through (strike out) Note: Multiple values are allowed to be set according to line, style, and color.
3. Text shadow
text-shdow: 4px 4px 5px red; property 1: horizontal offset of shadow from original text;
Attribute 2: The vertical offset of the shadow from the original text;
Attribute 3: Blur radius, the higher the value, the wider the shadow;
Attribute 4: The base color of the shadow; Note: Positive offsets move to the right; negative offsets move to the left.
Try multiple shadows 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 the text is aligned with the box it is in left: left-aligned;
right: right alignment;
center: center the text;
justify：使文本展开，使所有文本行的宽度相同，这个属性要谨慎使用。
line-height：设置文本每行之间的高，可以设置无单位的值，line-height: 1.5;表示文本行高设置为字体高度的1.5倍。
letter-spacing:设置字母与字母之间的间距；
word-spacing：设置单词与单词之间的间距；p::first-line{
letter-spacing: 2px;
word-spacing: 4px;
}
如下图，首句是设置了样式的，末句是没有设置样式的。
5、再来看一些比较重要的属性
Font样式
font-variant:在小型大写字母和普通文本之间切换。
font-kerning：开启/关闭间距选项；
font-feature-settings：开启/关闭不同的OpenType字体特性；
font-variant-alternates：控制给定的自定义字体的替代字形的使用；
font-variant-caps：控制大写字母替代字形的使用；
...
文本布局样式
text-indent：指定文本内容的第一行前面应留出多少的空间；
text-overflow：定义如何向用户表示存在被隐藏的溢出内容；
white-space：定义如何处理元素内部的空白与换行；
word-break：指定是否能在单词内部换行；
...
6、Font简写
按照以下顺序：font-style，,font-variant,font-weight,font-stretch,font-size,line-height,font-family。
其中，font-style，font-family必须指定；font-size和line-height之间必须放一个正斜杠。
一个完整例子如下：font: italic normal bold normal 3em/1.5 Helvetica,Arial,san-serif;以上均是参考最权威的MDN Web Docs，总结出来的比较重要的知识点，与君共勉。不妥之处，评论区欢迎您！