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

时间：2021-10-30 11:02:59

CSS图片

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

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

CSS自学笔记（9）:CSS拓展（二）
内马尔破门瞬间
CSS自学笔记（9）:CSS拓展（二）
街舞助兴
CSS自学笔记（9）:CSS拓展（二）
激情墨西哥
CSS自学笔记（9）: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="//bbsmax.ikafan.com/static/L3Byb3h5L2h0dHAvYy5oaXBob3Rvcy5iZGltZy5jb20vYWxidW0vcyUzRDEwMDAlM0JxJTNEOTAvc2lnbj03YjA5ODEwZDZkMDYxZDk1Nzk0NjMzMzg0YmM0MzFhMC9jYTEzNDk1NDA5MjNkZDU0ODQ0NjVmNWRkMjA5YjNkZTljODI0OGNhLmpwZw==.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="//bbsmax.ikafan.com/static/L3Byb3h5L2h0dHAvZi5oaXBob3Rvcy5iZGltZy5jb20vYWxidW0vcyUzRDEwMDAlM0JxJTNEOTAvc2lnbj1jY2Q5NjRlOTg5MTM2MzI3MTFlZGM2MzNhMWJmOWI5ZC82ZDgxODAwYTE5ZDhiYzNlNmMzM2ZlZmY4MThiYTYxZWE4ZDM0NWM4LmpwZw==.jpg">

44         <img class="img" src="//bbsmax.ikafan.com/static/L3Byb3h5L2h0dHAvZi5oaXBob3Rvcy5iZGltZy5jb20vYWxidW0vcyUzRDEwMDAlM0JxJTNEOTAvc2lnbj1jY2Q5NjRlOTg5MTM2MzI3MTFlZGM2MzNhMWJmOWI5ZC82ZDgxODAwYTE5ZDhiYzNlNmMzM2ZlZmY4MThiYTYxZWE4ZDM0NWM4LmpwZw==.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="//bbsmax.ikafan.com/static/L3Byb3h5L2h0dHAvYy5oaXBob3Rvcy5iZGltZy5jb20vYWxidW0vcyUzRDEwMDAlM0JxJTNEOTAvc2lnbj00MmI3YzQyMWE4MTg5NzJiYTczYTA0Y2FkNmZkNDBmOC8zNDJhYzY1YzEwMzg1MzQzNjk1MzdmMTQ5MDEzYjA3ZWNhODA4ODYzLmpwZw==.jpg">

50         <img class="img" src="//bbsmax.ikafan.com/static/L3Byb3h5L2h0dHAvYy5oaXBob3Rvcy5iZGltZy5jb20vYWxidW0vcyUzRDEwMDAlM0JxJTNEOTAvc2lnbj00MmI3YzQyMWE4MTg5NzJiYTczYTA0Y2FkNmZkNDBmOC8zNDJhYzY1YzEwMzg1MzQzNjk1MzdmMTQ5MDEzYjA3ZWNhODA4ODYzLmpwZw==.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="//bbsmax.ikafan.com/static/L3Byb3h5L2h0dHAvZi5oaXBob3Rvcy5iZGltZy5jb20vYWxidW0vcyUzRDEwMDAlM0JxJTNEOTAvc2lnbj0zZWE4NWIyZWQ3MDczNWZhOTVmMDRhYjlhZTYxMzRjMi8xMTM4NTM0M2ZiZjJiMjExMDZhMzdjN2JjOTgwNjUzODBjZDc4ZTcyLmpwZw==.jpg">

56         <img class="img" src="//bbsmax.ikafan.com/static/L3Byb3h5L2h0dHAvZi5oaXBob3Rvcy5iZGltZy5jb20vYWxidW0vcyUzRDEwMDAlM0JxJTNEOTAvc2lnbj0zZWE4NWIyZWQ3MDczNWZhOTVmMDRhYjlhZTYxMzRjMi8xMTM4NTM0M2ZiZjJiMjExMDZhMzdjN2JjOTgwNjUzODBjZDc4ZTcyLmpwZw==.jpg" alt="Ballade" width="160" height="160">

57     </a>

58     <div class="desc">梅西的任意球来</div>

59 </div>

60 </body>

61 </html>

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

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

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

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)是在浏览器和打印到纸张上元素的字体都为粗体。

CSS的一些注意事项

在一个html文档中，应该要声明!DOCTYPE，因为CSS的有些属性在IE8以及一下版本时，可能无法打到逾期的效果。

尽可能避免使用behavior属性，因为behavior属性只在IE浏览器中支持，在其他浏览器不支持该属性。在需要适应behavior属性时，应该使用JavaScript和html DOM代替。

其他应注意的地方，以后遇到在做总结。

相关文章