百度前端技术学院 第三天整理（上）

1、用于样式文本的css属性通常可以分为两类

答：1、字体样式：什么类型的字体

        2、文本布局风格：文本间距以及其他布局功能的属性

2、color：属性设置选中元素的前景内容的颜色 (通常指文本，不过也包含一些其他东西）

3、text-decoration：放置在文本上方或者下方的线

4、font-family: 表示字体的种类：arial类型的字体可以在任何电脑上找到

5、CSS 定义了 5 个常用的字体名称:  serif, sans-serif, monospace, cursive,和 fantasy.

 6、font-size设置字体的大小

7、px (像素): 将像素的值赋予给你的文本。这是一个绝对单位， 它导致了在任何情况下，页面上的文本所计算出来的像素值都是一样的。

  ems: 1em 等于我们设计的当前元素的父元素上设置的字体大小 (更加具体的话，比如包含在父元素中的大写字母 M 的宽度) 如果你有大量设置了不同字体大小的嵌套元素，这可能会变得棘手, 但它是可行的，如下图所示。为什么要使用这个麻烦的单位呢? 当你习惯这样做时，那么就会变得很自然，你可以使用em调整任何东西的大小，不只是文本。你可以有一个单位全部都使用 em 的网站，这样维护起来会很简单。

  rems: 这个单位的效果和 ems 差不多

8、font-style:normal,italic,oblique.表示的是字体的样式

9、font-weight:设置文字的粗体大小（normal，bold）也可以是正常的数值

10、text-transform:允许你设置要转换的字体（none，uppercase，lowercase，capitalize，full-size）

11、text-decoration：（none，underline，overline，line-through（穿过文本的线））

12、text-shadow:4px 4px 5px red;文字阴影

4 个属性如下:

1. 阴影与原始文本的水平偏移，可以使用大多数的 CSS 单位 length and size units, 但是 px 是比较合适的。这个值必须指定。
2. 阴影与原始文本的垂直偏移;效果基本上就像水平偏移，除了它向上/向下移动阴影，而不是左/右。这个值必须指定。
3. 模糊半径 - 更高的值意味着阴影分散得更广泛。如果不包含此值，则默认为0，这意味着没有模糊。可以使用大多数的 CSS 单位 length and size units.
4. 阴影的基础颜色，可以使用大多数的 CSS 颜色单位 CSS color unit. 如果没有指定，默认为 black。

13、多重阴影：

text-shadow: -1px -1px 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);

二、文字的布局

1、text-align:用来控制文本如何和它所在的内容盒子对齐（left，right，center,justify）

2、line-height：设置文本每行之间的高，也可以设置一个没有单位的值，无单位的值乘以字体大小，来获得最后的行高，

推荐的行高大约是1.5~2（双倍行距），所以要把我们的文本行高设置为字体高度的1.5倍

使用  line-height：1.5；来设置

3、letter-spacing 和 word-spacing 属性允许你设置你的文本中的字母与字母之间的间距、或是单词与单词之间的间距。

4、其他参考地址：https://developer.mozilla.org/zh-CN/docs/Learn/CSS/为文本添加样式/Fundamentals