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 | 用于小的手持的设备。 |
| 用于打印机。 | |
| projection | 用于方案展示，比如幻灯片。 |
| screen | 用于电脑显示器。 |
| tty | 用于使用固定密度字母栅格的媒介，比如电传打字机和终端。 |
| tv | 用于电视机类型的设备。 |
注：媒介类型名称对大小写不敏感。
媒介类型的定义通过使用@media实现。
@media screen{ p{font-family:verdana,sans-serif; font-size:14px} }{ p{font-family:times,serif; font-size:10px} }@mediaprint{ p{font-weight:bold} }@mediascreen,print
上面的样式是p元素的内容在显示器上以(font-family:verdana,sans-serif; font-size:14px)效果显示，如果打印到纸张的话显示效果是(font-family:times,serif; font-size:10px)，显示效果(font-weight:bold)是在浏览器和打印到纸张上元素的字体都为粗体。
CSS的一些注意事项
在一个html文档中，应该要声明!DOCTYPE，因为CSS的有些属性在IE8以及一下版本时，可能无法打到逾期的效果。
尽可能避免使用behavior属性，因为behavior属性只在IE浏览器中支持，在其他浏览器不支持该属性。在需要适应behavior属性时，应该使用JavaScript和html DOM代替。
其他应注意的地方，以后遇到在做总结。