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

最新推荐文章于 2022-07-20 16:32:57 发布

Serein

最新推荐文章于 2022-07-20 16:32:57 发布

阅读量662

点赞数

分类专栏： CSS设计文章标签： css 浏览器 stylesheet xhtml javascript internet

本文链接：https://blog.csdn.net/cxwen78/article/details/6610192

版权

CSS设计专栏收录该内容

13 篇文章 0 订阅

订阅专栏

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

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标记定义的字符集是支持中文的gb2312-->
		<meta http-equiv=content-type content="text/html; charset=gb2312">
		<!--链接外部CSS样式 -->
		<link rel="stylesheet" href="captions-1a.css" type="text/css" media="screen" />
		<!--引入JavaScript -->
		<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