CSS自學筆記（9）:CSS拓展（二）

時間 2019-12-13

標籤 css 自學筆記拓展欄目 CSS 简体版

原文原文鏈接

CSS圖片

當一個網頁上有一張或多張圖片，並且這些圖片的尺寸比較大時，爲了是網頁佈局更緊湊合理，咱們能夠將這些圖片放到一個圖片庫裏，能夠有效的防止圖片過大可能會對網頁佈局形成的不良影響。html

經過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媒介就是定義文檔以何種方式「顯示」，文檔能夠「顯示」在顯示器、紙、音頻等媒介上spa

不一樣的媒介類型

媒介類型	描述
all	用於全部的媒介設備。
aural	用於語音和音頻合成器。
braille	用於盲人用點字法觸覺回饋設備。
embossed	用於分頁的盲人用點字法打印機。
handheld	用於小的手持的設備。
print	用於打印機。
projection	用於方案展現，好比幻燈片。
screen	用於電腦顯示器。
tty	用於使用固定密度字母柵格的媒介，好比電傳打字機和終端。
tv	用於電視機類型的設備。

注：媒介類型名稱對大小寫不敏感。3d

媒介類型的定義經過使用@media實現。code

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


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


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

上面的樣式是p元素的內容在顯示器上以(font-family:verdana,sans-serif; font-size:14px)效果顯示，若是打印到紙張的話顯示效果是(font-family:times,serif; font-size:10px)，顯示效果(font-weight:bold)是在瀏覽器和打印到紙張上元素的字體都爲粗體。orm