【CSS】关于CSS的常用字体文本样式

一、字体属性

（1）font-family——字体名称

/*浏览器从前往后依次进行字体选择，若有该字体则选中，若没有该字体，则向后选择，若全部没有，则设置为浏览器默认字体*/
div{
     
    font-family: Courier, 'arial block', '微软雅黑';
}

（2）font-size——字体大小

/*浏览器默认字体大小——16px*/

/*相对于显示器屏幕分辨率而言*/
div{
      font-size: 12px; }

/*相对于父对象内文本的字体尺寸,1em=16px*/
div{
      font-size: 1.5 em; }

/*相对于根标签内文本的字体尺寸,rem常用于移动端布局中*/
div{
      font-size: 1rem; }

/*可用英文单词表示：small，smaller,large,larger等	*/
div{
      font-size: small; }

/* 相对于父对象中字体的百分比，字体不能自适应 */
div{
      font-size: 80%; }  

（3）font-weight——字体粗细

p {
      
    font-weight:bold; 
}

h1{
      
    font-weight:normal; 
}

span{
     
    font-weight:800;
}

（4）font-style——字体样式

/*常用于页面中将斜体等非正常字体，转换为正常字体显示*/

/*正常显示*/
em {
     
    font-style:normal;
}
/*斜体显示*/
i {
     
    font-style:italic;
}

（5）font——复合属性

**font *font-weight font-size/line-height font-family

div{
     
    font:bold 12px/30px arial,sans-serif,"宋体";
}

---

二、文本属性

（1）color——字体颜色

body {
     
    color:red;
}

h1 {
     
    color:#00ff00;
}

p {
     
    color:rgb(0,0,255);
}

span{
     
    color:rgba(255,0,0,0.1);
}

（2）text-align——文本水平对齐方式

h1 {
     
    text-align:center;
}

h2 {
     
    text-align:left;
}

h3 {
     
    text-align:right;
}

（3）vertical-align——垂直对齐方式

仅适用于图像周围的文本

（4）text-decoration——文本修饰线

h1 {
     
    /*上划线*/
    text-decoration:overline;
}
h2 {
     
    /*贯穿线，删除线*/
    text-decoration:line-through;
}
h3 {
     
    /*下划线*/
    text-decoration:underline;
}
a {
     
    /*取消修饰线*/
    text-decoration: none;
}

（5）text-indent——文本缩进

（6）line-height——文本行高

/*当 line-height = height 时，文本垂直居中*/
p {
     
	height:20px;
    line-height:20px;
}

（7）text-overflow——文本溢出标识

div{
     
    /*文本溢出显示省略号*/
	text-overflow:ellipsis;
}

div{
     
    /*文本溢出进行裁切*/
	text-overflow:clip;
}

如何让【单行文本】显示省略号?

div {
     
    /*1.容器有宽度*/
    width:100px;
    /*2.强制不换行*/
    white-space:nowrap
    /*3.溢出要隐藏*/
    overflow:hidden;
    /*4.最后怎么显：ellipsis省略号，clip裁剪*/
    text-overflow:ellipsis;
}

---