CSS随笔之文字样式

今天来到公司早了，半个小时了一个人还都没到呢，做个小笔记。
书到用时方知少，好多东西都学习的太过于浅显，应用到项目的时候才发现很多东西都只知道大概，究其根本的话，了解的太少。
对于页面排版，文字样式如果做得不好看，简直能逼死我强迫症晚期患者，整理出来，以备查阅；

1. 设置字体

在css中字体通过font-family设置字体样式

font-family: Verdana, Arial, Helvetica, sans-serif;```
> 上面的字体设置告诉浏览器首先在访问者的计算机中寻找Verdana字体。如果该访问者的计算机中没有Verdana字体，则寻找Arial字体。若没有Arial字体，再依次寻找Helvetica、sans-serif字体。如果这4种字体都没有，则使用浏览器的默认字体显示。
 font-family属性可以同时声明多种字体，字体之间用逗号分隔开。另外一些字体的名称中间会出现空格，如          Times New Roman，这时需要用双引号将其引起来，使浏览器知道这是一种字体的名称。

#####2.  字体的大小设置
> CSS通过font-size属性来设置文字的大小。

font-size: 12px;```

长度单位：
　　 px 表示在浏览器上1个像素的大小；
　　 em 1em表示在其父元素中字母m的标准宽度；
　　 ex 1ex表示字母x的标准高度。

3. 行高

CSS中通过line-height属性设置。在CSS中line-height的值表示两行文字之间基线的距离，即每行文字的高 度。如果给文字加上下划线，下划线的位置就是文字的基线。

line-height: 30px;```
> 除了可以使用px等作为行高的单位，也可以不加任何单位，此时行高应该写成与字体大小的比值。

line-height: 1.5;```

CSS中字体、大小和行高的组合：

font: 12px/18px Verdana, Arial, Helvetica, sans-serif;
font: 12px/1.5 Verdana, Arial, Helvetica, sans-serif;```

#####4. 文字颜色

color: blue;
color: #0000FF;
color: rgb(0,0,255);
color: rgb(0%,0%,100%);

#####5. 空白折行
      white-space: nowrap;
#####6. css1中定义的文字相关属性样式

| 属性|类型|    说明|
| :-------------: |:----------:|:-------------|
|font-family|字体|字体类型|
|font-style |字体|    字体样式，包括：normal、italic（斜体）、oblique（倾斜）|
|font-variant|  字体| 字体大小写，包括：normal、small-caps（小型的大写字母字体）|
|font-weight|   字体| 字体粗细|
|font-size| 字体| 字体大小|
|font|  字体（复合属性）|   字体样式，可以包含所有字体属性的声明值|
|color  |颜色|    字体颜色|
|word-spacing|  文本| 词间距|
|letter-spacing|    文本| 字符间距|
|text-decoration    |文本|    文本修饰线，包括：none（默认值）、blink（闪烁）、underline（下划线）、line-through（中划线）、overline（上划线）|
|vertical-align|    文本| 文本垂直对齐方式，包括：auto、baseline、sub、supper、top、text-top、middle、bottom、text-bottom、length。|
|text-transform|    文本| 文本大小写，包括：none（默认值）、capitalize（首字母大写）、uppercase（大写）、lowercase（小写）|
|text-align |文本|    文本的水平对齐方式，包括：left、right、center、justify（两端对齐）|
|text-indent|   文本| 首行缩进|
|line-height|   文本| 行高|

#####7. CSS2新增字体、颜色和文本属性
|属性|    类型| 说明|
|--------|:------------:|---------------|
|font-size-adjust|  字体| 是否强制对文本使用同一尺寸|
|font-stretch|  字体| 是否横向拉伸变形字体|
|text-shadow|   文本| 文本阴影效果|
|direction| 文本| 文本流入的方向，包括：ltr（默认值，从左到右）、rtl（从右到左）、inherit（由继承获得）|
|unicode-bidi|  文本| 定义同一个页面中存在不同方向读进的文本显示，与direction属性一起使用|

#####8. CSS3新增字体、颜色和文本属性


|属性|    类型| 说明|
|--------|:------------:|---------------|
|text-shadow|   文本| 文本阴影或模糊效果|
|text-overflow| 文本| 省略文本的处理方式|
|word-wrap| 文本| 文本超过指定容器的边界时是否断开换行|
     //示例

text-shadow: -0.1em 0.1em #CCCCCC;

text-shadow: -0.1em 0.1em 0.3em #CCCCCC;

text-shadow: -0.1em 0.1em #CCCCCC, -0.1em 0.1em 0.3em #CCCCCC;```

text-shadow 属性的第一个值表示水平偏移；第二个值表示垂直偏移，正值偏右或偏下，负值偏左或偏上；第三个值表示模糊半径，可选；第四个值表示阴影是颜色，可选。
　　text-shadow属性可以接受一个以逗号分隔的阴影效果列表，并应用到元素的文本上。

  text-overflow: ellipsis;

text-overflow属性值包括：clip | ellipsis | ellipsis-word。
　　clip：不显示省略标记，只是简单的裁切。
　　ellipsis：当对象内文本溢出时显示省略标记，省略标记插入的位置是最后一个字符。
　　ellipsis-word：当对象内文本溢出时显示省略标记，省略标记插入的位置是最后一个词。

  word-wrap: break-word;

word-wrap属性值包括：normal | break-word。
　　normal：连续文本换行。
　　break-word：内容将在边界内换行。

前端之路坎坷，且行且珍惜。