Web开发基础-CSS-10

Coder_Boy_

于 2018-06-22 23:53:12 发布

阅读量192

点赞数

CC 4.0 BY-SA版权

分类专栏： Web开发

本文链接：https://blog.youkuaiyun.com/Coder_Boy_/article/details/80779784

Web开发专栏收录该内容

108 篇文章

订阅专栏

CSS中文本样式：

一些概念图解

案例演示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>文本样式</title>
		<style type="text/css">
			p {
				width:500px;
				margin:40px auto;
				border:1px solid red;
			}
			
			p {
				font-family:
				"微软雅黑","文泉驿正黑","黑体";
				font-size:30px;
			}
			
			#p1 {
				/* 加粗 */
				font-weight:bold;
				/* 居中 */
				text-align:center;
				/* 下划线 */
				text-decoration:underline;
			}
			
			#p2 {
				/* 首行缩进  
					1em就是1个文字的高度
					因为汉字是方块字，高度和宽度是一样的，
					所以缩进2个文字的高度，就等于缩进两个文字的宽度
				*/
				text-indent:2em;
				/* 行高 */
				line-height:3em;
			}
			
			#p1 {
				height:100px;
				/* 当行高=元素高时，文本垂直居中 */
				line-height:100px;
			}
		</style>
	</head>
	<body>
		<p id="p1">静夜思</p>
		<p id="p2">
			床前明月光，疑是地上霜。
			举头望明月，低头思故乡。
			锄禾日当午，汗滴禾下土。
			谁知盘中餐，粒粒皆辛苦。
		</p>
	</body>
</html>

最终页面效果：