CSS实例教程(7):网页页面段落行间隔操纵的案例

日期:2021-03-15 类型:科技新闻 

关键词:如何织梦建站,如何创建网站,网站建立,公众号搭建,网站建站的


本文关键解读怎样用CSS操纵网页页面段落行间隔的3个案例:1、应用百分比设定行间隔,2、应用像素值设定行间隔,3、应用标值来设定行间隔。
本文关键解读怎样用CSS操纵网页页面段落行间隔的3个案例:1、应用百分比设定行间隔,2、应用像素值设定行间隔,3、应用标值来设定行间隔。 1、应用百分比设定行间隔
本例演试怎样应用百分比值来设定段落中的行间隔。
<html>
<head>
<style type="text/css">
p.small {line-height: 90%}
p.big {line-height: 200%}
</style>
</head>
<body>
<p>
这是有着规范行高的段落。
在大多数数访问器中默认设置行伟岸约是 110% 到 120%。
这是有着规范行高的段落。
这是有着规范行高的段落。
这是有着规范行高的段落。
这是有着规范行高的段落。
这是有着规范行高的段落。
</p>
<p class="small">
这个段落有着更小的行高。
这个段落有着更小的行高。
这个段落有着更小的行高。
这个段落有着更小的行高。
这个段落有着更小的行高。
这个段落有着更小的行高。
这个段落有着更小的行高。
</p>
<p class="big">
这个段落有着更大的行高。
这个段落有着更大的行高。
这个段落有着更大的行高。
这个段落有着更大的行高。
这个段落有着更大的行高。
这个段落有着更大的行高。
这个段落有着更大的行高。
</p>
</body>
</html> 2、应用像素值设定行间隔
本例演试怎样应用像素值来设定段落中的行间隔。看到本信息内容表明你在用心阅读文章实例教程,这句话和实例教程无任何关系,网页页面课堂教学Webjx.Com只是以便避免收集。
<html>
<head>
<style type="text/css">
p.small
{
line-height: 10px
}
p.big
{
line-height: 30px
}
</style>
</head>
<body>
<p>
这是有着规范行高的段落。
在大多数数访问器中默认设置行伟岸约是 20px。
这是有着规范行高的段落。
这是有着规范行高的段落。
这是有着规范行高的段落。
这是有着规范行高的段落。
这是有着规范行高的段落。
</p>
<p class="small">
这个段落有着更小的行高。
这个段落有着更小的行高。
这个段落有着更小的行高。
这个段落有着更小的行高。
这个段落有着更小的行高。
这个段落有着更小的行高。
这个段落有着更小的行高。
</p>
<p class="big">
这个段落有着更大的行高。
这个段落有着更大的行高。
这个段落有着更大的行高。
这个段落有着更大的行高。
这个段落有着更大的行高。
这个段落有着更大的行高。
这个段落有着更大的行高。
</p>
</body>
</html> 3、应用标值来设定行间隔
本例演试怎样应用1个标值来设定段落中的行间隔。
<html>
<head>
<style type="text/css">
p.small
{
line-height: 0.5
}
p.big
{
line-height: 2
}
</style>
</head>
<body>
<p>
这是有着规范行高的段落。
默认设置行伟岸约是 1。
这是有着规范行高的段落。
这是有着规范行高的段落。
这是有着规范行高的段落。
这是有着规范行高的段落。
这是有着规范行高的段落。
</p>
<p class="small">
这个段落有着更小的行高。
这个段落有着更小的行高。
这个段落有着更小的行高。
这个段落有着更小的行高。
这个段落有着更小的行高。
这个段落有着更小的行高。
这个段落有着更小的行高。
</p>
<p class="big">
这个段落有着更大的行高。
这个段落有着更大的行高。
这个段落有着更大的行高。
这个段落有着更大的行高。
这个段落有着更大的行高。
这个段落有着更大的行高。
这个段落有着更大的行高。
</p>
</body>
</html>