Personally, I think the hatred of inline css is just ridiculous. Hardcore cult behaviour, people just sheepishly repeat "Separation of concerns!". Yes, there are times where if there is a repeating element and you will need repeated styling to use a class targeted from a CSS file, but most of the time it improves speed of development and CLARITY OF CODE to put the style inline, it's great if I can look at the code and see that there is a custom margin height, it helps me picture the HTML document as a whole, instead of some named class that gives me little insight into which styles will be applied.

所以在这里我要做一个逆向的人，我要说内联css是伟大的，那些对你使用它大喊大叫的人只是在遵循他们被告知的东西，而实际上并没有给予任何原始的、公正的考虑。

内联CSS总是优先于任何链接样式表CSS。如果您编写了一个合适的级联样式表，而您的属性没有正确应用，这会让您非常头疼。

它还在语义上损害了应用程序:CSS是关于将表示与标记分离的。当您将两者纠缠在一起时，事情就变得更加难以理解和维护。这与在服务器端将数据库代码与控制器代码分离的原理类似。

最后，假设您有20个这样的图像标记。当你决定它们应该向左浮动时会发生什么?

当你想让网站看起来不一样时，不得不修改100行代码。这可能不适用于你的例子，但如果你使用内联css的事情

<div style ="font-size:larger; text-align:center; font-weight:bold">

在每个页面上表示一个页眉，这样维护起来会容易得多

<div class="pageheader">  

如果pageheader定义在一个单独的样式表中，那么如果你想改变整个站点的页面header的外观，你只需在一个地方更改CSS。

然而，我要说的是，在你的例子中，我认为没有问题。您针对的是单个图像的行为，它可能必须在单个页面上显示正确，因此将实际的css放在样式表中可能会过度。

快速css原型的html5方法

或者:<style>标签不再只是用于头部!

黑客CSS

假设您正在调试，并希望修改页面css，使某个部分看起来更好。您可以像我现在所做的那样，采用分阶段的方法，而不是快速、肮脏和不可维护的方式来创建您的内联样式。

没有内联样式属性

永远不要创建你的css内联，我的意思是:<element style='color:red'>或甚至<img style='float:right'>这非常方便，但不能在以后的实际css文件中反映实际的选择器特异性，如果你保留它，你会后悔以后的维护负载。

用<style>代替原型

在使用内联css的地方，应该使用in-page <style>元素。试试吧!它在所有浏览器中都能很好地工作，所以非常适合测试，但允许你优雅地将这样的css移出到你的全局css文件中，无论何时你想要/需要!(*请注意，选择器只具有页面级别的特异性，而不是站点级别的特异性，所以要小心太一般)就像在你的css文件中一样干净:

<style>
.avatar-image{
    float:right
}
.faq .warning{
    color:crimson;
}
p{
    border-left:thin medium blue;
    // this general of a selector would be very bad, though.
    // so be aware of what'll happen to general selectors if they go
    // global
}
</style>

重构别人的内联css

有时候你甚至不是问题所在，你在处理别人的内联css，你必须重构它。这是page中<style>的另一个重要用途，这样当重构时，您可以直接剥离内联css并立即将其放在页面的类、id或选择器中。如果你对你的选择器足够小心，你可以把最终的结果移动到全局css文件的末尾，只需要复制和粘贴。

要立即将所有css文件传输到全局css文件中有点困难，但是使用in-page <style>元素，我们现在有了替代方案。

除了其他答案....国际化。

根据内容语言的不同，通常需要调整元素的样式。

一个明显的例子就是从右向左的语言。

假设你使用你的代码:

<img src="myimage.gif" style="float:right" />

现在假设你想让你的网站支持rtl语言——你需要:

<img src="myimage.gif" style="float:left" />

现在，如果你想同时支持两种语言，没有办法用内联样式来赋值给float。

在CSS中，lang属性很容易解决这个问题

所以你可以这样做:

img {
  float:right;
}
html[lang="he"] img { /* Hebrew. or.. lang="ar" for Arabic etc */
  float:left;
}

Demo

除了其他答案，你不能针对内联CSS中的伪类或伪元素