【css】 text 文本

冷不防 2022-04-12 05:26 267阅读 0赞

# 【css】 text 文本 #

## 所有css文本属性 ##

color	          设置文本颜色
        direction	          设置文本方向。
        letter-spacing	  设置字符间距
        line-height	          设置行高
        text-align	          对齐元素中的文本
        text-decoration	  向文本添加修饰
        text-indent	          缩进元素中文本的首行
        text-shadow	          设置文本阴影
        text-transform 	  控制元素中的字母
        unicode-bidi	  设置或返回文本是否被重写
        vertical-align	  设置元素的垂直对齐
        white-space	          设置元素中空白的处理方式
        word-spacing 	  设置字间距

**文本颜色**

十六进制值---如：#FF0000;
    一个RGB值 ---如：RGB(255,0,0);
    颜色的名称 --如：red;
    body{
          color :  red ;        //颜色的名称
          color :  #00A000 ;    //十六进制值
          color :  rgb(255,0,0); //一个RGB值
    }

**文本对齐的方式**

文本排列属性是用来设置文本的水平对齐方式。;
     文本可居中或对齐到左或右，两端对齐;
     当text - align设置为"justify"，每一行被展开为宽度相等,
     左，右外边距是对齐（如杂志和报纸）。
    h1 {
          text-align : center; //文本居中
          text-align : right;  //文本靠右
          text-align : justify; //文本整体两侧对齐
    }

**文本修饰**

text - decoration 属性用来设置或删除文本的装饰。
    从设计的角度看 text - decoration属性主要是用来删除链接的下划线：
    a {
      text - decoration:none;  //下划线消失
      text - decoration:overline; //字体上方出现上划线
      text - decoration:line-through; //字体中间出现中划线
      text - decoration:underline;} //字体下方出现下划线
    }

**文本转换**

文本转换属性是用来指定在一个文本中的大写和小写字母。
    可用于所有字句变成大写或小写字母，或每个单词的首字母大写。
    p{
        text - transform:uppercase; //文本全部都是大写
        text - transform:lowercase; //文本全部都是小写
        text - transform:capitalize;} //文本单词首位字母都是大写
    }

**文本缩进**

文本缩进属性是用来指定文本的第一行的缩进
    p {
       text - indent:50px; //文本第一行向右偏了50像素
    }

**指定字符之间的空间**

这个例子演示了如何增加或减少字符之间的空间
    h1 {
        letter - spacing:2px; //每个字之间的距离是2px，文本长度被拉长了
        letter - spacing:-3px; //每个字符之间距离-3px，文本字符间变得挤了
    }

**指定行与行之间的空间**

这个例子演示了如何指定在一个段落中行之间的空间
    p{
      line - height:70%;// 上下行之间行高变得挤了
      line - height:200%;// 上下行之间行高变得宽了
    }

**设置元素的文本方向**

这个例子演示了如何改变元素的文本方向
    div{
       direction : rtl; //文本从右到左的书写方向
    }

**增加单词之间的空白空间**

这个例子演示了如何增加一个段落中的单词之间的空白空间
    p{
     word - spacing : 30px;//这个是文本单词和单词之间距离变宽了
    }

**在元素内禁用文字环绕**

这个例子演示了如何禁用一个元素内的文字环绕
    p
    {
        white-space:nowrap; //这么多相同的文字最后只显示了一排
     }
    
      <p>
      这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。
      这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。
      这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。
      这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。
      这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。
      </p>

**垂直对齐图像**

这个例子演示了如何设置文本的垂直对齐图像。
    img.top {
    	    vertical-align:text-top; //从上往下对齐
    	    vertical-align:text-bottom;//从下往上对齐
    }

**添加文本阴影**

这个例子演示了如何设置文本阴影。
    h1 {
        text-shadow:2px 2px #FF0000;//文字出现了向右和向下两像素红色的影子
    }