CSS3字体和文本样式基础

字体和文本样式：

一、 长度单位

1：像素 px
就是电脑屏幕上一个个发光的小点，我们眼睛看不出来，像素是我们PC端最常用的一个单位，它是一个固定单位。
2：百分比 %
是父元素的宽高的百分比，是一个相对单位，一般情况下，做流式布局比较多。
3：em
也是一个相对单位，相对于当前元素的字体大小来计算最终大小，也就是1em=1font-size；
如果当前的元素没有设置字体大小，那么会继承祖先元素的字体大小，最终继承到html默认的字体大小，是16px
4：rem
r root 根
也是一个相对单位，相对于根标签html的字体大小来计算最终大小，也就是1rem=1个html的font-size

<style>
      html{
        font-size: 20px;
      }
      section {
        width: 300px;
        height: 300px;
        background-color: pink;
      }
      div {
        width: 10rem;
        height: 10rem;
        background-color: red;
      }
    </style>

二、颜色单位

1：在CSS可以直接使用颜色的单词表示不同的颜色
red、green、yellow、blank等
缺点：颜色单词太多了，不易于描述

2：使用RGB值来表示不同的颜色
RGB（红色，绿色，蓝色）
颜色的值 0-255之间 0最小，255最大
直接用电脑或插件可以吸取颜色的比值

3：RBGA
rgba（red，green，blue，alpha）
alpha 透明度 0-1之间的数值 0是透明，1是不透明

4：使用十六进制的rgb值来表示颜色，原理和上边RGB原理一样
十六进制：0-9，ABCDEF 00表示最小，代替0-255的0，ff表示最大，代替0-255的255
用十六进制的值分别表示红色，绿色，蓝色的浓度
语法：#ff0000，红色，像这样两两重复的表示，可以省略一位
例子：#f00 #0f0 #00f #ccc #ccc #eee #333

5：HSL值（H-色相 0-360，S-饱和度 0-100%，L-亮度 0-100%）
HSLA值

<style>
    .box1{
      width: 100px;
      height: 100px;
      background-color: rgba(189, 100, 100, 0.5);
    }
  </style>

三、字体的样式

1:color 设置字体颜色,也可以设置其他颜色
2:font-size 设置字体大小
3:font-family 可以指定文字的字体
4:@font-face 自定义字体

<style>
    /* 第一步：自定义字体 */
    @font-face {
      /* 你给字体起的名字 */
      font-family:'xiyangyang' ;
      /* 字体引入路径 */
      src: url(./字体/MeowScript-Regular.ttf);
    }
    p{
      color: #f00;
      font-size: 30px;
    /* 设置文字的字体  字体是设计师设计好，提前规定好，我们直接使用即可*/
    /* 第二步：使用自定义字体 */
      font-family:'xiyangyang';
    }
  </style>

四、字体的分类

在网页中将字体分成5大类：
serif ['serif]（衬线字体）
sans-serif（非衬线字体）
monospace （等宽字体）
cursive ['kə:siv]（草书字体）
fantasy ['fæntəsi]（虚幻字体）
可以将字体设置为这些大的分类,当设置为大的分类以后，
浏览器会自动选择指定的字体并应用样式
一般会将字体的大分类，指定为font-family中的最后一个字体 ,用来兜底

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

五、字体其他样式

设置一个文字大小 font-size
设置一个字体 font-family
设置文字斜体 font-style: ;
可选值：
normal 默认值 文字正常显示
italic 文字倾斜 （比较常用）
oblique 文字倾斜 （了解）

设置文字的加粗
font-weight: ;
可选值：
normal 默认值 文字正常显示
bold 文字加粗
bolder 文字加粗
100-900 之间数值 100最细 900最粗 注意没有单位
设置一个小型大写字母
font-variant
可选值：
normal 默认值 文字正常显示
small-caps 设置小型大写字母

font简写
可以统一设置文字相关的一些样式
注意：
1、必须要有字体大小和文字的字体
2、字体大小必须在倒数第二位
文字字体必须在倒数第一位

<style>
      .p1 {
        font-size: 2em;
        font-family: "Times New Roman", Times, serif;
        /* 设置文字斜体  */
        font-style: oblique;
        /* 设置文字的加粗 */
        font-weight: 900;
      }
      .p2 {
        color: red;
        font-size: 35px;
        font-variant: small-caps;
      }
      .p3 {
        color: green;
		font: italic bold 30px serif;
      }
    </style>

六、行间距

1、行高（line height） 文字占有的实际高度
行高=上间距+文字大小+下间距
上间距=下间距
如果要设置行与行之间的空白距离，可以通过设置行高来实现
line-height样式名
可选值：
（1）、直接写大小，单位：px/em/rem/%
（2）、直接写倍数，1/2/3/4/5…，是当前字体大小的倍数
（3）、可以写百分比，100%，200%，300%

2、单行文本在父元素中垂直居中
只需要设置行高跟父元素高度一致

3、font中也可以指定行高
font:字体大小/行高 字体；

文本样式
1：text-transform 可以设置文本的大小写
可选值：
none 默认值 文本正常显示
uppercase 字母大写
lowercase 字母小写
capitalize 单词首字母大写
2：text-decoration 可以用来设置文本的修饰
可选值：
none 默认值 文本正常显示
underline 文本下划线
overline 文本上划线
line-through 文本删除线
3：letter-spacing 可以指定字符间距
4：word-spacing 可以设置单词之间的距离
5：text-align 设置文本对齐的方式
可选值：
left 默认值，文本靠左对齐
right 文本靠右对齐
center 文本居中对齐
注意：设置文本的对齐方式，必须要给文本一定的空间，
如果行内元素的话，它的宽度是被内容撑开
6：text-indent 设置首行缩进
常用的长度单位：em
7：white-space 设置网页如何处理空白，可以设置不换行
8：text-overflow 文本溢出包含元素是发生的事情
可选值：ellipsis 省略号
9：text-shadow：h-shadow v-shadow blur color；
4个参数 （参数之间以空格隔开）
1、阴影的水平位移距离 正值向右，负值向左 必填
2、阴影的垂直位移距离 正值向下，负值向上 必填
3、阴影的模糊半径 选填，默认是0px
4、阴影的颜色 一般情况下用RGBA的形式 选填，默认是字体颜色
10：box-shadow：h-shadow v-shadow blur color
4个参数跟text-shadow一样
唯一不同的是，阴影的颜色，默认是黑色

<style>
      .p1 {
        /* font-size: 30px; */
        /* text-transform:capitalize; */
        /* text-decoration: line-through; */
        /* letter-spacing:10px ; */
        /* word-spacing: 30px; */
      }
      .p2 {
        font-size: 30px;
        /* text-align:center; */
        text-indent: 2em;
      }
      .p3{
        background-color: pink;
        /* 设置单行文本省略号的固定写法 */
        /* 作业：自行研究多行文本省略号的写法 ？*/
        /* 设置宽度 */
         width: 400px;
         /* 设置不换行 */
         white-space: nowrap;
         /* 设置多余的内容裁剪掉 */
         overflow: hidden;
         /* 设置多余的内容以省略号的形式出现 */
         text-overflow: ellipsis;
      }
      h1{
        color: red;
        text-align: center;
        text-shadow: 5px 5px 10px;
      }
      .box{
        width: 100px;
        height: 100px;
        background-color: green;
      }
      /* 需求：当鼠标移入的时候，box四周出现阴影 */
      .box:hover{
        box-shadow: 0px 0px 10px ;
      }
      span{
        text-align: center;
      }
    </style>

七、文本样式2

vertical-align 设置元素垂直对齐的方式
作用：
1、设置图文的对齐方式
可选值：
baseline 基线对齐 默认值 以x的最下方为标准
top 文本靠上
bottom 文本靠下
middle 文本居中
2、解决图片三像素的问题
引入图片后，图片与图片之间会有三像素的空白，正常情况下，
方法一：
vertical-align 非baseline
方法二：
设置其父元素的font-size为0，文字会没
方法三：
设置图片为块元素
方法四:
使图片脱离文档流，设置它浮动或者绝对定位皆可

<style>
        div{
            width: 300px;
            /* font-size: 0; */
        }
        img{
            width: 300px;
            /* vertical-align: baseline; */
            /* display: block; */
        }
    </style>

原文：https://blog.csdn.net/LYC010727/article/details/127993273