读书频道 > 网站 > 网页设计 > HTML 5与CSS 3权威指南(第2版·下册)
20.2.2 插入图像文件的好处
13-03-15    奋斗的小年轻
收藏    我要投稿   
全书共29章,本书分为上下两册:上册(1~17章)全面系统地讲解了HTML 5相关的技术,以HTML 5对现有Web应用产生的变革开篇,顺序讲解了HTML 5与HTML 4的区别、HTML 5的结构、表单元素、HTML编辑API、图形绘...立即去当当网订购

虽然可以利用img元素在画面中追加图像文件,但是也可以使用样式表来追加图像文件,这样做的好处是可以为页面的编写节省大量时间。

例如,在代码清单20-3所示的示例中,可以利用名字为“new”的类来在个别标题后面追加表示新内容的图像文件,这个功能可以被利用在购物网站的商品清单中,用来表示哪些货物是新到的,或者用在文章网站的文章列表中,用来表示哪些文章是新发表的。

代码清单20-3   使用选择器插入图像文件的示例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>使用选择器插入图像文件示例</title>
</head>
<style type="text/css">
h1.new:after{
    content:url(new.gif);
}
</style>
<body>
<h1 class="new">标题A</h1>
<h1 class="new">标题B</h1>
<h1>标题C</h1>
<h1>标题D</h1>
<h1>标题E</h1>
</body>
</html>

这段代码的运行结果如图20-3所示。

另外,还有一种在样式表中追加图像文件的方法,就是把它作为元素的背景图像文件来追加。例如代码清单20-4的示例中,同时对两个标题元素追加图像文件,对第一个标题元素采用before选择器,对第二个标题元素采用追加背景图像的方法来追加。在浏览器中显示的时候,这两种追加的结果看不出有什么区别。


 

代码清单20-4   同时采用两种方法追加图像文件的示例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>同时采用两种方法追加图像文件示例</title>
</head>
<style type="text/css">
h1.head01:before{
    content:url(new.gif);
}
h1.head02{
    background-image:url(new.gif);
    background-repeat:no-repeat;
    padding-left:28px;
}
</style>
<body>
<h1 class="head01">标题A</h1>
<h1 class="head02">标题B</h1>
</body>
</html>

这段代码的运行结果如图20-4所示。


 

但是,在打印的时候,如果设定为不打印背景的话,使用before选择器追加的图像文件能够正常打印,但是使用追加背景图像的方法追加的图像文件就不能正常打印了。

譬如,在Firefox浏览器中运行代码清单20-4中的示例代码,然后点击“文件”菜单下的“打印预览”子菜单,在弹出的打印预览对话框中,点击页面设置按钮,在弹出的页面设置对话框中将“打印背景(颜色和图片)”复选框设为非选取状态,然后关闭页面设置对话框,观察打印预览对话框中的画面,画面变为如图20-5所示。


 

点击复制链接 与好友分享!回本站首页
分享到: 更多
您对本文章有什么意见或着疑问吗?请到论坛讨论您的关注和建议是我们前行的参考和动力  
上一篇:1.3 功能
下一篇:1.5 小结
相关文章
图文推荐
JavaScript网页动画设
1.9 响应式
1.8 登陆页式
1.7 主题式
排行
热门
文章
下载
读书

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训
版权所有: 红黑联盟--致力于做最好的IT技术学习网站