内联<style>标签与内联css属性
什么是设置CSS属性的首选方法？
内联样式属性：
<div style="width:20px;height:20px;background-color:#ffcc00;"></div> <style>...</style>标签中的样式属性：
<style>.gold{width:20px;height:20px;background-color:#ffcc00;}</style><div class="gold"></div>
样式规则可以使用：
- 外部文件
- 页内样式标签
- 内联样式属性
一般来说，我更喜欢使用链接的样式表，因为它们：
- 可以通过浏览器caching性能; 和
- 从发展的angular度来看，维护起来要容易得多。
但是，您的问题是具体询问style标签与内联样式。 在这种情况下，首选使用style标签，因为它：
- 提供了标记与造型的清晰分离;
- 产生更干净的HTML标记; 和
- 通过select器将规则应用于页面上的多个元素可以提高pipe理效率，并使页面变小。
内联元素只影响其各自的元素。
style标签和内联属性之间的一个重要区别是特异性。 特定性决定一种风格何时超越另一种风格。 一般来说，内联样式具有更高的特异性。
阅读CSS：Specificity Wars，以获得有趣的外观。
我希望有帮助！
以下是可以规定差异的一个方面：
如果您在JavaScript中更改元素的样式，则会影响内联样式。 如果那里已经有一种风格，那么你会永久地覆盖它。 但是，如果样式是在外部工作表或<style>标签中定义的，那么将内联<style>设置为""将从该源恢复样式。
回答你的直接问题：这些都不是首选的方法。 使用一个单独的文件。
内联样式只能用作最后的手段，或者由Javascript代码设置。 内联样式具有最高级别的特异性，因此覆盖您的实际样式表。 这可以使他们难以控制（你应该避免!important也是出于同样的原因）。
build议不要使用embedded的<style>块，因为您失去了浏览器在网站上的多个页面上caching样式表的function。
总之，只要有可能，你应该把你的样式放到一个单独的CSS文件中。
这取决于。
重点是避免重复的代码。
如果相同的代码需要重复使用2次或更多，并且在更改时应该同步，请使用外部样式表。
如果你只使用一次，我认为内联是好的。
从可维护性的angular度来看，pipe理一个文件中的一个项目要比pipe理多个文件中的多个项目要简单得多。
分开您的造型将有助于使您的生活更容易，特别是当工作职责分配给不同的个人。 可重用性和便携性将为您节省大量的时间。
使用内联样式时，将覆盖所有设置的外部属性。
您可以使用三种不同的方式设置CSS，如下所述：
1.External style sheet 2.Internal style sheet 3.Inline style
设置css风格的首选/理想方式是将样式应用于多个页面时用作外部样式表。 使用外部样式表，您可以通过更改一个文件来更改整个网站的外观。
样本用量可以是： –
<head> <link rel="stylesheet" type="text/css" href="your_css_file_name.css"> </head>
如果您想将独特的样式应用于单个文档，则可以使用内部样式表。
不要使用内联样式表，因为它将内容与表示混合在一起，并且失去许多优点。
只要有可能，最好使用class .myclass{}和identifier #myclass{} ，所以在html中使用专用的css文件或标签<style></style> 。 内联样式可以dynamic地改变CSS选项。
select一种方法可能有不同的原因。
- 如果您需要将css指定为以编程方式生成的元素（例如，为不同大小的图像修改css），那么使用内联css可以更易于维护。
- 如果某个css只对当前页面有效，则应该使用脚本标记而不是单独的.css文件。 如果浏览器不需要做太多的http请求，那就好了。
否则，如上所述，最好使用一个单独的css文件。
我同意大多数人的观点，外部样式表是首选的方法。
但是，这里有一些实际例外：
-
dynamic背景图像。 CSS样式表是静态文件，因此您需要使用内联样式来添加dynamic（从数据库，CMS等…）
background-image样式。 -
如果在加载页面时需要隐藏一个元素，那么使用外部样式表是不现实的，因为在处理样式表之前总是会有一些延迟，并且直到发生这种情况才会看到元素。
style="display: none;"是实现这一目标的最佳途径。 -
如果应用程序要让用户精确控制特定的CSS值（例如文本颜色），则可能需要将其添加到内联
style元素或页面<style></style>块中。 例如style="color:#{{ page.color }}"，或者<style> p.themed { color: #{{ page.color }}; }</style><style> p.themed { color: #{{ page.color }}; }</style>
