CSS文本样式

目录

 二、行间距

1、行高（line height）

 2、单行文本在父元素中垂直居中

3、font中也可以指定行高

 三、文本样式

1:text-transform

2:text-decoration

3: letter-spacing

4: word-spacing

5: text-align

display

6: text-indent 

7: white-space

8: text-overflow

9: text-shadow

10:box-shadow

11:vertical-align  

---

在网页中，一般将字体分成5大类：
serif（衬线字体）
sans-serif（非衬线字体）
monospace （等宽字体）
cursive（草书字体）
fantasy（虚幻字体）

可以将字体设置为这些大的分类,当设置为大的分类以后，浏览器会自动选择指定的字体并应用样式，一般会将字体的大分类，指定为font-family中的最后一个字体，用来兜底。

<p style="font-size: 20px; font-family: serif">衬线字体：我是一段文字，ABCDEFGabcdefg</p>
<p style="font-size: 20px; font-family: sans-serif">非衬线字体：我是一段文字，ABCDEFGabcd</p>
<p style="font-size: 20px; font-family: monospace">等宽字体：我是一段文字，IHABCDEabcdefg</p>
<p style="font-size: 20px; font-family: cursive">草书字体：我是一段文字，ABCDEFGabcdefg</p>
<p style="font-size: 20px; font-family: fantasy">虚幻字体：我是一段文字，ABCDEFGabcdefg</p>

 二、行间距

1、行高（line height）

文字占有的实际高度 
行高=上间距+字体的大小+下间距
其中，字体是垂直居中显示，上间距=下间距
line-height  设置行高

可选值：
        1.直接放一个大小，例如：40px
        2.还可以放倍数，是当前字体大小的倍数
        3.可以放百分比

 2、单行文本在父元素中垂直居中

只要设置父元素的行高和高度一致即可

3、font中也可以指定行高

font:字体大小/行高  字体类型;

<style>
.p1{
  color: red;
  line-height: 200%;
  font: italic bold 30px/50px serif;
}
.box{
  width: 200px;
  height: 200px;
  background-color: aquamarine;
  line-height: 200px;
}
</style>

 三、文本样式

1:text-transform

作用：可以用来设置文本的大小写

可选值：
1.none     默认值，文本正常显示
2.lowercase  文本以小写字母显示
3.uppercase  文本以大写字母显示
4.capitalize  首字母大写

text-transform:capitalize;

2:text-decoration

作用：设置文本的修饰

可选值：
1.none  默认值，文本正常显示
2.overline  上划线
3.underline  下划线
4.line-through  删除线

text-decoration:line-through;

3: letter-spacing

作用：可以指定字符间距 

 letter-spacing: 20px;

4: word-spacing

作用：可以设置单词之间的距离
       

word-spacing:20px;

5: text-align

作用：用于设置文本的对齐方式

可选值：
1.left  默认值  文本靠左显示
2.right  文本靠右显示
3.center  文本居中显示
4.justify  两端对齐

text-align：center;

display

作用：实现元素之间的相互转化

可选值：
1.none    隐藏元素
2.block   将元素专成块元素
3.inline   将元素转成行内元素
4.inline-block  将元素转成行内块元素
注意：元素之间的相互转换，可以用，但还是标签的本来分类为主

display: inline;

6: text-indent 

设置首行缩进

可选值：常用长度单位： px，em ，rem 

text-indent:2em;

7: white-space

设置网页如何处理空白

white-space:nowrap;

8: text-overflow

文本溢出包含元素时发生的事情
设置单行文本的省略号固定写法

text-overflow: ellipsis;

9: text-shadow

设置文本的阴影

4个参数：
（1）、阴影的水平位移距离   正值向右偏移，负值向左偏移   必选
（2）、阴影的垂直位移距离   正值向下偏移，负值向上偏移   必选
（3）、阴影的模糊半径       可选    默认0px
（4）、阴影的颜色  一般用rgba颜色  可选，默认是字体的颜色

text-shadow:10px 10px 10px rgba(255, 0, 0, .4);

10:box-shadow

设置盒子的阴影

4个参数：
（1）、阴影的水平位移距离   正值向右偏移，负值向左偏移   必选
（2）、阴影的垂直位移距离   正值向下偏移，负值向上偏移   必选
（3）、阴影的模糊半径       可选    默认0px
（4）、阴影的颜色  一般用rgba颜色  可选  默认是黑色

box-shadow: 5px 5px 30px ;

11:vertical-align  

作用：
1、设置图文对齐方式
2、解决图片三像素的问题

可选值：
baseline  基线对齐  以英文x最底下为对齐标准
bottom   底部对齐
top      顶部对齐
middle   居中对齐

vertical-align：middle;

 补充：面试题：什么是图片三像素的问题，如何解决这个问题

1、vertical-align 设置非baseline默认值即可
2、可以设置其父元素的font-size为0,注意如果父元素里有文字，需要重新设置字体大小
3、可以讲图片转成块元素
4、将元素脱离文档流，例如可以设置浮动，设置弹性盒子，设置绝对定位