【css】 text 文本

【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;//文字出现了向右和向下两像素红色的影子
}