当前阅读教程:CSS入门到精通 > 行高 line-height属性 | |||||||||||||||||||||
阅读(22555525) 收藏 赞(5685) 分享 | |||||||||||||||||||||
上一篇: 字符间距 letter-spacing属性 | 下一篇: 文本对齐 text-align属性 | ||||||||||||||||||||
属性定义及使用说明设置行高:. u 注意: 负值是不允许的
浏览器支持表格中的数字表示支持该属性的第一个浏览器版本号。 属性值
示例代码<!doctype html> <html> <head> <meta charset="utf-8"> <title>行高 line-height属性</title> <!--定义内部样式--> <style> .shuzi01{ line-height: 0.5;/*行高:数字*/ } .shuzi02{ line-height: 2;/*行高:数字*/ } .danwei01{ line-height: 10px;/*行高:带单位*/ } .danwei02{ line-height: 30px;/*行高:带单位*/ } .baifenbi01{ line-height: 70%;/*行高:百分比*/ } .baifenbi02{ line-height: 200%;/*行高:百分比*/ } </style> </head> <body>
<!--默认行高--> <p> 这是一个标准行高的段落。浏览器的默认行高为“1”。这是黄菊华老师的css课程。 </p><hr>
<!--用数字来设置行高--> <p><!--数字:0.5--> 用数字0.5来设置行高:这是一个标准行高的段落。浏览器的默认行高为“1”。这是黄菊华老师的css课程。 </p> <p><!--数字:2--> 用数字2来设置行高:这是一个标准行高的段落。浏览器的默认行高为“1”。这是黄菊华老师的css课程。 </p><hr>
<!--用带单位的设置行高--> <p><!--带单位:10px--> 用带单位的10px设置行高:这是一个标准行高的段落。浏览器的默认行高为“1”。这是黄菊华老师的css课程。 </p> <p><!--带单位:30px--> 用带单位的30px设置行高:这是一个标准行高的段落。浏览器的默认行高为“1”。这是黄菊华老师的css课程。 </p><hr>
<!--用百分比设置行高--> <p><!--百分比:70%--> 用百分比70%设置行高:这是一个标准行高的段落。浏览器的默认行高为“1”。这是黄菊华老师的css课程。 </p> <p><!--百分比:200%--> 用百分比200%设置行高:这是一个标准行高的段落。浏览器的默认行高为“1”。这是黄菊华老师的css课程。 </p>
</body> </html> 效果图 |
|||||||||||||||||||||
上一篇: 字符间距 letter-spacing属性 | 下一篇: 文本对齐 text-align属性 |