任务五-HTML2

1.样式有几种引入方式？ link 和 @import 有什么区别？

样式的写法有五种，其中一种是浏览器的缺省设置也就是默认样式。其他四种引入方式分别为：link（链入外部样式表），@import （导入外部样式表），内置样式表以及内联样式表。

① link（链入外部样式表）

在 部分加入 ，引入外部的 CSS 文件。
链入外部样式表是把样式表保存为一个样式表文件，然后在页面中用 标记链接到这个样式表文件，这个 标记必须放到页面的 区内。
这个例子表示浏览器从 index.css 文件中以文档格式读出定义的样式表，其中 type="text/css" 表示这个信息的类型是 "text/css" 。换句话说，这是一个 CSS 样式表。在 HTML5 中，不再需要这个属性（可选）。rel="stylesheet" 此属性指定了 HTML 文件与所链接的文件之间的关系。我们要链接到一个样式表，这里使用值 "stylesheet"。href="index.css" 是文件所在的位置。
这里需要注意的细节就是 href="./index.css"，"./" 表示当前路径下的 index.css，这是可以不加的，而拓展开来，若是这种情况 href="../index.css" 则就代表为上一级的目录下的文件。

② @import （导入外部样式表）

导入外部样式表是指在内部样式表的

③ 内置样式表

在部分加入，也就是在 中的


这里是标题

我是div

我是子元素em

我是子元素rem

我是子元素px

```
从这个缩略的代码区块我们可以看到我们人为设置的 html 根元素字体大小是 30px，其中 h1 的默认样式是 2em，所以它的值为 2 X 30px=60px，而 div 中的 em 因为 em 会继承父级，而上面有 h1，所以“我是子元素em” 的字体大小 60 X 2=120px。div 中的 rem 只会继承根目录的字体大小，所以“我是子元素rem”的字体大小为 30 X 2=60px，最后一个“我是子元素px”的字体大小为12px。

6.对chrome 审查元素的功能做个简单的截图介绍

chrome 审查元素.jpg

7.如下代码，设置 p 为几 rem，让 h1 和 p 的字体大小相等?

题目.png

答案为6rem。因为浏览器默认为 1em=16px 。而这里 html 设置为 font-size: 62.5%; ，所以 em 的值变为 16*62.5%=10px。所以 p 中 ？=6 即可让 h1 和 p的字体大小相等。

本文版权归本人和饥人谷所有，转载请注明来源