您好,欢迎来到宝玛科技网。
搜索
您的当前位置:首页CSS学习————文本属性(3)

CSS学习————文本属性(3)

来源:宝玛科技网

1、文本水平对齐方式:

text-align:left | center | right | justify

 justify:文本保持在左右2边垂直对齐

2、文本方向:文本倒序

<!DOCTYPE html>
<html>
	<head>
		<style>
			p {										
				border: 1px solid green;
			}
			p:nth-child(1) {
				text-align: right;
			}

			p:nth-child(2) {			
				direction: rtl;
				unicode-bidi: bidi-override;
			}
		</style>
	</head>

	<body>
		<p>12345</p>
		<p>12345</p>
		
	</body>
</html>

3、元素垂直对齐方式:内联元素|内联块元素有效

vartical-align:top | middle | bottom |baseline| 10px

 3、文本装饰:

text-decoration:underline | overline | line-through | none(默认值)

4、文本转换:属性用于指定文本中的大写和小写字母。

text-transform:uppercase | lowercase |capitalize 

5-1:文本缩进:文本第一行的缩进

text-indent:2em | 32px

5-2:文字与文字的水平距离

letter-spacing:1em | 16px

5-3:文本行间距:line-height;

5-4:单词间距:word-spacing(CJK无效);

5-6:white-space元素内部空白的处理方式

white-space:nowrap | normal | pre |pre-line |pre-wrap

normal:忽略多余的空白,只保留一个空白(默认);
nowrap:只保留一个空白,文本不会换行,会在在同一行上继续,直到遇到br标签为止。
pre:保留空白(行为方式类似于html中的pre标签);
pre-line:合并空白符序列,保留换行符;
pre-wrap:保留空白符序列,正常地进行换行;            
inherit:从父元素继承white-space属性的值。

6:文字阴影

text-shadow:水平阴影 垂直阴影 模糊度  颜色

p {
	font-size: 30px;
	color: #000;
	text-shadow:1px 1px 1px  #888
				2px 2px 1px #777,
				3px 3px 1px #666,
				4px 4px 1px #555,
				5px 5px 1px #444,
				6px 6px 1px #000;
}

因篇幅问题不能全部显示,请点此查看更多更全内容

Copyright © 2019- baomayou.com 版权所有 赣ICP备2024042794号-6

违法及侵权请联系:TEL:199 18 7713 E-MAIL:2724546146@qq.com

本站由北京市万商天勤律师事务所王兴未律师提供法律服务