编写CSS的不同方法

Sas*_*wat 3 css

通常,CSS可以用3种方式编写

内联CSS

<div style="float:left; border: 1px solid #000;">Hello</div>
Run Code Online (Sandbox Code Playgroud)

HTML头部的内部CSS

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

<div class="div_class">Hello</div>
Run Code Online (Sandbox Code Playgroud)

最后

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

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

<div class="div_class">Hello</div>
Run Code Online (Sandbox Code Playgroud)

所以我的问题是,当我应该使用它们时,任何人都可以向我解释这三种方法和情况的利弊.

biw*_*biw 8

内联CSS:

优点:

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

缺点:

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

Html头部的内部CSS:

优点:

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

缺点:

  • 服务器/浏览器无法缓存文件,从而使较大站点上的负载变大.
  • 如果网站有多个页面,则难以编辑.(如果标题未共享)
  • 无法在其他页面上重用CSS.
  • 难以大规模编辑.

另一个文件中的外部CSS:

优点:

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

缺点:

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

摘要:

由于大多数服务器不会受到额外请求的影响,并且大多数浏览器都可以执行并行请求(加载时间不受影响),因此大多数网站开发人员在另一个文件中使用外部css以便于编辑,并且他们只需要编辑css一次读取整个站点(如果标题未共享).