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

最新推荐文章于 2022-07-27 15:48:31 发布

iteye_4537

最新推荐文章于 2022-07-27 15:48:31 发布

阅读量318

点赞数

文章标签： xhtml javascript ViewUI

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

1、效果图

2、HTML代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head>  <meta http-equiv=content-type content="text/html; charset=gb2312">  <link rel="stylesheet" href="captions-1a.css" type="text/css" media="screen" />  <script type="text/javascript" src="script.js"></script> <title>图片与其说明文字</title> </head> <body> <div class="captioned_photo"> <img src="captions-1.jpg" alt="Cat Vase!" /> <p><span><strong>The Cat Vase:</strong> The cats are cute, white, with gold-trimmed ears and tails.</span></p> </div> </body> </html> 3、CSS代码

/*CSS STYLE SHEET FOR [captions-1a.html] Created by [Serein_Chan] Email: [Serein_Chan@foxmail.com] 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

iteye_4537

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用CSS设置的4种样式的图片说明文本之01

常规的方式，说明文本在图片正下方1、效果图2、HTML代码&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;&lt;html xmlns="http://www.w3.org/1999/xhtm...
复制链接

扫一扫