在本文中,我想分享编写 CSS 的不同方式并讨论最佳实践。
引入了层叠样式表 (CSS) 来自定义样式并构建 HTML 的布局。
有 3 种不同的方式来编写 HTML 元素的样式。
- 内联样式
- 内部样式
- 外部样式
内联样式
内联样式通过使用style
属性写入 HTML 标记内。每个属性都用分号分隔;
。

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

css内部样式写法示范
外部样式
这是在实际项目中设置 HTML 元素样式的最首选和最常用的方式。这里我们需要将样式写在一个单独的 CSS 文件中,并且需要将 CSS 文件包含在head标签中,使用<link>
.
创建一个名为styles.css的文件并将其包含在您的 HTML 文件中,如下所示:
rel="stylesheet"
是链接标签的强制属性,否则您的外部样式将不起作用。
css写法推荐
一般选择外部样式表原因如下:
- 使样式与html分离。
- 一份css样式可应用于多处html内容。
- 写代码时,重复的样式代码只需要写一份,减少了工作量。
- 写出来的代码文件更简洁(便于其它人阅读),且文件大小也比较小。
- 代码文件传输时,能够节省网络流量和带宽。(因为文件更小,且重复的css样式会被存储在缓存中)
- 代码文件渲染时,能够减少渲染时间。(因为文件更小)
- 后期维护时,能减少维护时的工作量。因为只要修改css样式表文件,就能够改变很多网页,甚至改变整个站点的风格特色。避免了一个个网页去修改。