編輯“WordPress:Using Images”（章節(jié)）

===設計圖像===


Images can have borders, frames, [[Wordpress:Wrapping Text Around Images|captions]], and be styled in many different ways.  There are basically two ways to style an image on your site.  You can style it from within the style sheet or ''inline'' on a specific image.

圖像可以有邊緣，框架，[[Wordpress:Wrapping Text Around Images|說明]],并以多種方式設計?；旧嫌袃煞N方法可以設計你的站點上的圖像。你可以在一個設計表上設計它，也可以在一個具體的圖像上''內(nèi)嵌''設計。

====設計所有的圖像====

在你的[[Wordpress:Using Themes|WordPress 主題]]的<tt>style.css</tt>設計你的圖像，可以包括你的站點上的所有圖像或者特別的圖像設計。

<div style="border:solid black 1px; margin:5px; padding:10px; float:right; background: white">[[Wordpress:Image:leaf.gif]]</div>


為你的站點上每個圖像都設計一下，使它們看起來特別，為<tt>image</tt> tag找一個或者添加一個CSS選擇器。然后將你的類型添加到標簽上。例如，假如你想讓你的圖像的周圍圍繞著一個黑色的邊沿，而且你想讓邊沿和圖像之間留有間距，也想要圖像和文字周圍留有合適的間距。



<pre>img {
     margin: 5px;
     padding: 10px;
     border: solid black 1px
}</pre>

<div style="border:double black 10px; margin:20px; padding:10px; float:right;background:white;">[[Wordpress:Image:leaf.gif]]</div>

也許你想要一個稍微地更加生動的東西。你可以改變邊沿的厚度，把它設置為一個"雙的"線條。也許你真的想將圖像與文章的其它部分隔離起來，這樣的話，你可以增加圖像周圍的空白。


<pre>img {
     margin: 20px;
     padding: 10px;
     border: double black 1px
}</pre>

====設計一些圖像====

你可以將一個特別的圖像的具體的樣式添加到你的樣式表上。如果你已經(jīng)設計好了你的所有的圖像，你必須確定你規(guī)定了每個設計的說明或者規(guī)定了<code>image</code>標簽形式的屬性，來制服那個屬性。如果你不改變頁邊的空白，那么它在新的樣式中仍然會保持原樣。這個叫做[[Wordpress:CSS_Troubleshooting#The_CSS_Parent_and_Child_Relationship|CSS母/子關系]].

<div style="border:solid #003300 4px; margin:20px; padding:20px; background: #006600; float:right">[[Wordpress:Image:leaf.gif]]</div>

假如你想讓歸檔在自然類別（有一個美麗的綠色背景）中的文章上有一些兒圖像。其它的圖像看起來應該是一樣的，就是你添加到你的自然分類中的圖像。你只要將一個<code>class</code>添加到你的樣式表和分類中的每個圖像。

方便記憶，我們稱我們的<code>class</code> "自然"。我們想在圖像周圍有一個非常深綠的厚的邊沿和一個中等綠色的背景，來突出圖像。


<pre>img.nature {
     margin: 20px;
     padding: 20px;
     border:solid #003300 4px;
     background: #006600;
}</pre>

在分類中的每個圖像上，你只有為"自然"添加<code>class</code>：


<img src="leaf.gif" alt="Red leaf" class="nature" />

如果你需要為不同的圖像準備更多的類型，你只要創(chuàng)建更多需要的類型就可以了。
====設計一個或者兩個圖像 Inline====

<div style="margin:20px; padding:20px; background: black; float:right">[[Wordpress:Image:leaf.gif]]</div>

有時，你只想讓你的站點上一個或者兩個圖像看起來與其它的不一樣。這個技術叫做'''inline形式。'''它直接將CSS形式應用到圖像自身。

例如，假如你想將一個圖像與一個黑色的背景隔離起來，以提醒人們注意。


<pre><img src="leaf.gif" alt="Red leaf" style="padding:20px; 
background: black; border: none" />
</pre>

這并不是一個用于每一個圖像的技術。這只用于一些特殊的圖像，需要"一些特別的東西。"