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

工具版本兼容问题

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

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

示例 1 :

文字颜色

edit 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 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 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 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 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 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 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 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 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公众号，关注后实时获知最新的教程和优惠活动，谢谢。

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

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

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

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

上传截图