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>
所以我的问题是，任何人都可以向我解释这三种方法的优缺点以及我应该在什么情况下使用它们。
最佳答案
内联 CSS:
优点:
- 服务器不需要加载超过一项。
缺点:
- 可读性差。
- 仅当该元素是网站上唯一具有相同属性的元素时才有效。
- 难以大规模编辑。
- 不能声明媒体查询。
- 不能声明
::伪选择器 - 不能在其他页面上重用 CSS
Html 头部部分的内部 CSS:
优点:
- 服务器不需要加载超过一项。
- 可读性要好一些。
- 可以声明媒体查询。
缺点:
- 服务器/浏览器无法缓存文件，导致较大网站的负载较大。
- 如果网站有多个页面，则更难编辑。 (如果标题未共享)
- 不能在其他页面上重复使用 CSS。
- 难以大规模编辑。
另一个文件中的外部 CSS:
优点:
- 可读性最好。
- 易于大规模编辑。
- 可以缓存在服务器上。
- 可以声明媒体查询。
缺点:
- 服务器必须发出多个请求。
总结:
因为大多数服务器不会受到额外请求的影响并且大多数浏览器可以执行并行请求(加载时间不受影响)，大多数网站开发人员在另一个文件中使用外部 css 以便于编辑并且他们只需要编辑一次 css 以读取整个站点(如果标题未共享)。
关于css - 编写css的不同方法，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25256646/