CSS系列教材（七）- 基础 - 设置文本样式详解

工具版本兼容问题

关键字	简介	示例代码
color	文字颜色	示例代码
text-align	对齐	示例代码
text-decoration	文本修饰	示例代码
line-height	行间距	示例代码
letter-spacing	字符间距	示例代码
word-spacing	单词间距	示例代码
text-indent	首行缩进	示例代码
text-transform	大小写	示例代码
white-space	空白格	示例代码

示例 1 : 文字颜色
示例 2 : 对齐
示例 3 : 文本修饰
示例 4 : 行间距
示例 5 : 字符间距
示例 6 : 单词间距
示例 7 : 首行缩进
示例 8 : 大小写
示例 9 : 空白格

示例 1 :

文字颜色

edit 顶折

纠问

属性名color
颜色的值可以采用3种方式
1. 预定义的颜色名字
比如red,gray,white,black,pink
2. rgb格式
分别代表红绿蓝的比例 rgb(250,0,255) 即表示红色是满的，没有绿色，蓝色是满的，即红色和蓝色混合在一起：紫色
3. 16进制的表示
#00ff00 等同于 rgb(0,255,0)

运行效果

<style>
div#colorful{
  color:pink
}

</style>

<div id="colorful">
  粉红色
</div>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

示例 2 :

对齐

edit 顶折

纠问

属性:text-align
值：left,right,center
div是块级元素，其默认宽度是100%，所以文本有对齐的空间前提。

但是，span却看不出右对齐效果，为什么呢？
因为span是内联元素其默认宽度就是其文本内容的宽度
简单说就是文本已经粑在其边框上了，对齐是看不出效果来的

使用了后面的样式风格，让div和span的边框显露出来，便于理解本知识点
用到了边框和外边距

div,span{
border: 1px gray solid;
margin:10px;
}

运行效果

代码行数较多，请点击查看

<style>
div#left{
  text-align:left;
}
/*让div和span的边框显露出来，便于理解本知识点*/
div,span{
  border: 1px gray solid;
  margin:10px;
}

div#right{
  text-align:right;
}

div#center{
  text-align:center;
}

span#right{
  text-align:right;
}

</style>

<div id="left">
左对齐
</div>

<div id="right">
右对齐
</div>

<div id="center">
居中
</div>

<span id="right">
span看不出右对齐效果

</span>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

示例 3 :

文本修饰

edit 顶折

纠问

属性：text-decoration
值： overline

运行效果

<style type="text/css">
h1 {text-decoration: overline}
h2 {text-decoration: line-through}
h3 {text-decoration: underline}
h4 {text-decoration:blink}
.a {text-decoration: none}
</style>

<h1>上划线</h1>
<h2>删除效果</h2>
<h3>下划线</h3>
<h4>闪烁效果，大部分浏览器已经取消该效果</h4>
<a href="https://how2j.cn/">默认的超链</a>
<a class="a" href="https://how2j.cn/">去掉了下划线的超链</a>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

示例 4 :

行间距

edit 顶折

纠问

属性：line-height
值：数字或者百分比

运行效果

代码行数较多，请点击查看

<style>
p{
  width:200px; 
}

.p{
  line-height:200%;
}
</style>

<p>
默认行间距
默认行间距
默认行间距
默认行间距
默认行间距
默认行间距
默认行间距
默认行间距
默认行间距
默认行间距
默认行间距
默认行间距
默认行间距
</p>

<p class="p">
200%行间距
200%行间距
200%行间距
200%行间距
200%行间距
200%行间距
200%行间距
200%行间距
200%行间距
200%行间距
200%行间距
</p>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

示例 5 :

字符间距

edit 顶折

纠问

属性：letter-spacing
值：数字

运行效果

<style>
p{
  width:200px; 
}

.p{
  letter-spacing:2;
}
</style>

<p>
abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg
</p>

<p class="p">
abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg 
</p>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

示例 6 :

单词间距

edit 顶折

纠问

属性：word-spacing
值：数字

运行效果

<style>
p{
  width:200px; 
}

.p{
  word-spacing:10;
}
</style>

<p>
abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg
</p>

<p class="p">
abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg 
</p>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

示例 7 :

首行缩进

edit 顶折

纠问

属性：text-indent
值：数字

运行效果

<style>
p{
  width:200px;
}

.p{
  text-indent:50;
}
</style>

<p>
没有缩进效果的一段文字没有缩进效果的一段文字没有缩进效果的一段文字没有缩进效果的一段文字
</p>

<p class="p">
有缩进效果的一段文字有缩进效果的一段文字有缩进效果的一段文字有缩进效果的一段文字有缩进效果的一段

文字
</p>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

示例 8 :

大小写

edit 顶折

纠问

属性：text-transform
值：
uppercase 全部大写
capitalize 首字母大写
lowercase 全部小写

运行效果

<style>
p.u {text-transform:uppercase}
p.c {text-transform:capitalize}
p.l {text-transform:lowercase}

</style>

<p class="u">
abcD
</p>

<p class="c">
abcD
</p>

<p class="l">
abcD
</p>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

示例 9 :

空白格

edit 顶折

纠问

属性：white-space
值：
normal 默认。多个空白格或者换行符会被合并成一个空白格
pre 有多少空白格，显示多少空白格，相当于pre标签,如果长度超出父容器也不会换行。
pre-wrap 有多少空白格，显示多少空白格，相当于pre标签,如果长度超出父容器，会换行。
nowrap 一直不换行，直到使用br

运行效果

代码行数较多，请点击查看

<style>
p.n {white-space:normal}
p.p {white-space:pre}
p.pw {white-space:pre-wrap}
p.nw {white-space:nowrap}

</style>

<p class="n">
在默认情况下，多个     空白格或者
换行符

    会被     合并成一个空白格
</p>

<p class="p">
保留所有的    空白格
以及换行符 
相当于pre元素
特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字
</p>

<p class="pw">
保留所有的    空白格
以及换行符 
相当于pre元素
特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字
</p>

<p class="nw">
不会换行
不会换行
不会换行
不会换行
不会换行
不会换行
直到br<br/>才换行
</p>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

CSS系列教材（六）- 基础 - 设置背景详解

CSS系列教材（八）- 基础 - 设置字体样式详解

HOW2J公众号，关注后实时获知最新的教程和优惠活动，谢谢。

问答区域

2022-01-17 把所有代码放在一起会相互影响吗

HYH-HSC

关于前端部分-CSS-文本的提问

把所有代码放在一起会相互影响吗

1 个答案

fujava
答案时间：2022-05-22

你保证id、class啥的不重复就没问题

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2020-04-22 字符间距为什么没有效果啊，用的HBuilder

努力学习做大牛

关于前端部分-CSS-文本的提问

用字符间距letter-spacing:2，页面字符之间没有间距效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<style>
		p{
		  width:200px; 
		}
		
		.p{
		  letter-spacing:2;
		}
		</style>
		
		<p>
		abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg
		</p>
		
		<p class="p">
		abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg 
		</p>

	</body>
</html>

1 个答案

努力学习做大牛
答案时间：2020-04-22

找到原因了，需要加px letter-spacing:2px

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2020-03-04 真的不会闪烁

2019-10-16 word-spacing不能用百分比，换行normal和nowrap有什么区别吗

空白丨旋律

关于前端部分-CSS-文本的提问

word-spacing不能用百分比，换行normal和nowrap有什么区别吗

3 个答案

王菜菜
答案时间：2021-11-06

normal和nowrap下用 都可以换行；超出容器时，normal会自动换行，但是nowrap不会自动换行，只能自己手动

yanwuhc
答案时间：2020-05-27

纠正一下楼上的说法：对normal以及nowrap格式下用 都是可以换行的。normal和nowrap的区别在于：超过容器时，normal格式下会自动换行，而nowrap不会自动换行，需要 才能换行。

梦想黑客
答案时间：2020-05-10

在normal格式下在段落中使用 是无效的而在nowrap中只有使用 才会换行

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2019-07-21 text-align设置数字没用，后边要加px

Lmy199612

关于前端部分-CSS-文本的提问

我的text-align设置数字没用，后边要加px

		p#indent{
			text-indent:50px;
			text-transform:capitalize;
		}

4 个答案

王菜菜
答案时间：2021-11-06

text-align后面不是跟的right center left吗

xiezhr
答案时间：2019-11-09

text-align 是设置对齐的属性为left rigth center

壁虎回家
答案时间：2019-08-16

不用内边距的时候才要

望舒羲和
答案时间：2019-07-23

对齐要设置数字吗？

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

提问太多，页面渲染太慢，为了加快渲染速度，本页最多只显示几条提问。还有 9 条以前的提问，请点击查看

提问之前请登陆

提问已经提交成功，正在审核。请于我的提问处查看提问记录，谢谢

关于前端部分-CSS-文本的提问

尽量提供截图、代码和异常信息，有助于分析和解决问题。也可进本站QQ群交流: 578362961

提问尽量提供完整的代码，环境描述，越是有利于问题的重现，您的问题越能更快得到解答。
对教程中代码有疑问，请提供是哪个步骤，哪一行有疑问，这样便于快速定位问题，提高问题得到解答的速度
在已经存在的几千个提问里，有相当大的比例，是因为使用了和站长不同版本的开发环境导致的,比如 jdk, eclpise, idea, mysql,tomcat 等等软件的版本不一致。
请使用和站长一样的版本，可以节约自己大量的学习时间。站长把教学中用的软件版本整理了，都统一放在了这里，方便大家下载： https://how2j.cn/k/helloworld/helloworld-version/1718.html

上传截图