前端从零初始（1）HTML 与 CSS 的关系

b1gc8v

HTML 与 CSS 的关系

上一章节学习了 HTML 的基本概念，咱们亦晓得了 HTML 到底是什么。那样咱们在前端行业，经常能听到前端的三架马车，HTML，CSS 和 JavaScript。

HTML 组成为了网页的基本结构，那样 CSS 便是给网页其中所有的结构添加样式，让咱们的网页再也不单调，从而变成一个炫酷的网站。

而 JavaScript 则供给了交互功能，让咱们能够在网页中做各样各样的操作，这一小节，咱们来学习一下 HTML 与 CSS 的详细功效和关系。

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 种方式：

经过内联样式来书写样式；经过 style 标签来书写样式；经过 link 标签引入外边 CSS 文件来书写样式。

照片描述

4. 经验分享

倘若页面样式不繁杂，能够采取 style标签来书写样式；HTML 非常多标签有默认样式，有时候咱们能够借助这些标签的默认样式。倘若咱们不必须标签的默认样式，咱们能够先清除所有标签的默认样式；搭建网页，咱们通常先写网页结构，先用 HTML 标签把网页架子搭起来，而后再给 HTML 标签加上 CSS 样式；由于 div 标签是无默认样式的，因此非常多时候咱们爱好运用 div标签，而后自定义样式。

5. 小结

照片描述

网页的基本结构由 HTML 形成， 而 CSS 则能够为 HTML 标签添加样式，让本来平平没奇的 HTML 标签，变得光鲜亮丽起来，你亦能够把它理解为一个打扮师，为干瘪的标签浓妆淡抹。

把握了 HTML 知识，还远远不足，仅有将 HTML 与 CSS 完美结合，才可编写出各式各样的网站。

微X公众号老徐说

本文运用 WPL/s 颁布 @GitHub