知识问答部分

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

样式表文件放在哪里都可以但是一般放在head中.一些属性什么样式都不写，即采用默认样式。样式的引入方式一共三种：外部引入，内嵌，内联。内部与外部样式表均是放在头部，写在<style type="text/css"></style>中的

1、外部样式表有两种<link rel="stylesheet" type="text/css" href="">和@import url(文件名)

其中，href资源定位符，@import url(.css)也可引入外部样式

二者的区别是：首先二者在引用的时候不一样link是放在sty;e中，而@import是放在head中不放在style，@import优先级最高，但一般不建议使用。

一是link是比css加载的范围要多，link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性等，@import就只能加载CSS了。

二是页面加载顺序不同，link引入css时，页面载入时同时加载，@import需要再页面完全加载后再加载

三是link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。

四是link是DOM节点支持使用Javascript控制DOM去改变样式；@import是css样式不支持JS控制操作。

2、内部样式表，一般放在头部，再需要用到的地方引用即可

样式为<style type="text/css">

div{border:1px solid red;} </style>如果不进行下其他设置，凡是div都会加载上述样式，加个边框

3.内联样式表

直接在需要用css的地方加上 style="样式"即可，比如<div style="border:1px solid red;">加个边框为红色</div>

4、js内部引入方式

console.log(1);

</script>

5、js外部引入方式

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

./文件名当前目录下的文件（当前目录下的文件也可直接写文件名，不用./）

../文件名上级目录下的文件名

三、console.log是做什么用的

调试的时候将js信息展示到开发台上

四、text-align有几个值，分别有什么作用

text-align:文本居中，有三个属性 left(靠左)，center（居中），right（靠右），justify（两端对齐文本效果）

代码设置如下：

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

chorme浏览器展示的字体大小最小是12px,低于12px的是以12显示的、

em是相对单位，相对父元素，如果父元素未设置大小，再往上；

px是像素单位，独立的数值，跟父元素没有关系；

rem是相对于html的根节点，即是html的设置，相对于html设置。

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

1、element是html，可以右键页面上的内容，会再在element上选中，修改。对于页面展示的时候可以用来测试边界条件或者修改样式（由于在element上编辑之后,页面也会进行相应设置）

2、与element同在一行的右边，有一个省略，里面可以调整代码窗口与页面窗口的样式

3、console是用来调试js的，双击报错的地方，可以直接找到问题代码。sources也是用来调试js的，可以加断点

4、network调试ajax时候用的到，http网络请求

reaource资源包括文字图片等，用的最多的时候local storage（可以用来存储东西） cookies

七、设置p的字体大小为 em,让h1和p的大小一样

<style>

html{font-size:62.5%;}

p{font-size:?rem;}

h1{font-size:60px;}

</style>

为了方便em与px相互转换，em的初始值为1em=16px；

font-size: 62.5%;}时，1em则=16px*62.5%=10px。

html未设置时，基准是16px,

题即为h1{font-size:60px; }为60px,p{font-size:?rem;即?*10=60,rem设置为6即可

任务五

任务五