CSS自学笔记（9）:CSS拓展（二）

浏览数：32 / 时间：2015年06月09日

CSS图片

当一个网页上有一张或多张图片，而且这些图片的尺寸比较大时，为了是网页布局更紧凑合理，我们可以将这些图片放到一个图片库里，可以有效的防止图片过大可能会对网页布局造成的不良影响。

通过CSS我们就可以实现这些操作，下面是一个简单的例子：

内马尔破门瞬间

街舞助兴

激情墨西哥

梅西的任意球来

源代码是：

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8"/>
 5 <style>
 6 div.img
 7   {
 8   margin:3px;
 9   border:1px solid #bebebe;
10   height:auto;
11   width:auto;
12   float:left;
13   text-align:center;
14   }
15 div.img img.img
16   {
17   display:inline;
18   margin:3px;
19   border:1px solid #bebebe;
20   }
21 div.img a.img:hover img.img
22   {
23   border:1px solid #333333;
24   }
25 div.desc
26   {
27   text-align:center;
28   font-weight:normal;
29   width:150px;
30   font-size:12px;
31   margin:10px 5px 10px 5px;
32   }
33 </style>
34 </head>
35 <body>
36 <div class="img">
37     <a class="img" target="_blank" href="">
38         <img class="img" src="http://c.hiphotos.bdimg.com/album/s%3D1000%3Bq%3D90/sign=7b09810d6d061d95794633384bc431a0/ca1349540923dd5484465f5dd209b3de9c8248ca.jpg" alt="Ballade" width="160" height="160">
39     </a>
40     <div class="desc">内马尔破门瞬间</div>
41 </div>
42 <div class="img">
43     <a class="img" target="_blank" href="http://f.hiphotos.bdimg.com/album/s%3D1000%3Bq%3D90/sign=ccd964e98913632711edc633a1bf9b9d/6d81800a19d8bc3e6c33feff818ba61ea8d345c8.jpg">
44         <img class="img" src="http://f.hiphotos.bdimg.com/album/s%3D1000%3Bq%3D90/sign=ccd964e98913632711edc633a1bf9b9d/6d81800a19d8bc3e6c33feff818ba61ea8d345c8.jpg" alt="Ballade" width="160" height="160">
45     </a>
46     <div class="desc">街舞助兴</div>
47 </div>
48 <div class="img">
49     <a  class="img" target="_blank" href="http://c.hiphotos.bdimg.com/album/s%3D1000%3Bq%3D90/sign=42b7c421a818972ba73a04cad6fd40f8/342ac65c1038534369537f149013b07eca808863.jpg">
50         <img class="img" src="http://c.hiphotos.bdimg.com/album/s%3D1000%3Bq%3D90/sign=42b7c421a818972ba73a04cad6fd40f8/342ac65c1038534369537f149013b07eca808863.jpg" alt="Ballade" width="160" height="160">
51     </a>
52     <div class="desc">激情墨西哥</div>
53 </div>
54 <div class="img">
55     <a class="img" target="_blank" href="http://f.hiphotos.bdimg.com/album/s%3D1000%3Bq%3D90/sign=3ea85b2ed70735fa95f04ab9ae6134c2/11385343fbf2b21106a37c7bc98065380cd78e72.jpg">
56         <img class="img" src="http://f.hiphotos.bdimg.com/album/s%3D1000%3Bq%3D90/sign=3ea85b2ed70735fa95f04ab9ae6134c2/11385343fbf2b21106a37c7bc98065380cd78e72.jpg" alt="Ballade" width="160" height="160">
57     </a>
58     <div class="desc">梅西的任意球来</div>
59 </div>
60 </body>
61 </html>

通过CSS我们也可以调整图片的透明度。

通过CSS的透明效果属性(opacity属性)来完成这些操作。

CSS 媒介

CSS媒介就是定义文档以何种方式“显示”，文档可以“显示”在显示器、纸、音频等媒介上

不同的媒介类型

媒介类型	描述
all	用于所有的媒介设备。
aural	用于语音和音频合成器。
braille	用于盲人用点字法触觉回馈设备。
embossed	用于分页的盲人用点字法打印机。
handheld	用于小的手持的设备。
print	用于打印机。
projection	用于方案展示，比如幻灯片。
screen	用于电脑显示器。
tty	用于使用固定密度字母栅格的媒介，比如电传打字机和终端。
tv	用于电视机类型的设备。

注：媒介类型名称对大小写不敏感。

媒介类型的定义通过使用@media实现。

@media screen
{
p{font-family:verdana,sans-serif; font-size:14px}
}

@media print
{
p{font-family:times,serif; font-size:10px}
}

@media screen,print
{
p{font-weight:bold}
}

上面的样式是p元素的内容在显示器上以(font-family:verdana,sans-serif; font-size:14px)效果显示，如果打印到纸张的话显示效果是(font-family:times,serif; font-size:10px)，显示效果(font-weight:bold)是在浏览器和打印到纸张上元素的字体都为粗体。