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

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

1、效果图

2、HTML代码

The Cat Vase: The cats are cute, white, with gold-trimmed ears and tails.

3、CSS代码

/*CSS STYLE SHEET FOR [captions-1a.html] Created by [Serein_Chan] Email: [[email protected]] Author Blog:[http://blog.csdn.net/cxwen78] */ /*注释 */ /*body的样式 */ body { margin: 0; padding: 0; background-color: #fafac8; font: 62.5%; /*浏览器中默认的文本大小是 16 像素, 16px*62.5%=10px*/ text-align: center; color: #4d4d4d; } .captioned_photo { margin: .5em 0 .5em 2em; padding:.3em; background-color: #fff; line-height: 1em; width: 240px; text-align: left; } .captioned_photo p { width: 100%; margin: 0; padding: 1em 0; font: 0.6em Verdana, sans-serif;/*开头设置了父节点body的字体大小为10px,即1em=10px,0.6em=6px*/ color: #666; } .captioned_photo img { margin: 0; padding: 0; display: block;/*显示为块级元素，前后带有换行符*/ } 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差不多了

参考：《The Art & Science of CSS》

W3C School： http://www.w3school.com.cn/css/css_font.asp