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

===設(shè)計(jì)圖像===


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|說(shuō)明]],并以多種方式設(shè)計(jì)?；旧嫌袃煞N方法可以設(shè)計(jì)你的站點(diǎn)上的圖像。你可以在一個(gè)設(shè)計(jì)表上設(shè)計(jì)它，也可以在一個(gè)具體的圖像上''內(nèi)嵌''設(shè)計(jì)。

====設(shè)計(jì)所有的圖像====

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

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


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



<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>

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


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

====設(shè)計(jì)一些圖像====

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

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

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

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


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

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


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

如果你需要為不同的圖像準(zhǔn)備更多的類型，你只要?jiǎng)?chuàng)建更多需要的類型就可以了。
====設(shè)計(jì)一個(gè)或者兩個(gè)圖像 Inline====

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

有時(shí)，你只想讓你的站點(diǎn)上一個(gè)或者兩個(gè)圖像看起來(lái)與其它的不一樣。這個(gè)技術(shù)叫做'''inline形式。'''它直接將CSS形式應(yīng)用到圖像自身。

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


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

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