CSS的文本外观属性/color/letter-spacing/word-spaing/…/学习笔记

noahsark747

已于 2022-01-22 22:20:38 修改

阅读量978

点赞数 1

文章标签： css 前端 html

于 2022-01-22 22:15:22 首次发布

本文链接：https://blog.csdn.net/No1banana/article/details/122644833

版权

CSS的文本外观属性

通过外观属性能使文本的效果更加丰富

color：

用于定义文本的颜色，可用预定义的颜色值如red，green或十六进制的颜色值，最后还能使用RGB颜色代码rgb(255,0,0)或rgb(100%,0,0)

letter-spacing:

用于定义字间距，即字符与字符之间的空白

word-spacing

英文字非常之间的字间距，对中文无效 word-spacing和letter-spacing取值范围可以是负数p{letter-spacing: -10px; line-height: 5em;}

text-align

用于设置文本内容的水平对齐：

left：左对齐
right：右对齐
center：居中对齐

注意： text-align属性仅适用于块级元素，对行内元素是无效的，如果需要对图像设置水平对齐，可以为图像添加一个父标签，如<p>然后对父标签应用text-align属性

text-transform

用于控制英文字符的大小写转换

text-decoration

设置下划线、上划线、删除线等

none(清除装饰)
underline(下划线)
overline(上划线)
line-through(删除线)

text-indent

设置文本的首行缩进，一般使用em作为设置单位一般设置-2em表示首行缩进2个字符

white-space

设置空白符(空格，或多个空格)，

normal(常规)

pre:预格式化，按照文档的书写格式保留空格，空行原样显示

nowrap：空格行无效，强制文本不能换行，除非遇到<br>换行标签，如若超出浏览器显示则浏览器会添加滑动条

text-shadow

是css3新增的属性，用于设置文本识别卡音影的距离

h-shadow：水平阴影距离的设置

v-shadow：垂直阴影距离的设置

blur：设置模糊半径

color：设置阴影颜色

text-overflow

用于处理溢出的文本修剪，需要配合white-space使用

clip：修剪溢出文本，而不显示省略号

ellipsis：用省略号显示溢出的文本

word-wrap

实现长单词和URL地址的自动换行

综合示例：

<html>
<head>
<meta charset="UTF-8">
<title>LOGO</title>
	<style>
		p{
			
		}
		strong{ letter-spacing: -10px;/*字间距*/
			line-height: 2em; /*行间距倍率*/
			font-size: 100px; font-style: italic;
			text-transform: uppercase;/*字体转换为大写*/
			text-decoration:underline;/*字体下划线效果*/
		}
		.blue{color:#4384F4}
		#green{color:#34A753}
		.red{color:#EA4336}
		#yellow{color: #FBBD06}
	</style>
</head>
<body>
	<p>演示文本123456789ABCDEFG</p>
	<strong class="blue">G</strong>
	<strong class="red">o</strong>
	<strong id="yellow">o</strong>
	<strong class="blue">g</strong>
	<strong id="green">l</strong>
	<strong class="red">e</strong>
</body>
</html>

###欢迎加入QQ群一同交流学习937864538