CSS_文本样式

文本

• text-indent: 首行缩进

• text-decoration: 文本划线

  ​ none underline overline line-through
  ​ 划线也可以设置颜色 和 线型风格

• text-align: 水平对其方式

  ​ left center right
  ​ 支持img, 文字等水平对其

• text-overflow: ellipsis 将溢出的隐藏内容用 … 来代替
  常配合 white-space 和 overflow

• 文字阴影
  text-shadow: 水平位移 垂直位移 模糊度 阴影颜色;

• 垂直对其方式:

  • vertical-align: top middle bottom (默认对外对齐)
  • 如果vertical-align需要对内对齐,需要配合以下属性:
    display: table-cell 将当前元素转为 td单元格

<style>
        a{
            text-decoration: none;
        }
        a:hover{
            text-decoration: underline ;
        }
        .box{
            width: 234px;
            height: 300px;
            border: 1px solid red;
            text-align: center;
        }
        .box p:nth-of-type(1){
            color: #333;
            font-size: 14px;
        }
        .box p:nth-of-type(2){
            color: #b0b0b0;
            font-size: 12px;
        }
        .box p:nth-of-type(3){
            color: #ff6700;
            font-size: 14px;
        }
        .box2{
            width: 200px;
            height: 20px;
            border: 1px solid blue;
			/*两个属性一起用*/
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .box3{
            width: 200px;
            height: 20px;
            border: 1px solid green;
            /*三个属性一起用*/
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .box4{
            width: 200px;
            height: 20px;
            border: 1px solid orange;
            /* 溢出隐藏用 ... 代替 */
            white-space: nowrap;
            /* overflow: hidden; */
            text-overflow: ellipsis;
            /* 文字阴影 */
            text-shadow: 10px 20px 30px red;
        }
        .box5{
            width: 500px;
            height: 300px;
            vertical-align: top;
        }
        .box6{
            width: 500px;
            height: 300px;
            border: 1px solid blue;
			/*两个属性一起用*/
            vertical-align: middle;
            display: table-cell;
        }
</style>

<a href=""> 百度一下 </a>
    <div class="box">
        <img src="./resource/1.jpg" width="160">
        <p>小米9 6GB+128GB</p>
        <p>骁龙855，索尼4800万超广角微距三摄</p>
        <p>2999元</p>
    </div>
    <br>
    <br>
    <br>
    <div class="box2">Igiveyouface,youdon'thaveface</div>
    <br><br><br>
    <div class="box3">I give you face, you don't have face</div>
    <br><br><br>
    <div class="box4">文本样式1</div>
    <br><br><br>
    文本 <textarea class="box5"> 文本样式2 </textarea>
<div class="box6">文本样式3</div>