业精于勤
而荒于嬉

HTML 与 CSS 的关系


我们在前端领域,经常能听到前端的三架马车,HTML,CSS 和 JavaScript。

HTML 组成了网页的基本结构,那么 CSS 就是给网页当中所有的结构添加样式,让我们的网页不再单调,从而变成一个炫酷的网站。

而 JavaScript 则提供了交互功能,让我们能够在网页中做各种各样的操作。

1. HTML 的作用

HTML 标签构成了网页的基本结构,虽然大部分标签有自带的样式,但是并不能满足我们实际的需求,而且有些标签,我们甚至要取消某些标签的默认样式,所以我们需要 CSS 来优化 HTML 标签的样式。

只有 HTML 标签构成的网页就像是一个清水房,只有一个架子,我们还需要给房子做装修,才能变成一个完整的家。

2. CSS 的作用

CSS 是将样式信息与网页内容分离的一种标记语言,我们使用 CSS 为每个元素定义样式,它主要用于美化HTML页面。

通过设置对应的 CSS 样式属性可以修改 HTML 文档内各元素的显示、位置等样式。如修改颜色、字体、字号、宽高、位置、背景等。

CSS 不仅能取消 HTML 标签的默认样式,还能给 HTML 标签加上我们自定义的样式属性。

CSS 就像我们给清水房做了装修,让一个空架子一下子丰富起来,网页也是如此,我们要编写一个完整炫酷的网页,需要 HTML 搭配 CSS 一起使用。

3. HTML 和 CSS 如何结合(CSS 的引用方式)

我们想要给 HTML 标签书写样式,那么我们需要结合 CSS 一起使用。怎么样在 HTML 文件当中使用 CSS 呢?我们有 3 种方式:

  1. 通过内联样式来书写样式;
  2. 通过 style 标签来书写样式;
  3. 通过 link 标签引入外部 CSS 文件来书写样式。

4. 经验分享

  1. 如果页面样式不复杂,可以采取 style 标签来书写样式;
  2. HTML 很多标签有默认样式,有时候我们可以借助这些标签的默认样式。如果我们不需要标签的默认样式,我们可以先清除所有标签的默认样式;
  3. 搭建网页,我们一般先写网页结构,先用 HTML 标签把网页架子搭起来,然后再给 HTML 标签加上 CSS 样式;
  4. 因为 div 标签是没有默认样式的,所以很多时候我们喜欢使用 div标签,然后自定义样式。

5. 小结


网页的基本结构由 HTML 构成, 而 CSS 则可以为 HTML 标签添加样式,让本来平平无奇的 HTML 标签,变得光鲜亮丽起来,你也可以把它理解为一个化妆师,为干瘪的标签浓妆淡抹。

掌握了 HTML 知识,还远远不够,只有将 HTML 与 CSS完美结合,才能编写出各式各样的网站。

赞(0)
版权声明:本文采用知识共享 署名4.0国际许可协议 [BY-NC-SA] 进行授权
文章名称:《HTML 与 CSS 的关系》
文章链接:https://ithuang.net/html-css.html
本站资源仅供个人学习交流,本人版权所有。欢迎转载,转载请注明作者及来源链接,谢谢。