color

• 前景色(文字颜色)
• color属性用来设置文本内容的前景色
• 包括文字、装饰线、边框、外轮廓等的颜色
• 关键字transparent等价于rgba(0,0,0,0),完全透明,alpha取值范围为0~1,0代表完全透明,1代表完全不透明

background-color

• 背景色

text-decoration

• 用于设置文字的装饰线
• none：无任何装饰线 可以去除a元素默认的下划线
• underline：下划线
• overline：上划线
• line-through：中划线（删除线）
• u、ins元素默认就是设置了text-decoration为underline

letter-spacing、word-spacing

• letter-spacing、word-spacing分别用于设置字母、单词之间的间距
• 默认是0，可以设置为负数

text-transform

• text-transform用于设置文字的大小写转换
• 可以设置以下值
  • capitalize：将每个单词的首字符变为大写
  • uppercase：将每个单词的所有字符变为大写
  • lowercase：将每个单词的所有字符变为小写
  • none：没有任何影响
• 建议通过text-transform属性来控制网页中英文字母的大小写，不要直接在HTML中固定死书写形式

text-indent

• text-indent用于设置第一行内容的缩进
• text-indent: 2em; 刚好是缩进2个文字

注意: 设置缩进时候单位用em

text-align

• text-align可用于设置元素内容在元素中的水平对齐方式
• 常用的值 * left：左对齐
  • right：右对齐
  • center：正中间显示
  • justify：两端对齐

font-size

• font-size决定文字的大小
• 常用的设置
  • 具体数值+单位
  • 比如100px
  • 也可以使用em单位：1em代表100%，2em代表200%，0.5em代表50%
• 百分比
  • 基于父元素的font-size计算，比如50%表示等于父元素font-size的一半
• 一般给body设置font-size就代表设置网页的默认字体大小
• 其他元素可以基于父元素设置字体大小
• 到时候只需要改变body的字体大小，其他元素都会按照比例改变

font-family

• font-family用于设置文字的字体名称
• 可以设置1个或者多个字体名称（从左到右按顺序选择字体，直到找到可用的字体为止）
• 一般情况下，英文字体只适用于英文，中文字体同时适用于英文和中文
• 所以，如果希望中英文分别使用不同的字体，应该先将英文字体写在前面，中文字体写在后面

@font-face

• @font-face可以让网页支持网络字体(Web Font)，不再局限于系统自带的字体

• 常见的字体种类
  • TrueType字体：拓展名是 .ttf
  • OpenType字体：拓展名是 .ttf、.otf，建立在TrueType字体之上
  • Embedded OpenType字体：拓展名是 .eot，OpenType字体的压缩版
  • SVG字体：拓展名是 .svg、 .svgz
  • web开放字体：拓展名是 .woff，建立在TrueType字体之上

• 并不是所有浏览器都支持以上字体，使用时要多加测试

• 字体下载：http://font.chinaz.com/

<style>
        /* 加载字体文件 */
        @font-face {
            /* 字体文件的位置 */
            src: url("fonts/mini_cut.ttf");
            /* 自定义字体名称 */
            font-family: "迷你剪纸";
        }

        div {
            font-family: "迷你剪纸";
            font-size: 50px;
        }
    </style>

font-weight

• font-weight用于设置文字的粗细（重量）

• 100

  200

  300

  400

  500

  600

  700

  800

  900：每一个数字表示一个重量

• normal：等于400
• bold：等于700
• strong、b、h1~h6等标签的font-weight默认就是bold

font-stlye

• font-style用于设置文字的常规、斜体显示
  • normal：常规显示
  • italic：用字体的斜体显示
  • oblique：文本倾斜显示

font-variant

• font-variant可以影响小写字母的显示形式
• 可以设置的值如下
  • normal：常规显示
  • small-caps：将小写字母替换为缩小过的大写字母

line-height

• line-height用于设置文本的最小行高
• 行高可以先简单理解为一行文字所占据的高度
• 可以设置的值如下
  • 具体数值+单位：比如40px

• 百分比：比如200%，最终的行高值是用百分比乘以元素的字体大小 如果是写百分比，继承下来的就是经过计算后的像素值

• 具体数值：比如1、2.5，最终的行高值是用数字乘以元素的字体大小

• 如果是写具体数值，继承下来的就是具体数值（比如父元素是1.5，那么子元素继承下来也是1.5）

• normal：常规显示，浏览器会基于元素字体调整成一个合理值，范围在1.0~1.2
• 注意区分height和line-height的区别
  • height：元素的整体高度
  • line-height：元素中每一行文字所占据的高度
  • 应用实例：假设div中只有一行文字，如何让这行文字在div内部垂直居中
  • 让line-height等同于height
  • line-height设置的仅仅是最小行高，不能决定最终的行高

font

• font是一个缩写属性
• font-style font-variant font-weight font-size/line-height font-family
• font-style、font-variant、font-weight可以随意调换顺序，也可以省略
• line-height可以省略，如果不省略，必须跟在font-size后面
• font-size、font-family不可以调换顺序，不可以省略