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 : 空白格   

属性名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 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
属性: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 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
属性: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>
<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 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
属性: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 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
属性: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 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
属性: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 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
属性: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 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
属性: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 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
属性: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公众号,关注后实时获知最新的教程和优惠活动,谢谢。


问答区域    
2022-01-17 把所有代码放在一起会相互影响吗
HYH-HSC

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




1 个答案

fujava
答案时间:2022-05-22
你保证id、class啥的不重复就没问题



回答已经提交成功,正在审核。 请于 我的回答 处查看回答记录,谢谢
答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到




2020-04-22 字符间距为什么没有效果啊,用的HBuilder
努力学习做大牛




用字符间距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有什么区别吗
2019-07-21 text-align设置数字没用,后边要加px


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

提问之前请登陆
提问已经提交成功,正在审核。 请于 我的提问 处查看提问记录,谢谢
关于 前端部分-CSS-文本 的提问

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

上传截图