css---文本样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.p1{
				/*
				 * text-transform可以用来设置文本的大小写
				 * 可选值：
				 * 		none默认值
				 * 		capitalize单词首字母大学
				 * 		uppercase所有字母都大写
				 * 		lowercase小写
				 */
				text-transform: lowercase;
			}
			
			.p2{
				/*
				 * text-decortation用来设置文本修饰
				 * 			可选值：
				 * 				none:保存原样
				 * 				underline:下划线
				 * 				overline为文本添加上划线
				 * 				line-through为文本添加删除线
				 */
				text-decoration:underline ;
			}
			a{
				/*
				 * 超链接会默认添加下划线，也就是超链接的text-decoration的默认值是underline
				 * 		若果需要去除则可用该样式设置为none
				 */
				text-decoration: none;
			}
			
			.p3{
				/*
				 * letter-spacing可以指定字符间距
				 */
				letter-spacing: 0px;
				
				/*
				 * word-spacing单词之间的距离
				 */
				word-spacing: 20px;
			}
			
			.p4{
				/*
				 * text-align用于设置文本的对齐
				 * 
				 * 	可选值：
				 * 		left默认值，文本靠左对齐
				 * 		right:右对齐
				 * 		center:居中对齐
				 * 		justify:两端对齐
				 * 				-调整空格大小，调整对齐
				 * 		
				 */
				text-align: justify;
			}
			
			.p5{
				/*
				 * text-indent用来设置首行缩进
				 * 		em:表示字体大小
				 * 当给他指定一个正值时，会自动向右缩进/负值往左移动
				 * 		通过这方式把不想显示的隐藏起来
				 *
				 */
				text-indent: 2em;
			}
		</style>
	</head>
	<body>
		<p class="p5">
			"A tree is a well-known 
			data structure that is either empty
			 (null, void, nothing) or is a set of one"
		</p>
		
		<p class="p4">
			"A tree is a well-known 
			data structure that is either empty
			 (null, void, nothing) or is a set of one"
		</p>
		
		<p class="p3">
			"A tree is a well-known 
			data structure that is either empty
			 (null, void, nothing) or is a set of one"
		</p>
		
		
		<a href="#">我是超链接</a>
		<p class="p2">
			"A tree is a well-known 
			data structure that is either empty
			 (null, void, nothing) or is a set of one"
		</p>
		<p class="p1">
			"A tree is a well-known 
			data structure that is either empty
			 (null, void, nothing) or is a set of one"
		</p>
	</body>
</html>
猜你喜欢
