多语言展示
当前在线:1765今日阅读:26今日分享:39

DIV+CSS教程:[5]CSS如何设置文字大小

在网页设计中我们常常通过文字的大小来突出主题,那么CSS是如何设置HTML页面中文字大小的呢?
工具/原料

dreamweaver cs5

方法/步骤
1

在讲解文学大小之前,先说说大小的单位,文字大小的单位主要分为二种,一是绝对单位,二是相对单位,如何区分呢?绝对单位是在任何分辨率的显示器下,显示出来的大小都是绝对大小,不会发生改变。而相对单位则会发生改变。

2

绝对单位有以下5种in(英寸),cm(厘米),mm(毫米),pt(印刷的点数),pc(1pc=12pt),而相对单位有px(像素),CSS是通过font-size属性来控制文字大小的。

3

下面演示一下各个绝对单位的显示效果。样式设置:.in{ font-size: 0.3in; }.cm{ font-size: 0.3cm; }.mm{ font-size: 3mm; }.pt{ font-size: 12pt; }.pc{ font-size: 3pc; }html中的代码:

文字大小,0.3in

文字大小,0.3cm

文字大小,3mm

文字大小,12pt

文字大小,3pc

4

以上的代码运行后,效果如下:

5

除此之外,还有一些设置文字大小的比例,“%”与“em”这二个都是根据父标记而显示的,如何没有父标记,那么就取浏览器的默认值。如font-size:100%,表示在父标记的基础上乘以100%,font-size:0.6em,则表示在父标记的基础上乘以0.6;

6

还有一个很常用的方式,就是通过像素来设置文字大小,如font-size:18px;,不同的像素显示的效果不一样,而且实际的显示大小与分辨率有关。

推荐信息