方法一:内嵌样式(为了方便查看效果我给这个段落加了个红色的边框)
方法二:内链样式(为了方便查看效果我给这个段落加了个蓝色的边框)
方法三:外链样式,同方法二,只不过将样式新建一个文件引入即可
<!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
根据现实中的分辨率大小来设置css来控制。
@media screen and (min-width: 200px) {
body {
font-size: 10px
}
}
@media screen and (min-width: 1000px) {
body {
font-size: 50px
}
}
扩展资料:
CSS3 @media 查询:
使用 @media 查询,你可以针对不同的媒体类型定义不同的样式。
@media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的。
当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面。
CSS 语法:
@media mediatype and|not|only (media feature) {
CSS-Code
}
媒体类型:
all:用于所有设备
print:用于打印机和打印预览
screen:用于电脑屏幕,平板电脑,智能手机等。
speech:应用于屏幕阅读器等发声设备
字体的大小是根据字体的高度来定的(而不是你自认为的对角线),等宽字体的半角字符(如英文字母、数字、符号等)的宽度是高度的一半,全角字符(如汉字)的宽度和高度则相等,而在比例字体(通常只有英文字体中才有比例字体,汉字都是等宽的)中,宽度则是不相等的(比如W的宽度就远大于i的宽度),但会以大写的M作为基准,M的宽和高是相等的。行高=字符的高度+行间距
如果已设定font-size:12px,而line-height:16px,则行间距为16-12=4px