CSS文本样式

Asunny5

已于 2022-10-28 15:02:22 修改

阅读量763

点赞数 1

文章标签： html 前端 css

于 2022-10-25 17:05:37 首次发布

本文链接：https://blog.csdn.net/m0_60979337/article/details/127505445

版权

文本样式均可继承

1. font-size 字体大小

2.color 字体颜色

3.text-align :left 、center、right

4.单词间距：默认是以空格区分单词。 word-spacing:10px

5.字间距：字母之间的距离。默认是以空格区分单词。letter-spacing=10px

6.字母转换：text-transform:none; (默认）
1.uppercase 全转大写
2.lowercase 全转小写
3.capitalize 首字母转大写

7.文本装饰：text-decoration:none;(默认)
1.underline 下划线
2.overline 上划线
3.line-through 删除线

8.文本空格和换行处理：
white-space：
1）normal ；(默认）忽略文本中所有的空白，换行符。只有在文本存在<br>或文本达到框的约束时，文本才会换行
2）nowrap；和normal类似，忽略文本中所有的空白、换行符；遇到框的宽度约束时不会自动换行，文本只有在有 br 时才会换行
3）pre：保留文本中的空白、换行符；遇到框的宽度约束时不会自动换行，文本存在 <br> 或文本中有换行符时，文本才会换行
4)pre-wrap：和pre类似，保留文本中的空白、换行符；文本存在 <br> 或文本中有换行符时，或者遇到框的宽度约束时，文本都会换行
5)pre-line：忽略文本中的空白符；文本存在 <br> 或文本中有换行符时，或者遇到框的宽度约束时，文本都会换行

9.文本方向 direction ：
1） ltr ；（默认从左到右）

  <style>
        .box{
            width: 400px;
            height: 100px;
            background-color: pink;
        }
        .box1{
            direction: ltr;
        }
  </style> 

<body>
   <div class="box box1">
       2022年10月25日,STAY REAL. 
   </div>
</body>

2)rtl ;(从右到左）不添加 unicode-bidi: bidi-override属性文字方向并不会从右到左排布

<style>
        .box{
            width: 400px;
            height: 100px;
            background-color: pink;
        }
         .box2{
            direction:rtl ;
        }
 </style>

<body>
        <div class="box2 box ">
        2022年10月25日,STAY REAL. 
         </div>
</body>

3）.unicode-bidi: bidi-override ；创建一个附加的嵌入层面。重新排序取决于direction属性

<style>
        .box{
            width: 400px;
            height: 100px;
            background-color: pink;
        }
         .box2{
            direction:rtl ;
        }
         .box5{
            unicode-bidi: bidi-override;
        }

 </style>

<body>
        <div class="box2 box box5 ">
        2022年10月25日,STAY REAL. 
         </div>
</body>

(添加了unicode-bidi属性但是英文单词有问题！！给英文单词嵌套一个新的层面。

4）. unicode-bidi: embed ；创建一个附加的嵌入层面


 <style>
      .box{
            width: 400px;
            height: 100px;
            background-color: pink;
        }

      .box2{
            direction:rtl ;
        }
    /* 创建一个附加的嵌入层面 */
      .box4{
            unicode-bidi: embed;
        }
      .box5{
            unicode-bidi: bidi-override;
        }

 </style>
<body>  
        <div class="box2 box box5 ">
                2022年10月25日,
           <span class="box4">STAY</span>  
           <span class="box4">REAL.</span> 
        </div>
</body>

5）.unicode-bidi: normal ；默认不适用附加的层面


 <style>
      .box{
            width: 400px;
            height: 100px;
            background-color: pink;
        }

      .box2{
            direction:rtl ;
        }
     /* 默认。不适用附加的层面 */
       .box3{
            unicode-bidi:normal ;
        }

      .box4{
            unicode-bidi: embed;
        }
      .box5{
            unicode-bidi: bidi-override;
        }

 </style>
<body>  
        <div class="box2 box box5 ">
                2022年10月25日,
           <span class="box3">STAY</span>  
           <span class="box4">REAL.</span> 
        </div>
</body>

因为bidi 已经创建了一个新的层面，所以normal在这个属性中不起作用。

10.文本行间距 line-height
1）.line-height = 当前行元素的高度文本居中
2）baselin基线对齐(默认)
3）top顶线对齐
4）middle中线对齐