【前端】-014-页面制作-CSS-文本样式

字体样式

1. 字体大小：font-size: 2em
2. 字体型号：font-famliy: [ <family-name> | <generic-family> ] #
3. 字体粗细：font-weight: normal | bold | 100 | 200 | 300 | ……900
4. 倾斜：font-style: normal | italic | oblique

• italic:字体本身的斜体字体；
• oblique：强制倾斜文字；

5. 行高：line-height: normal | <number> | <length> | <percentage>

• normal：由浏览器决定，通常是1.1~1.2
• 当line-height为数字，子元素继承时，改行的高度为子元素的字号大小*line-height。
• 采用其他方式，表示line-height时，子元素的行高为父元素计算后的固定行高，不会改变。

6. 组合包（常用值）font: style | weight | size/line-height | family

   If these conditions are not met, the property is invalid and is entirely ignored.

• 其中，font-style、font-weight和line-height是可选的，font-size和font-family是必填项。
• 例如：font: 30px/2em "Consolas", monospace表示设置字体大小30px，行高2被字体大小，首选字体为"Consolas"备用monospace

7. 字体颜色：color: #ff00ff| color:rgba(0, 0, 0, 0~1)

对齐方式

1. text-align: left | right | center | justify
2. vertical-align <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align" >[src]</a> : baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length>

inline-level and table-cell elements. It also applies to ::first-letter
and ::first-line
.
Percentages refer to the line-height
of the element itself

3. text-indent<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-indent">[src]</a>: <lenght> | <percentage>

Applies block containers
Percentages refer to the width of the containing block

其中，如果将text-indent设置一个负的极大值，则里面的文字将跑出容器，达到隐藏文字的作用。

格式处理

1. 设置是否保留文本的换行和空格等格式，white-space: normal | nowrap | pre | pre-wrap | pre-line

• normal: 合并换行和空格，支持自动换行；
• nowrap: 合并换行和空格，不支持自动换行；
• pre: 完全保留原始文本样式，但是不支持自动换行；
• pre-wrap: 完全保留原始文本样式，支持支持自动换行；
• pre-line: 只保留原文本的换行，空格会合并，支持自动换行

2. 设置在页面便于让文本支持自动换行，word-wrap: normal | break-word

• normal, 不支持自动换行；
• break-word: 支持自动换行

3. 设置英文可支持换行自动分割单词，word-break: normal | keep-all | break-all

• keep-all ≈ normal: 表示不支持拆分单词；
• break-all: 表示支持任意两个字母分割

文本修饰

1. 设置文本的阴影效果：text-shadow: none | [ <length>{2,3} && <color> ? ]#

• none: 表示没有阴影效果；
• text-shadow: 10px 20px 30px #ff00ff，表示文本在x轴偏移10px，在y轴偏移20px，30px表示阴影的模糊半径，最后一个是阴影的颜色，其中第三个数值（30px）和颜色可不写（采用默认文字颜色）

2. 给文本设置下划线上划线和贯穿线的样式：text-decoration: none | [ underline || overline || line-through ]

其他设置

1. 设置过长文本缩略显示"..."效果

• text-overflow: clip | ellipsis, 其中clip为默认值，ellipsis设置截断
• overflow: hidden;，溢出的时候截掉
• white-space: nowrap;，强制不换行

2. 设置鼠标的指针样式：cursor: [<uri>, ]* [auto | default | none | help | pointer | zoom-in | zoom-out | move]

3. 强制继承，某一个子元素可设置为父元素的属性值，color: inherit