CSS文本长度单位的总结与实例分析
网页中对于文字的润色供给了良多撑持，我们可以做到网页中像word一样来显示文字。今天我就来分享下在HTML加上CSS中供给的文字长度单元，固然有的用不到可是也给我供给了一个方式和撑持。
东西/原料
- CSS根本常识
- HTML根本常识
方式/步调
- 1
文字长度单元in（英寸）：一般英国利用的长度单元，1英寸约等于2.51厘米。这里我在浏览器中显示1in的文字结果。具体代码：
<html>
<head>
<title>文字的长度</title>
</head>
<body>
<p style="font-size:1in">这里是文字长度的测试</p>
</body>
</html>
- 2
文字的长度单元cm（公分）：公分也叫厘米。这里我为了和上面的例子做比力也用2.54厘米来申明问题，具体代码如下：
<html>
<head>
<title>文字的长度</title>
</head>
<body>
<p style="font-size:1in">这里是文字长度的测试</p>
<p style="font-size:2.54cm">这里是文字长度的测试</p>
</body>
</html>
经由过程比力可以看到执行成果完全一样。
- 3
文字的长度单元mm：这个就是长度单元来暗示文字的巨细的一个方式。
<html>
<head>
<title>文字的长度</title>
</head>
<body>
<p style="font-size:10mm">这里是文字长度的测试</p>
<p style="font-size:1cm">这里是文字长度的测试</p>
</body>
</html>
经由过程10mm和1cm比力可以反映出执行成果的问题。
- 4
文字的长度单元ex：以小写字母的高度为单元来显示的，这个此刻良多都不撑持了，利用的也很少。
<html>
<head>
<title>文字的长度</title>
</head>
<body>
<p style="font-size:10ex">HtmL</p>
</body>
</html>
- 5
文字的长度单元em：这个是以字体的高度为单元的一种暗示方式，其实就是百分比来显示的。em在CSS中，1em等于100％，是一个比率，连系CSS担当关系利用，具有矫捷性。
<html>
<head>
<title>文字的长度</title>
</head>
<body>
<p style="font-size:10em">HtmL</p>
</body>
</html>
- 6
文字的长度单元pt：在电脑显示器中是一个尺度的长度单元，1pt等于1/72英寸，这个单元经常用于印刷业，很是简单易用的一个单元。
<html>
<head>
<title>文字的长度</title>
</head>
<body>
<p style="font-size:72pt">HtmL</p>
<p style="font-size:1in">HtmL</p>
</body>
</html>
经由过程72in个1pt的比力来阐述这个单元，可以直不雅的反映出他的巨细的。
- 7
文字的长度单元px：像素,屏幕上显示的最小单元，这个经常用于网页设计中很是直不雅而且便利；示例代码如下
<html>
<head>
<title>文字的长度</title>
</head>
<body>
<p style="font-size:36px">HtmL</p>
</body>
</html>
经由过程以上的例子我们进修了文字长度的单元，经由过程分歧单元来描述文字巨细需要按照分歧的界说来设置其值。
注重事项
- 设置文字巨细的时辰需要合适取值
- 发表于 2018-03-13 00:00
- 阅读 ( 858 )
- 分类：其他类型
0 篇文章
作家榜 »
-
xiaonan123
189 文章
-
汤依妹儿
97 文章
-
luogf229
46 文章
-
jy02406749
45 文章
-
小凡
34 文章
-
Daisy萌
32 文章
-
我的QQ3117863681
24 文章
-
华志健
23 文章