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

微信扫一扫,分享到朋友圈

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

在本文中,我想分享编写 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样式表文件,就能够改变很多网页,甚至改变整个站点的风格特色。避免了一个个网页去修改。
一个热爱互联网的咸鱼
上一篇

网站案例:怎样做一个能赚钱的网站?

下一篇

网站案例:一个靠人工精选的内容网站,他是如何吸粉并赚钱的

你也可能喜欢

发表评论

您的电子邮件地址不会被公开。 必填项已用 * 标注

提示:点击验证后方可评论!

插入图片

热门

    抱歉,30天内未发布文章!
返回顶部