编写CSS的不同方法

时间：2014-08-12 05:18:11

标签： css

一般来说，CSS可以用3种方式编写

内联CSS 

<div style="float:left; border: 1px solid #000;">Hello</div>

HTML头部的内部CSS 

<style>
.div_class
{
    float:left; 
    border: 1px solid #000;
}
</style>

<div class="div_class">Hello</div>

最后

另一个外部CSS文件中的外部CSS 

<head>
<link href="//abc.com/css/style.css"/>
</head>

<div class="div_class">Hello</div>

所以我的问题是，当我应该使用它们时，有没有人可以解释这三种方法和情况的利弊。

2 个答案:

答案 0 :(得分：8)

内联CSS：

优点：

  • 服务器不需要加载多个项目。

缺点：

  • 可读性差。
  • 只有当该元素是网站上唯一具有相同属性的元素时才有用。
  • 难以大规模编辑。
  • 无法宣布媒体查询。
  • 无法声明::pseudo选择器
  • 无法在其他网页上重复使用CSS

Html头部的内部CSS：

优点：

  • 服务器不需要加载多个项目。
  • 可读性稍好一些。
  • 可以声明媒体查询。

缺点：

  • 服务器/浏览器无法缓存文件，使较大网站的负载变大。
  • 如果网站有多个页面，则难以编辑。 （如果标题不共享）
  • 无法在其他网页上重复使用CSS。
  • 难以大规模编辑。

另一个文件中的外部CSS：

优点：

  • 可读性最好。
  • 易于大规模编辑。
  • 可以缓存在服务器上。
  • 可以声明媒体查询。

缺点：

  • 服务器必须发出多个请求。

要点：

由于大多数服务器不会受到额外请求的影响，并且大多数浏览器都可以执行并行请求（加载时间不受影响），因此大多数网站开发人员在另一个文件中使用外部css以便于编辑和编辑。事实上，他们只需要编辑一次css来读取整个网站（如果标题没有被共享）。

答案 1 :(得分：0)

对于标题中的外部css与内部css，没有区别 在浏览器如何呈现样式。

但是，外部文件允许您在多个页面中重复使用样式， 以来自客户端的额外http请求为代价（无论如何，缓存都很便宜） 它还允许您快速更改整个站点上的样式，只需更换一个或多个文件，而另外两个方法则需要使用旧样式编辑每个页面/元素到新样式。出于显而易见的原因，应首选外部文件。

如果样式不会被重用于任何其他页面，则内部css可能是合适的，以保存请求。但是，当您的网站扩展时，您可能希望在其他地方使用这些样式，并且由于没有区别，您可能需要考虑使用外部文件而不是内部css。

内联css将覆盖其他CSS样式。因此，它不仅使得html代码更难以阅读，而且还增加了内部css的所有缺点，但除此之外，它还将阻止应用不太具体的样式，这可能是站点可维护性的问题。一般来说，我尝试只在两种情况下使用它：调试，并结合使用javascript。 （虽然即使使用javascript，添加和删除类也更加清晰。）

相关问题
最新问题