DAY 6

css文字样式

CSS文字样式包含文本（Text）样式和字体(Font）样式。

CSS字体样式

字体样式是用来定义字体系列、大小、粗细、显示风格和变形等。

字体系列：font-family

font-family规定元素的字体系列。在css中，有两种不同类型的字体系列：

通用字体系列： 拥有相似外观的字体系统组合。

特定字体组合： 具体的字体系列，如微软雅黑、黑体、宋体等。

p { font-family:"微软雅黑";}

可以为一个元素指定多个字体，各个字体之间用英文逗号分隔开。如果浏览器不支持第一种字体就会使用下一种字体，如果都用不了就用系统默认字体。

div {font-family: Arial,"Microsoft Yahei", "微软雅黑";}

字体大小：font-size

font-size定义字体大小。属性值可以为绝对值或相对值。绝对值是将文本设置为指定大小，用户不能在浏览器中改变文本大小。相对值是相对于周围的元素来设置大小，允许用户在浏览器中改变文本大小。

table{
        font-size: 10px;
     }

谷歌浏览器默认的文字大小为16px。

字体粗细：font-weight

font-weight用来设置字体的粗细。

 table{
          font-weight: bold;//定义粗体字符
        }

字体风格：font-style

font-style用来定义字体的风格。

 table{
          font-style: italic;//定义斜体文本
        }

综合设置字体属性：font

字体属性可以通过font来综合设置，更节约代码。

body{
      font: font-style font-weight font-size/line-height font-family;
     }

使用font属性时，必须按照上面的顺序来写，各个属性以空格分开。
不需要设置的属性可以省略不写，但必须保留font-size和font-family属性，否则font属性无效。

css字体样式总结：

CSS文本样式

CSS Text属性可以定义文本外观，如文本颜色、文本对齐、文本装饰、文本缩进、行间距等。

文本颜色：color

color属性规定文本的颜色。color取值方式有三种：

文本缩进：text-indent

text-indent规定文本块中首行文本的缩进。该属性值可以是像素值、百分比或相对值em，可正值可负值。如果是负值则首行会被缩进至左边。建议使用em作为设置单位，1em 就是一个字的宽度。如果是汉字的段落，1em 就是一个汉字的宽度。

  div{
        margin: 20px auto;
        width: 500px;
        height: 500px;
   }
   
  p{
        text-indent: 2em;
    }

<div>
      <p>
      4月24日，人力资源和社会保障部举行2023年一季度新闻发布会。
      人力资源和社会保障部新闻发言人、政策研究司司长卢爱红介绍，1-3月城镇新增就业297万人，
      3月份全国城镇调查失业率为5.3%，就业局势保持总体平稳。
      </p>
</div>

首行缩进.jpg

文本对齐：text-align

text-align规定元素内文本的水平对齐方式。

div{
   text-align: center;//div里的文本居中对齐
   }

文本装饰：text-decoration

text-decoration属性规定添加到文本的修饰，可给文本添加下划线、删除线、上划线等，修饰的颜色由color属性设置。

div{
   text-decoration: none;
   }

行高：line-height

line-height属性用来设置行间的距离，即行高。

什么是行高？

行高就是包括内容区域和以内容区为基础对称拓展的空白区域（即上下半行距）。如图，行高=上半行距+font-size（内容区域）+下半行距。

一般情况下，也可以认为行高为上一行文本的基线到下一行文本基线之间的距离。

如何设置行高使文本垂直居中？

首先，文字垂直居中是分单行文字和多行文字的，不同情况就不同做法。

单行文本垂直居中：line-height=height

<div>
        4月24日，人力资源和社会保障部举行2023年一季度新闻发布会。
</div>

div {
        width: 600px;
        height: 300px; 
        margin: 0 auto;
        background-color: pink;
        font-size: 16px;
        line-height: 300px; 
     }

因为行高line-height=内容区域+上下半行距，当行高等于容器高度时，就是让文字和上下半间距等于容器高度，而上下半间距是相等的，就能使文本居中。

多行文本垂直居中：

1.将子元素设置为行内块元素，模拟成单行文字

将子元素设置为行内块元素，并且设置vertical-align:middle来实现，需要注意的是，子元素span会继承父元素div的行高，所以我们需要重设一个适宜的行高。

<div>
       <span>
          4月24日，人力资源和社会保障部举行2023年一季度新闻发布会。
        人力资源和社会保障部新闻发言人、政策研究司司长卢爱红介绍，1-3月城镇新增就业297万人，
        3月份全国城镇调查失业率为5.3%，就业局势保持总体平稳。
      </span>        
</div>

div {
          width: 600px;
          height: 200px; 
          margin: 0 auto;
          background-color: pink;
          font-size: 16px;
          line-height: 200px; 
    }
    
 span{
        display: inline-block;
        vertical-align: middle;
        line-height: 24px;
    }

2.模拟表格

将父元素div 模拟成表格table,子元素span模拟成表格单元格(table-cell)；让子元素设置vertical-align:middle来实现。

div {
          display:table;
          width: 600px;
          height: 200px; 
          margin: 0 auto;
          background-color: pink;
          font-size: 16px;
    }
    
 span{
        display: table-cell;
        vertical-align: middle;     
    }

3.使用flex布局

我们可以通过display属性设置，使用弹性盒布局来实现这个效果。

  div {
          display: flex; 
          width: 600px;
          height: 200px; 
          margin: 0 auto;
          background-color: pink;
          font-size: 16px;
          align-items:center;
       }

CSS文本样式总结：

CSS基础（2）| 青训营笔记