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

三种方式：

外部样式表

   <link rel="stylesheet" type="text/css" href="less/all.css" />

内部样式表

  <style type="text/css">
      body{
          color: #000;
          font-size: x-large;
      }
  </style>

内敛样式表

<div style="font-size: 16px;text-align: center;">
      内敛样式测试 
  </div>

ps:推荐使用第一种方式，css好维护一些，总体利大于弊

link和 @import区别

link是XHTML标签，除了加载CSS外，还可以定义RSS、rel链接等其其它方面；@import属于CSS范畴，只能加载CSS。
link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载，有可能出现闪的情况。
link是XHTML标签，没有兼容性问题而@import是在CSS2.1提出的，低版本的浏览器不支持。
link支持使用Javascript控制DOM去改变样式而@import不支持这么做。
ps：@import最优写法为(兼容浏览器最多)

      @import url(style.css) 
      @import url("style.css") //从字节优化的角度来看更佳

2.文件路径../main.css 、./main.css、main.css有什么区别

../main.css 表示父目录路径
./main.css 表示当前路径
main.css 表示当前路径，也表示当前路径文件

3.console.log是做什么用的

js调试信息输出到控制台
可以输出js对象结构化的信息
不会阻断js程序运行

4.text-align有几个值，分别有什么作用

有5个值，分别为：

left （默认值）实现元素中的文本左对齐
center 实现元素中的文本居中对齐
right 实现元素中的文本右对齐
justify 实现元素中的文本两端对齐
inherit 从父元素继承 text-align 属性的值

5.px、em、rem分别是什么？有什么区别？如何使用

px、em、rem分别是
px像素是一种相对长度单位，相对于显示器分辨率
em也是一种相对长度单位，是相对于其父元素来设置字体大小
rem也是一种相对单位长度，相对于根元素<html>的单位
区别&使用
px为单位是比较方便，而且一致又稳定和精确，但是是固定的。但存在当用户在浏览器中浏览我们开发的网页时，他重新设置了浏览器的字体大小时，会使我们的网页布局被打乱，从而影响到布局。
em是相对于其父元素来设置字体大小的，灵活方便，但也存在一个麻烦的问题，进行任何元素设置，都有可能需要了解他父元素的大小，当我们多次使用时，就会存在潜在的错误风险。
rem借鉴两者的优点，既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的潜在风险

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

B9FA36FA-C427-4156-B7AA-0BD91AC2B82B.png

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

<h1>饥人谷</h1>
<p>饥人谷</p>
<style>
    html{
        font-size: 62.5%;
    }
    p{
        font-size: ?rem;
    }
    h1{
        font-size: 60px;
    }
</style>

由于浏览器默认字体大小是16px，h1的字体大小是60px，根据rem的计算规则可得知 p的rem值＝60/(16*62.5%)=6。

** 本教程版权归作者和饥人谷所有，转载须说明来源！ **

任务5-HTML2