长度单位

em 与 ex
大多数浏览器,取 ex=0.5em

字体

CSS 制订了 5 种字体系列

Serif : 字体成比例,不等宽,有上下短线.例如Times
Sans-Serif : 字体成比例,不等宽,没有上下短线,如
Arial Verdana Helvetica
monospace : 不成比例,等宽,如Courier New
Cursive : 模仿人的手写体
Fantasy : 其他不容易归类字体

font-family : 具体值,字体系列如 sans-serif;
当具体值包含空格、#、@字符时,加上引号

font-size字体大小
可取值有

xx-small,small,normal,medium,large,x-large等语义值
还有相对大小larger,samller.相对于父元素的字体大小.
length 值,如 18px,绝对大小会继承(传递)给子元素.
percentage,百分值,如font-size : 90%;,不会被继承

注意,font-size继承的是计算值

<style>
  #father{
    font-size : 10px;
  }
  #son{
    font-size : 120%;
  }
</style>
<div id="father">
  <div id="son">
    asasas
  </div>
</div>

那么 div#son 的 font-size 就是继承的10px * 120% = 12px

font属性简写
font : font-style font-weight font-size/line-height font-family;

在 font-size 与 line-height 之间有一个斜线分隔,后面是字体名称

文本

行高line-height : 指示文本行基线之间的距离
取值 : length 如 18px 、percentage 如 20% 、number 如 2 、normal|inherit;

取百分值时,同取一定数值
取 em 时：line-height : 1.5em;时,从父元素继承字体大小 px,乘以这个 1.5
取数值时：line-hright : 2;时,当前元素&子元素都乘以 2

text-indent文本缩进
取值

px,em 很好理解
50%,100%,-100%,取值为百分数的时候,这个百分数基于父元素的宽度,文本替换的时候,不需要 text-indent : 9999em,写成百分数就可以.

text-align横向对齐,只应用于块级元素
取值 left/right/cneter/justify(两端对齐)|inherit;
==注意手动指定 inherit,是继承值,但是它的特殊性变了==

vertical-align垂直对齐 : 只应用于行内元素和替换元素(如 img 表单)
display : table-cell 可以使普通 div 使用该功能.
取值:

super/sub 字面意思是上下标,使该元素基线比父元素基线还远
baseline 基线与父元素基线对齐
top/bottom 行框与父元素行框对齐
percentage 百分数*自己的 line-height,以父元素的基线为起点平移自己的基线
middle 垂直居中, 该元素中点与框中点对齐,也就是父元素的基线+0.5ex
一般认为 1ex = 0.5em,0.5ex 也就是文字高度的一半

所谓基线/行框,看这个
基线,也就是下划线那个位置,是可见部分的最下面

text-transform文本转换
取值:uppercase/lowercase/capitalize/normal/inherit
capital+ize 驼峰化,每个单词首字母大写

text-decoration文本装饰
前面 CSS 彻底研究也说过,补充:
text-decoration 值不能继承,但父元素的 text-decoration 会贯穿子元素,设置子元素 text-decoration:none,关掉的只是子元素的 text-decoration,父元素的样式还存在,只能覆盖,无法关闭.
看实例

<style>
  p
  {
    text-decoration: underline;
    color: red;
  }

  span
  {
    padding: 0 5px;
    text-decoration: overline;
  }
</style>
<p>这是文字这是文字这是文字<span>这是文字span</span>这是文字这是文字这是文字这是文字这是文字</p>

将 span 的 text-decoration:none
将 span 的 text-decoration:overline

而且 text-decoration 的颜色,chrome 不支持定制,和 color 属性文字颜色一致