how2j.cn

关键字 简介 示例代码
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 :

文字颜色

属性名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>
<style>
div#colorful{
  color:pink
}

</style>

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


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 2 :

对齐

属性: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 :

文本修饰

属性: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="http://how2j.cn/">默认的超链</a> <a class="a" href="http://how2j.cn/">去掉了下划线的超链</a>
<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="http://how2j.cn/">默认的超链</a>
<a class="a" href="http://how2j.cn/">去掉了下划线的超链</a>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 4 :

行间距

属性: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 :

字符间距

属性: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>
<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 :

单词间距

属性: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>
<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 :

首行缩进

属性:text-indent
值: 数字
运行效果
<style> p{ width:200px; } .p{ text-indent:50; } </style> <p> 没有缩进效果的一段文字没有缩进效果的一段文字没有缩进效果的一段文字没有缩进效果的一段文字 </p> <p class="p"> 有缩进效果的一段文字有缩进效果的一段文字有缩进效果的一段文字有缩进效果的一段文字有缩进效果的一段 文字 </p>
<style>
p{
  width:200px;
}

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

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

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

文字
</p>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 8 :

大小写

属性: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>
<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 :

空白格

属性: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 全屏编辑,再次点击恢复
渲染中 渲染完成
效果


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


问答区域    
2018-06-10 type="text/css" 这个代表啥
宇宙超人



type="text/css" 这个代表啥
<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>

							


1 个答案

dada88510066 答案时间:2018-06-20
有些浏览器比如手机的浏览器 会认为这个是文本内容 而非css样式。 type="text/css"表示让浏览器知道标签内是CSS




答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到





2017-09-18 如果想首行缩进两个字符怎么办?
pfidea
text-indent可以缩进字符吗?




2 个答案

Devin 答案时间:2017-12-13
直接用单位 em

null没了 答案时间:2017-11-22
把缩进值写成字体值的两倍就OK了




答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到




2017-08-07 关于首行缩进
2017-07-27 请问,在选择器里的句子什么时候加分号,什么时候不加分号
2017-05-18 示例二有个问题吧,span看不出右对齐效果,对应的你写的span标签的id属性又是text-align :center?




提问之前请登陆
关于 前端部分-CSS-文本 的提问

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

上传截图