CSS:一个HTML形影不离的闺蜜

书接上文,上回书咱们讲到了 HTML 的基本结构,了解到在 HTML 的基本结构里面,有着 HTML 声明、元素和元素的属性这些内容。算是完成了咱们和 HTML 这妹子的第一次吧!虽然简单了点,可是简单不好吗?!

接下来,咱们来了解一下 HTML 这妹子的闺蜜 CSS。什么?为啥还要了解闺蜜?兄弟,看来你是没谈过恋爱啊~ 自己品吧!

CSS 是谁

CSS 人家的全名叫 Cascading Style Sheets,整了俩外国妞儿,不对,是外国妹子,刺激吧?!中文名叫层叠样式表。CSS 算是 HTML 这妹子的专业化妆师了,她主要的作用就是让 HTML 看起来更漂亮。

比如咱们随便写点 HTML 内容:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS在HTML中的作用</title>
</head>

<body>
    <h1>有CSS和没有CSS的区别是什么呢</h1>
</body>

</html>

在没有 CSS 的默认情况下,就是浏览器提供的样式,像这个样子:

在这里插入图片描述

如果咱们通过 CSS 这妹子给 HTML 的 <h1> 元素化个妆的话,比如给字体设置个颜色什么的:

h1 {
        color: lightcoral;
        font-weight: 400;
}

那再重新运行这个 HTML 文档,就会变成这个样子啦:

在这里插入图片描述

浏览器的默认样式

在没有 CSS 这妹子在 HTML 身边的话,HTML 在浏览器里面运行的样式就是浏览器自身提供的样式。说到这儿,就有个问题啦!在不同的浏览器中运行同一个 HTML 显示的样式会不会不一样呢?咱们就来试一试吧!

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML的默认样式</title>
</head>

<body>
  <h1>HTML运行在浏览器中的默认样式</h1>
</body>

</html>

咱们就将这样的一个 HTML 分别在 Chrome、Firefox 和 Safari 浏览器中运行,来看看结果如何:

在这里插入图片描述

结果很直观,三个浏览器显示的效果都不尽相同。这可是个大问题啊!这就说明咱们编写一个 HTML,用户使用不同的浏览器运行显示的效果是不一致的。

这个原因其实很简单,就是不同浏览器产品提供的默认样式不相同而已。想要解决这个问题也不难,就是咱们得通过 CSS 进行设置,让 HTML 运行的时候是使用咱们设置的 CSS 样式,不是浏览器默认提供的样式就行了。

CSS 的前世今生

知道了对于 HTML 来说 CSS 是有多重要之后,咱们也来了解一下 CSS 的成长背景吧。

CSS 这妹子是在 1994 年哈坤·利提出了 CSS 的最初建议。伯特·波斯(Bert Bos) 当时正在设计一个叫做“Argo”的浏览器,他们决定一起合作设计 CSS。也就是说,CSS 这妹子可是个 90 后哦!

然后,哈坤于 1994 年在芝加哥的一次会议上第一次展示了 CSS 的建议,1995 年他与波斯一起再次展示这个建议。当时 W3C 组织刚刚创建,W3C 对 CSS 的发展很感兴趣,它为此组织了一次讨论会。哈坤、波斯和其他一些人(比如微软的托马斯·雷尔登)是这个项目的主要技术负责人。1996 年底,CSS 已经完成。1996 年 12 月 CSS 要求的第一版本被出版。

1997 年初,W3C 内部组织了专门管理 CSS 的工作组,其负责人是克里斯·里雷。这个工作组开始讨论第一版中没有涉及到的问题,其结果是 1998 年 5 月出版的第二版要求。

CSS 的版本迭代

每个人的成长都有值得纪念的日子,CSS 这妹子也一样。从 CSS出生到现在,一共有 3 次是比较值得纪念的。也就是说,CSS 到目前为止经历了 3 个版本:

  • CSS1 —— 作为一项 W3C 推荐,CSS1 发布于 1996 年 12 月 17 日。1999 年 1 月 11 日,此推荐被重新修订。
  • CSS2 —— 作为一项 W3C 推荐,CSS2 发布于 1999 年 1 月 11 日。CSS2 添加了对媒介(打印机和听觉设备)和可下载字体的支持。
  • CSS3 —— CSS3 计划将 CSS 划分为更小的模块。于 1999 年开始制订,2001 年 5 月 23 日 W3C 完成了 CSS3 的工作草案。

到了 CSS3 这个版本的时候,CSS 和 HTML 的关系几乎是一个人了,已经亲密到了不能再亲密的程度了。

猜你喜欢

转载自blog.csdn.net/kingj_fullstack/article/details/107524439