CSS構造顏色、背景與映像

標籤：

1. 設定顏色
2. 背景使用
3. 映像使用

   1.設定顏色

   紅色的幾種合法定義;

   ????#f00;

   ????#ff0000;

   ????Red;

   ????Rgb(255,0,0);

   ????Rgb(100%,0%,0%);

   ?

   2.十六進位三元組

   ?

   ????第一個位元組:紅色的值;

   ????第二個位元組:綠色的值;

   ????第三個位元組:藍色的值;

   ????簡化寫法:#cccccc 可寫成 #ccc, #ff6633可以寫成 #f63

   ?

   3.使用17種具名顏色

   ????黑色(black)???? 000000

   ????藏藍色(navy) 000080

   ????綠色(green) 008000

   ????海藍色(teal) 008080

   ????銀色(silver)???? 0c0c0c

   ????藍色(blue) 0000ff

   ????酸橙色(lime) 00ff00

   ????淺綠色(aqua) 00ffff

   ????絳紫色(maroon) 800000

   ????紫色(purple) 800080

   ????橄欖綠(olive) 808000

   ????灰色(gray)????????808080

   ????紅色(red)????????????ff0000

   ????紫紅色(fuchsia) ff00ff

   ????黃色(yellow)????????ffff00

   ????橙色(orange)????????ffa500

   ????白色(white)????????ffffff

   ?

   4.使用span更好的控制文本中局部地區的文本

   ????<span>常值內容</span>

   ?

4. 使用display屬性提供區塊轉換

   inline 轉換成內聯,

   block 轉換成區塊,

   none 不佔位的隱藏

   ?

   6.背景圖象漸層的製作

   ????Body {

   ????????Background: #ccc url(bg.gif) repeat-x;

   }

   ?

   7.給一個區塊加上一個背景

   ????#branding {

   ????????Width: 700px;

   ????????Height: 200px;

   ????????Background: url(branding.gif) no-repeat;

   }

   ?

   8.給標題加上一個小表徵圖

   ????H1 {

   ????????Padding-left: 20px;

   ????????Background: url (bullet.gif) no-repeat left center;

   }

   如果希望使用百分比而不使用關鍵字,則 0 50%這樣就實現了垂直置中

   ?

   9.圓頂角

   ????<div class="box">

   ????????<h2>Headline</h2>

   ????????<p>Content</p>

   ????</div>

   ?

   ????.box {

   ????????Width: 418px;

   ????????Background: #ccc url(bottom.gif) no-repeat left bottom;

   }

   ?

   .box h2 {

   ????Background:url(top.gif) no-repeat left top;

   }

   ?

   如果不希望碰到邊界,加上填充.

   .box h2 {

   ????Padding:10px 20px 0 20px;

   }

   .box p {

   ????Padding:0 20px 10px 20px;

   }

   ?

   10.簡單的CSS陰影製作效果

   <div class="img-wrapper">

   <img src="images/dunstan.jpg" width="300" height="300" alt="Dunstan Orchard" />

   </div>

   ?

   .img-wrapper {

   background: url(images/shadow.gif) no-repeat bottom right;

   clear: right;

   float: left;

   position: relative;

   margin: 10px 0 0 10px;

   }
   

   .img-wrapper img {

   display: block; /*這個屬性到列表再進行解釋*/

   margin: -5px 5px 5px -5px;

   position: relative;

   }

CSS構造顏色、背景與映像