方法一:内嵌样式(为了方便查看效果我给这个段落加了个红色的边框)
方法二:内链样式(为了方便查看效果我给这个段落加了个蓝色的边框)
方法三:外链样式,同方法二,只不过将样式新建一个文件引入即可
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<html xmlns="
<head>
<meta http-equiv="Content-Type" content="text/html charset=gb2312" />
<title>无标题文档</title>
<style>
.duangao{
height:100px border:1px solid #00f
}
</style>
</head>
<body>
方法一内嵌样式(为了方便查看效果我给这个段落加了个红色的边框):
<p style="height:100px border:1px solid #f00">这是一段文字,这是一段文字,测试文字的高度.这是一段文字,这是一段文字,测试文字的高度.这是一段文字,这是一段文字,测试文字的高度.这是一段文字,这是一段文字,测试文字的高度.这是一段文字,这是一段文字,测试文字的高度.这是一段文字,这是一段文字,测试文字的高度.这是一段文字,这是一段文字,测试文字的高度.这是一段文字,这是一段文字,测试文字的高度.</p>
方法二内链样式(为了方便查看效果我给这个段落加了个红色的边框):
<p class="duangao">这是一段文字,这是一段文字,测试文字的高度.这是一段文字,这是一段文字,测试文字的高度.这是一段文字,这是一段文字,测试文字的高度.这是一段文字,这是一段文字,测试文字的高度.这是一段文字,这是一段文字,测试文字的高度.这是一段文字,这是一段文字,测试文字的高度.这是一段文字,这是一段文字,测试文字的高度.这是一段文字,这是一段文字,测试文字的高度.</p>
方法三外链样式,同方法二,只不过将样式新建一个文件引入即可
</body>
</html>
最终效果图如下:
如果想使单行文字垂直居中,即文字不多,将行高和段落设为一样的数值即可。如:height:100pxline-height:100pox
font-size实际上设置的是字体的高度,原因很简单为了保证CSS的视觉效果,
我们都知道字体类型可以通过font-family设置,
而不同的字体实际显示样式是不一样的,
为了保证效果,
所以font-size设置的是高度,
便于不同字体在一起,
保持高度相同,
宽度就无所谓了
(有时间多巩固下CSS基础哈)