CSS属性之文本（Text）属性 常用14个

最新推荐文章于 2023-10-04 11:55:04 发布
最新推荐文章于 2023-10-04 11:55:04 发布
阅读量2.4k 收藏 8
点赞数 1
分类专栏： CSS学习笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/h15882065951/article/details/55250252
版权

color属性


color属性设置文本字体颜色。

颜色值有三种写法：
  • 直接写颜色名，如：red
  • 十六进制，如：#d2d2d2
  • rgb颜色，如：rgb(255,0,255),注：数值最大为255，最小为0，即rgb（0,0,0）到rgb(255,255,255)。

 
<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8">
	<title>文本属性</title>
	<style>
	  
	 div#div1 {
	   color: red;
	 }
	 div#div2 {
	   color: #d2d2d2;
	 }
	 div#div3 {
	   color: rgb(255,0,255);
	 }
	
	</style>
  </head>
  <body>
    
	<div id="div1">
	  Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
	</div>
	
	<div id="div2">
	  Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
	</div>
	
	<div id="div3">
	  Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
	</div>
	 
  </body>
</html>

效果如下：



direction属性

direction属性指定文本方向/书写方向。

属性值：
  • "ltr"--文本方向从左到右显示。
  • "rtl"--文本方向从右到左显示。

 
<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8">
	<title>文本属性</title>
	<style>
	  #p2 {
	    direction: ltr;
	  }
	  #p3 {
	    direction: rtl;
	  }
	 
	
	</style>
  </head>
  <body>
    
	<p id="p1">文本默认方向。</p>
	<p id="p2">文本从左到右显示。这是设置的lrt值。！</p>
	<p id="p3">文本从右到左显示。这是设置的rtl值。！</p>
	 
  </body>
</html>

效果如下：



letter-spacing属性
letter-spacing属性增加或减少字符间的空白（字符间距）。letter(字母，文字)，spacing(间距，距离)。
属性值：
  • 可为正值，意为增加字符间距。
  • 可为负值，意为减少字符间距。
  • 当值为0时，表示字符间距不变，为默认。

 
<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8">
	<title>文本属性</title>
	<style>
	  #p1 {
	    letter-spacing: 0px;
	  }
	  #p2 {
	    letter-spacing: 3px;
	  }
	  #p3 {
	    letter-spacing: -5px;
	  }
	 
	
	</style>
  </head>
  <body>
    
	<p id="p1">文本默认方向。</p>
	<p id="p2">文本从左到右显示。</p>
	<p id="p3">文本从右到左显示。</p>
	 
  </body>
</html>

效果如下：



word-spacing属性

word-spacing属性增加或减少单词间的间距。

属性值同letter-spacing一样。




line-height属性
line-height属性设置以百分比计的行高。大多数浏览器的默认行高间距为110%~120%。

属性值：
  • number,设置数字，此数字与当前字体尺寸相乘来设置行高。
  • 百分比，设置为当前字体尺寸的百分比行高间距。
  • length,设置为固定的行高间距。

 
<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8">
	<title>文本属性</title>
	<style>
	  
	  #p2 {
	    line-height: 60%;
	  }
	  #p3 {
	    line-height: 2;
	  }
	 
	
	</style>
  </head>
  <body>
    
	<p id="p1">
      这是默认的行高。<br>
      这是默认的行高。<br>
	  大多数浏览器的默认行高是110%~120%。<br>
	</p>
	<p id="p2">
      这是减少两行间的的行高。<br>
      这是减少两行间的的行高。<br>
      这是减少两行间的的行高。<br>  
	</p>
	<p id="p3">
      这是增加两行间的行高。<br>
      这是增加两行间的行高。<br>
      这是增加两行间的行高。<br>     
	</p>
	
	 
  </body>
</html>


效果如下：





text-align属性

text-align属性设置文本水平方向上的对齐方式。
属性值：
  • left,文本水平方向上左对齐，注：浏览器默认的方向。
  • right,文本水平方向上右对齐。
  • justify,文本水平方向上两端对齐。

 
<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8">
	<title>文本属性</title>
	<style>
	  #p1 {
	    text-align: left /* 左对齐 */
	  }
	  #p2 {
	    text-align: right; /* 右对齐 */
	  }
	  #p3 {
	    text-align: justify; /* 两端对齐 */
	  }
	 
	
	</style>
  </head>
  <body>
    
	<p id="p1">
      这是默认的行高。<br>    
	</p>
	<p id="p2">
      这是减少两行间的的行高。<br>     
	</p>
	<p id="p3">
      这是增加两行间的行高。<br>  
	</p>
	
	 
  </body>
</html>


效果如下：



vertical-align属性
vertical-align属性设置文本在垂直方向上的对齐方式。
常用属性值有：
  • top,元素的顶端与行中最高元素的顶端对齐。
  • middle,把元素放在父元素的中部。
  • bottom，元素的顶端与内中最低元素的顶端对齐。
  • text-top，把元素的顶端与父元素字体的顶端对齐。
  • text-tottom,把元素的低端与父元素字体的低端对齐。

 
<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8">
	<title>文本属性</title>
	<style>
	  #p1 img {
	    vertical-align: text-top ;
	  }
	  #p2 img {
	    vertical-align: text-bottom; 
	  }
	  #p3 img {
	    vertical-align: top; 
	  }
	 
	
	</style>
  </head>
  <body>
    
	<p id="p1">
	  这是
	  <img src="1.gif" alt="文本替代">
      默认的行高。   
	</p>
	<p id="p2">
	  这是
	  <img src="1.gif" alt="文本替代">
      减少两行间的的行高。     
	</p>
	<p id="p3">
	  这是
	  <img src="1.gif" alt="文本替代">
      增加两行间的行高。  
	</p>
	
	 
  </body>
</html>


效果如下：





text-decoration属性
text-decoration属性添加到文本的修饰。（一般用于添加下划线，或者上划线，常用于a元素，一般取消a元素的下划线。）

属性值 ：
  • none,默认值，没有修饰的，注：此值一般用于取消a元素的下划线。
  • overline，为文本头部添加一条线。
  • underline,为文本低部添加一条线。（下划线）
  • line-through,定义穿过文本的一条线。

 
<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8">
	<title>文本属性</title>
	<style>
	  #p1 {
	    text-decoration: line-through;
	  }
	  #p2 {
	    text-decoration: overline; 
	  }
	  #p3 {
	    text-decoration: underline; 
	  }
	  a {
	    text-decoration: none; /* 取消a元素的下划线 */
	  } 
	
	</style>
  </head>
  <body>
    
	<p id="p1">
	  定义穿过文本的一条线。   
	</p>
	<p id="p2">
	  为文本顶部添加一条线。   
	</p>
	<p id="p3">
	  为文本低部添加下划线。
	</p>
	<a href="http://www.baidu.com" target="_blank">百度</a>
	
	
	 
  </body>
</html>


效果如下：




text-indent属性

text-indent属性设置首行文本的缩进。

属性值：
  • length,固定缩进，默认值：0。
  • ?%,按父元素宽度的百分比缩进。
<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8">
	<title>文本属性</title>
	<style>
	  p {
	    text-indent: 50px;
	  }
	
	</style>
  </head>
  <body>
    
	<p id="p1">
	In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'   
	</p>
	
	
	
	 
  </body>
</html>


效果如下：




text-transform属性
text-transform属性改变文本的大小写（字母）。
属性值：
  • none,默认。
  • capitalize,每个单词的首字母为大写。
  • uppercase，文本全为大写。
  • lowercase，文本全为小写。

 
<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8">
	<title>文本属性</title>
	<style>
	  #p1 {
	    text-transform: capitalize;
	  }
	  #p2 {
	    text-transform: uppercase;
	  }
	  #p3 {
	    text-transform: lowercase;
	  }
	
	</style>
  </head>
  <body>
    
	<p id="p1">
	This is some text.
	</p>
	<p id="p2">
	This is some text.
	</p>
	<p id="p3">
	This is some text.
	</p>
	
	
	
	 
  </body>
</html>


效果如下：





white-space属性
white-space属性规定文本中的空格符如何处理，以及是否换行。
属性值：
  • pre,与<pre>标签一样，保留空格符。
  • nowrap，文本不会换行，继续在同一行上显示，直到<br>为止。
  • pre-wrap，保留空格符序列，正常换行。
  • pre-line，合并空格符序列，正常换行。

 
<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8">
	<title>文本属性</title>
	<style>
	  #p1 {
	    white-space: nowrap;
	  }
	  #p2 {
	    white-space: pre-wrap;
	  }
	  #p3 {
	    white-space: pre-line;
	  }
	
	</style>
  </head>
  <body>
    
	<p id="p1">
	This is some text.
	This is            some text.
	This is some text.
	</p>
	<p id="p2">
	This is some text.
	This is            some text.
	This is some text.
	</p>
	<p id="p3">
	This is some text.
	This is             some text.
	This is some text.
	</p>
	
	
	
	 
  </body>
</html>


效果如下：





text-overflow属性
text-overflow规定当文本溢出包含它的元素时，该如何处理。
属性值：
  • clip,将溢出的部分裁剪掉。
  • ellipsis,将溢出的部分用省略号代替。

 
<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8">
	<title>文本属性</title>
	<style>
	  p {
	    width: 80px;
		border: 1px solid #000;
		white-space: nowrap; /* 设置不能换行 */
		overflow: hidden; /* 当溢出时，不显示溢出的部分 */
	  }
	  #p2 {
	    text-overflow: clip;
	  }
	  #p3 {
	    text-overflow: ellipsis;
	  }
	
	</style>
  </head>
  <body>
    
	<p id="p1"> <!-- 当没有设置该属性时 -->
	This is some text.This is some text.This is some text.
	</p>
	<p id="p2"> <!-- 当属性值为clip时，会裁剪掉溢出的部分 -->
	This is some text.This is some text.This is some text.
	</p>
	<p id="p3"> <!-- 当属性值为ellipsis时，用省略号代替溢出的部分 -->
	This is some text.This is some text.This is some text.
	</p>
	
	
	
	 
  </body>
</html>


注：要设置属性"white-space: onwrap;" 和"overflow: hidden;"

效果如下：




text-shadow属性
text-shadow属性为文本添加阴影效果。

写法：text-shadow: x y c color; 属性值分别是：水平阴影位置、垂直方向阴影位置、模糊距离（模糊程度）、阴影的颜色。 

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8">
	<title>文本属性</title>
	<style>
	  p {
	    text-shadow: 5px 5px 1px #ff0000;
	  }
	  
	
	</style>
  </head>
  <body>
    
	<p id="p1"> 
	This is some text.This is some text.This is some text.
	</p>
	<p id="p2"> 
	This is some text.This is some text.This is some text.
	</p>
	<p id="p3"> 
	This is some text.This is some text.This is some text.
	</p>
	
	
	
	 
  </body>
</html>
效果如下：





word-wrap属性
word-wrap属性允许长的内容自动换行。

属性值：
  • normal,只在允许的断点处换行。
  • break-word,允许在长单词或URL内部换行。

 
<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8">
	<title>文本属性</title>
	<style>
	  p {
	    width: 110px;
		border: 1px solid #000;		
	  }
	  #p3 {
	    word-wrap: break-word; /* 该属性允许在长单词和URL内部换行 */
	  }
	  
	  
	
	</style>
  </head>
  <body>
    
	<p id="p1"> 
	Thisrrqrqwrtyfgf is some text.This is some text.This is some text.<a href="http://www.baidu.com">http://www.baidu.com</a>
	</p>
	<p id="p3"> 
	Thisrrqrqwrtyfgf is some text.This is some text.This is some text.<a href="http://www.baidu.com">http://www.baidu.com</a>
	</p>
	
	
	
	 
  </body>
</html>


效果如下：






「已注销」
关注
  • 1
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
cssText属性
qq_40664253的博客
07-26 3893
dddd
CSS3之text属性
杨筱斌的博客
10-24 1022
color: 作用：           指定文本的颜色 说明：           该属性在块、行内、行内块的样式表中都可以使用，改变被控制元素内部所有文本的颜色 关于颜色值的四种写法： &nbsp...
CSS文本样式14个示例
Python私教
03-26 2019
font-family 属性设置文本的字体系列。font-family 属性应该设置几个字体名称作为一种"后备"机制，如果浏览器不支持第一种字体，他将尝试下一种字体。文本排列属性是用来设置文本的水平对齐方式。当text-align设置为"justify"，每一行被展开为宽度相等，左，右外边距是对齐（如杂志和报纸）。font-wight可以设置字体的粗细，值是100-700的整百数，也可以bold表示加粗和normal表示普通。font-size可以设置文字的大小，支持的单位有px像素，百分比，em等。
CSS文本样式详解
大河之犬的博客
09-29 2064
去除a元素的下划线，这个技巧我们在实际开发中会大量用到。主要是因为超链接默认样式不太美观，极少网站会使用它的默认样式。属性来定义文本的修饰效果（下划线、中划线、顶划线）属性来控制文本在水平方向上的对齐方式。属性来定义两个单词之间的距离。属性来定义p元素的首行缩进。属性来控制字与字之间的距离。在CSS中，我们可以使用。在CSS中，我们可以使用。在CSS中，我们可以使用。在CSS中，我们可以使用。在CSS中，我们可以使用。属性来控制一行文本的高度。在CSS中，我们可以使用。在CSS中，我们可以使用。
【CSS】CSS文本样式【CSS基础知识详解】
@花无缺
11-22 4606
CSS文本样式最全指南，打造精品前端知识体系，详细解释每一个文本样式相关属性的使用，让CSS的知识清晰明了，每一个属性都有对应的完整代码实例，0基础入门前端！
CSS中一些常用的文本属性整理
12-13
该属性有两个参数，分别如下： CSS Code复制内容到剪贴板 text-overflow : clip | ellipsis  clip:不显示省略标记(….),溢出的文本会被的裁减掉。ellipsis：文本溢出时会显示省略的标记(…),插入的位置是最后...
CSS文本属性的使用方法
12-04
文本颜色(color)  它可以给文本设置一个颜色，可选值有三种表达方式： ... 这个属性用来设置文本的对齐方式，有四个属性值。 left（居左，默认值） center（居中） right（居右） justify（两端对齐
CSS常用文本样式总结
12-11
CSS文本样式是相对于内容进行的样式修饰。由于在层叠关系中，内容要高于背景。所以文本样式相对而言更加重要。有些人对文本和字体样式之间的不同不太了解，简单地讲，文本是内容，而字体则用于显示这个内容。本文将...
CSS 常用设置备忘
01-21
通过使用 text-indent 属性，所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值。 这个属性最常见的用途是将段落的首行缩进，下面的规则会使所有段落的首行缩进 5 em： p {text-indent: 5em;} ...
CSS 文本格式
QYgujingjing的专栏
01-09 78
CSS 文本格式
css文本显示方式,CSS 文本
weixin_27188815的博客
08-04 586
通过使用CSS，我们可以控制文本样式。例如，我们可以更改文本颜色，我们可以控制文本对齐，缩进，字母间距等。文本颜色color属性设置文本的颜色。我们可以使用以下方式指定颜色。HEX值 - 如“＃ff00ee”RGB值 - 如“rgb(255,0,255)”颜色名称 - 如“红色”以下代码将标题1设置为红色。h1 {color: red;}文本对齐text-align指定文本块的对齐方式它的可能值是...
4.文本属性 text
potato123232的博客
02-22 3858
文本属性是文本的颜色，缩进，行间距这些 目录 1文本颜色 color 2水平对齐文本 text-align 3装饰文本 text-decoration 4文本缩进 text-indent 5行间距 line-height 1文本颜色 color 我们前面用过很多，在这里我们简单写一下 除了red这种值，我们还可以写16色，或者RGB值，我们网页上找几个颜色试一下RGB颜色对照表 我们先写16进制的 这里大写小写都一样 如果颜色是六个相同的数.........
CSS 常用样式-文本属性
最新发布
猿码互联
10-04 1350
CSS中的text-align属性用于水平对齐文本。它可以应用于块级元素和表格单元格。leftrightcenterjustifytext-align属性只对文本起作用，如果想要对块级元素内的其他内容（如图片、表格）进行对齐，需要使用其他的CSS属性。
text标签及其属性
热门推荐
Medlen
10-29 2万+
与text相关的text标签及其属性 1、text-align 字体文本对齐方式 text-align: left,right,center,justify; 2、text-decoration 设置是否有下划线以及下划线的方式 text-decoration:underline,overline,line-through,blink; 3、text-indent 文本的首行缩进
CSS text-属性汇总
pcaxb的专栏
12-14 4836
  1.text-shadow 属性 text-shadow: 5px 5px 5px #FF0000;     2.text-overflow 属性 (string) text-overflow:ellipsis;   string：用自定义字符串来代表被修剪的文本（目前只在Firefox 浏览器下有效,style="text-overflow:'****';"） ...
js中巧用cssText属性批量操作样式
lily2016n的博客
07-26 2589
也许有人用js给html元素设置多个css属性的代码会这样写，样式多的话代码也多<ul> <li style='color:'blue; text-align:center; background:'#cccccc'>测试看看</li> </ul>var oli= document.getElementsByTagName('li')[0]; oli.style.width = "200px
微信小程序——章节自测三
weixin_51867321的博客
12-26 1172
微信小程序——学习通章节自测
移动开发技术3.6.15章节测试
weixin_51035156的博客
10-06 943
1【单选题】 下列关于小程序生命周期说法不正确的是（ ） A、 分为应用生命周期和页面生命周期两种 B、 在 onLoad 生命周期中可以获得地址中参数 C、 在onLaunch 中可以初始一些全局数据 D、 onLaunch生命周期函数会被重复执行 我的答案：D 2【单选题】 下列关于小程序配置说法不正确的是（） A、 分为全局配置和页面配置两种类型 B、 全局配置会对所有的页面生效 C、 页面配置只针对当前页面生效 D、 ...
text——文本属性大全
weixin_34010566的博客
03-15 1534
一、文字颜色（color:red;） <style> body {color:red} h1 {color:greenyellow} p.color {color:blue} </style> <body> <h1>这是H1标签，定义字体颜色为绿黄色</h1> <p c...
css中text-decoration属性
03-16
text-decoration属性是CSS中用来设置文本装饰效果的属性，包括下划线、删除线、上划线等。可以通过设置不同的值来实现不同的文本装饰效果。常用的值包括：none（无装饰）、underline（下划线）、overline（上划线）...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值