编辑“WordPress文字围绕图片”（章节）

==图片样式==
[[Image:leaf.gif|WordPress文字围绕图片]]

我们在日志中插入图片时，有时希望图片出现在页面中间，文字则位于图片上方和下方，但更多时候我们希望图片和文字能并排显示，让文字围绕在图片周围。图片可以以多种形式出现在段落中，我们也可以为图片添加各种设计元素。下面就从一个简单的实例说起。

下面是日志中一个常见图片标签的示例，图片周围没有文字围绕。注意：我们为图片标签添加了title和alt属性；alt保证图片的可访问性，title则是图片的文字说明。
 <img src="http://example.com/images/leaf.jpg" 
 alt="leaf graphic" 
 title="leaf graphic" />
开始设计被围绕的图片样式前，我们还需要稍微修改下控制WordPress网站样式的样式表单。[[CSS]]中介绍了很多新建、编辑级联样式表的资料。

在文本编辑器中打开WordPress主题目录下的style.css文件。编辑文件内容前请先保留备份，切记！之后在文件中查找img标签，所有图片选择符应该都聚集在一个组里，如果没有，逐一找出所有图片选择符并剪切到一个组中，减少之后可能出现的麻烦。

'''边框'''
需不需要给图片加个边框呢？如果需要，接下来要设想一下边框的大小、颜色和风格。不需要边框的话，可以用下面的语句：
 img {border:0}  
如果要为图片加上一个1像素的红色实线边框，可以用：
 img {border:solid red 1px}                                                 
我们在图片周围生成一个图片链接时，有些浏览器也会自动为图片加上边框，向访问者表明“这是一个有链接的图片”。如果不希望浏览器为图片添加边框，使用以下语句：
 a img {border:0}  
还可以为图片制作悬停效果，这样访问者的鼠标略过图片时，光标就会变成手掌形状，图片也会多出一个彩色的边框：
a:hover img { border:solid red 1px; }  

'''补白与图片宽度'''

为了让图片在文本中达到最好的展示效果，我们得删除一些元素。

首先要删除日志内图片周围的所有补白部分，确保图片能完整展示在页面上。如果样式表单中没有相关说明，我们要在样式表单中添加以下内容：
 p img { padding: 0; max-width: 100%; }  

'''图片在页面左边、右边、中间'''

图片在文本段落两侧时，图片和文字间应空出一定距离，以免两者相覆盖或导致页面过于紧凑。有些浏览器处理页边距和补白的方式与其它浏览器有所不同，而下面介绍的图片样式符合大多数浏览器的“空间要求”，图片不会遮盖文字，文字也不会贸然出现在图片中：
 img.right { padding: 4px; margin: 0 0 2px 7px; display: inline; }
 img.left { padding: 4px; margin: 0 7px 2px 0; display: inline; display:inline}
声明使图片和文字保持内联状态。

接下来需要为图片添加float声明。但是先等等，我们为什么只在图片上使用左漂浮和右漂浮呢？这不是一种浪费么？如果还有其它显示在页面左侧或右侧并且需要文本围绕的元素，完全可以为它们一起添加float声明。是的，的确可以这么做，不过具体过程就不在这里的讨论范围了。我们也不能浪费float声明，如果样式表单中没有类似声明，请加入以下内容：
 .right { float: right; }
 .left { float: left; }
'''注意：'''WordPress的自带主题Derfault（Kubrick）也利用了这一技巧，但所不同的是Kubrick将类命名为 alignleft 与alignright。用left和right方便记忆和使用，但两对名称达到的运行效果是一样的。

那么怎样居中显示图片呢？上面的方法也同样适用。center标签已经不再有效，所以可以为居中显示的元素新建一个样式：
 img.centered { display: block; margin-left: auto; margin-right: auto; }  
左侧图片、右侧图片、居中图片示例

这听起来有些复杂，不过一旦完成就不用再担心出错了。当然，只是希望如此。首先为图片生成一个链接，之后在链接中添加class=& amp;quot;right", class="left" 或class="centered"，这样图片就会相应地出现在文本右侧、左侧或是中间了。就是这么简单。
 <img src="/images/leaf.gif" class="right" alt="Red leaf" title="Red Leaf" />
 This is some text that will wrap around the image that sits on the 
 right side of the text that you are writing about the leaf that is there. 
 That is, if you are writing about leaves in the first place and you want to write about this specific leaf.

[[Image:201003230001.jpg|WordPress文字围绕图片]]

 < p>This is text that sits above the leaf image that you might be writing about in your post if you were to write about leaves.
 <img src="/images/leaf.gif" class="centered" alt="Red leaf" title="Red Leaf" />
 This is some text that will sit below the text image and you can continue to write about the leaf that is there.</p>

[[Image:201003230002.jpg|WordPress文字围绕图片]]

'''调整文本大小'''
一些浏览器允许用户调整ALT标签所生成的文本的字体大小。ALT标签生成的文本会在鼠标移过某幅图片或图片加载失败时出现。我们可以把字体调整成任何尺寸，但这里的字体最好能够大幅度小于正文字体。
 img {font-size:60%}
说明	输入内容	输出结果
斜体	''斜体文字''	斜体文字
粗体	'''粗体文字'''	粗体文字
粗斜体	'''''粗斜体文字'''''	*粗斜体文字*