字体和文本

长度单位

1：像素 px

不同显示器像素大小不同的，显示效果越好，像素越小，反之像素越大

2：百分比 %

根据父元素的样式来计算该值

优势就是父元素宽度放生改变的时候，子元素也会发生改变

3：em

个人那句当前元素的大小来计算 1em=1font-size

浏览器默认大小是16px 磨人的最小是12px

使用em时，当字体大小发生改变，em也会发生改变

4：rem

相对于根元素的字体大小来计算

字体样式

color 设置字体颜色，当然也可以设置其他颜色

font-size 设置字体大小

注意：（1）设置的不是文字本身的大小，而是字符框的大小

font-size 实际上字符框的高度

一般情况下，文字会比字符框稍微小一点，有时也会稍微大一些

（2)常用单位：px rem em

字体分类

在网页中字体分为5类

serif 衬线字体

sans-serif 非衬线字体

monospace 等宽字体

cursive 草书字体

fantasy 虚幻字体

浏览器会自动下载指定的字体应用

字体的其他样式

1：font-style：；设置文字的斜体

可选值：normal  默认值 文字正常显示

italic 文字会倾斜显示    【用的更多】

oblique 文字也会倾斜显示

{ font-style:italic ;}

2：font-weight 用于设置文本的加粗效果

属性值可以100——900之间的值

也可以使用 比较常用

normal   默认值    文字正常显示

bold  文字加粗

{ font-weight: bold;}

3：font-variant   可以用来设置小型的大写字母

可选值： normal      正常显示      默认值

   small-caps  文字以小型的大小字母显示

 { font-variant: normal;}

 行间距

font   简写方式    必须要写字体大小和font-family

          顺序都可以，其他没写的样式，浏览器会默认，指定行高，需要在字体大小后/行高大小

行高（line height）

行高类似于我们上学的单线本，一行一行的，线与线之间的间距就是行高

           网页中的文字实际上也是写在线上的，文字默认会哦在行高中间垂直居中显示

           可以用line-height设置行高

line-height：属性值；

    属性值：

             1：直接是一个大小

             2：可以指定一个百分数，会相对于字体去计算行高

文本样式

1：text-decoration   用来设置文本装饰

可选值：

            none  默认值  正常显示，没有任何修饰

             underline  为文本添加下划线

             overline   为文本添加上划线

             line-through  删除线

2:text-transform：； 用来设置文本的大小写

可选值：

             none 默认值  不添加任何修饰，正常宣誓

             uppercase 所有字母大写

             lowercase 所有的字母小写

              capitalize  单词首字母大写

3：white-space   用来设置网页如何处理空白

可选值：

            mormal  正常

             mowrap  不换行

             per  保留空白

4：text-overflow :  ;    文本溢出的内容如何处理

可选值:

             clip 修建文本

             ellipsis 显示省略好来表示被修剪的文本

.P1{text-decoration: underline;}

a{text-decoration: none;}

.p2{ /*text-transform: uppercase;*/
      /*background-color: red;*/
      /* 以下是设置文本 */

      /* 设置宽度 */
      white-space: nowrap;
      text-overflow: ellipsis;
      width: 200px;

      /* 裁剪多余 */
      overflow: hidden;
           }