在 CSS 中编写样式的不同方式以及推荐写法

在本文中，我想分享编写 CSS 的不同方式并讨论最佳实践。

引入了层叠样式表 (CSS) 来自定义样式并构建 HTML 的布局。

有 3 种不同的方式来编写 HTML 元素的样式。

1. 内联样式
2. 内部样式
3. 外部样式

内联样式

内联样式通过使用style属性写入 HTML 标记内。每个属性都用分号分隔;。

css内联样式写法示范

内部样式

内部样式总是用不同的选择器写在同一个 HTML 页面中。内部样式在<style></style>标签之间，总是首选将style标签放在head标签中。

css内部样式写法示范

外部样式

这是在实际项目中设置 HTML 元素样式的最首选和最常用的方式。这里我们需要将样式写在一个单独的 CSS 文件中，并且需要将 CSS 文件包含在head标签中，使用<link>.

创建一个名为styles.css的文件并将其包含在您的 HTML 文件中，如下所示：

rel="stylesheet"是链接标签的强制属性，否则您的外部样式将不起作用。

css写法推荐

一般选择外部样式表原因如下：

1. 使样式与html分离。
2. 一份css样式可应用于多处html内容。
3. 写代码时，重复的样式代码只需要写一份，减少了工作量。
4. 写出来的代码文件更简洁(便于其它人阅读)，且文件大小也比较小。
5. 代码文件传输时，能够节省网络流量和带宽。(因为文件更小，且重复的css样式会被存储在缓存中)
6. 代码文件渲染时，能够减少渲染时间。(因为文件更小)
7. 后期维护时，能减少维护时的工作量。因为只要修改css样式表文件，就能够改变很多网页，甚至改变整个站点的风格特色。避免了一个个网页去修改。