任务5-HTML2

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

1.样式有三种引入方式，分别是

• 外部样式表<link rel="stylesheet" type="text/css" href="index.css">
• 内部样式表（位于标签内部）
  <style type="text/css">
     p{color:red;}
  </style>
• 内联样式（在HTML元素内部）
  <p style="color:red;font-size:15px;">这是一个段落</p>

2.link和 @import有的区别：

• link属于HTML标签，@import是css提供的一种引入方式；
• 加载顺序不同，link引入的css在页面被加载时会同时加载，而@import需要等到页面都加载完全后才加载，因此网速慢的时候容易看到没有css样式的页面；
• link引入的css兼容性更好，@import是在CSS2.1提出的，低版本的浏览器不支持；

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

• ../main.css指的是上一级目录下的文件；
• ./main.css;main.css;/main.css都是指当前目录下面的文件；

三、console.log是做什么用的？

• 调试JavaScript用的。类似于alert，不过不会弹出弹窗打断操作。

四、text-align有几个值，分别有什么作用？写截图说明区别

1.text-align是设置文本得对其方式的，常用的值有4个；

• text-align:left是文本左对齐；
• text-align:center是文本居中；
• text-align:right是文本右对齐；
• text-align:justify是文本左右两端对齐；

2.截图说明：

演示代码 对应文本效果

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

1.px像素是相对于显示器分辨屏幕而言的。可以设置多少像素大小来适应网页制作的需要，一般用作PC端固定布局。
2.em是根据父元素字体大小的属性来计算的，如果设置父元素的字体大小为16px；子元素字体大小为font-size:1.5em，那么该子元素字体换算成像素就是24px。
3.rem是css3新增的一个相对单位。rem得大小是根据HTML根元素大小来设定的。计算方法跟em类似，而且后两种单位表达方式多用于移动端布局。

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

审查元素功能

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

Paste_Image.png

• 浏览器默认的字体大小为16px，那么HTML的字体大小应该为16px×62.5%=10px；
• rem的大小是根据HTML跟元素字体大小来设定的，因此p{font-size:6rem};

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