用CSS设置的4种样式的图片说明文本之01

常规的方式,说明文本在图片正下方

1、效果图
用CSS设置的4种样式的图片说明文本之01
2、HTML代码
3、CSS代码
4、CSS代码说明之一种字体大小的设置方式:em
font-size 属性设置文本的大小。 font-size 值可以是绝对或相对值。

绝对值:

  • 将文本设置为指定的大小
  • 不允许用户在所有浏览器中改变文本大小(不利于可用性)
  • 绝对大小在确定了输出的物理尺寸时很有用

相对大小:

  • 相对于周围的元素来设置大小
  • 允许用户在浏览器改变文本大小

注意:如果您没有规定字体大小,普通文本(比如段落)的默认大小是 16 像素 (16px=1em)。

本例子的CSS中,我们使用的是em来设置字体的大小。使用 em 单位代替 pixels可以避免在 Internet Explorer 中无法调整文本的问题。W3C 推荐使用 em 尺寸单位。

1em 等于当前的字体尺寸。如果一个元素的 font-size 为 16 像素,那么对于该元素,1em 就等于 16 像素。在设置字体大小时,em 的值会相对于父元素的字体大小改变。

浏览器中默认的文本大小是 16 像素。因此 1em 的默认尺寸是 16 像素。

可以使用下面这个公式将像素转换为 em:pixels/16=em

(注:16 等于父元素的默认字体大小,假设父元素的 font-size 为 20px,那么公式需改为:pixels/20=em

对于本例子,CSS设置中,字体的大小设置为:font: 62.5%; 其中浏览器中默认的文本大小是 16 像素, 以百分比形式规定后得到16px*62.5%=10px,此时1em=10px;之后的关于页面字体的设置中,凡是以em作为单位的,都是以1em=10px为基准,比如之后在.captioned_photo p{}设置字体大小时为0.6em=6px。

使用em进行设置字体大小的好处:

IE对字体的大小定义和FF/Opera是不同的,默认情况下1em在IE下看起来要比其他浏览器大,所以需要在body部分加入以下定义:

font-size:62.5%;

它使得IE下的字体大小看起来是:1em=10px,这样就和FF/Opera差不多了




你可能感兴趣的:(css)