任务5-HTML2

样式有几种引入方式?

• 外部样式 link(链接)和@import（导入）
  
• 内部样式（标签内部）
  p{color:red;}
• 内联样式（html元素内部）
  

  这里文字是红色。

---

link 和 @import有什么区别

本质上，这两种方式都是为了加载CSS文件，但还是存在着细微的差别。

1. link属于XHTML标签，而@import完全是CSS提供的一种方式。 link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性等，@import就只能加载CSS了。

2. 加载顺序的差别。当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁），网速慢的时候还挺明显。

3. 兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。

4. 使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。

@import可以在css中再次引入其他样式表，比如可以创建一个主样式表，在主样式表中再引入其他的样式表

---

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

1. ../main.css 表示选择上层目录的main.css

2. ./main.css 表示选择了当前目录的main.css

3. main.css和./main.css相同

---

console.log是做什么用的

主要是方便你调式javascript用的。你可以看到你在页面中输出的内容。

相比alert他的优点是：

他能看到结构话的东西，如果是alert，弹出一个对象就是[object object],但是console能看到对象的内容。

console不会打断你页面的操作，如果用alert弹出来内容，那么页面就死了，但是console输出内容后你页面还可以正常操作。

console里面的内容非常丰富，你可以在控制台输入：console，然后就可看到：

Console {memory: MemoryInfo, debug: function, error: function, info: function, log: function…}

它有网页的各种提示。

---

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

text-align的值有四个：

1. left : 左对齐
2. right: 右对齐
3. center: 水平居中
4. justfy: 两边对齐

---

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

px单位

px（像素），国内网站相对来说用得比较多，任意浏览器的默认字体高都是16px。

em单位

em才是真正的“相对单位”，它不是一个具体的数值，而是相对于父元素的属性计算出来的大小，一般移动终端布局用em比较合适。

rem单位

rem单位是CSS3中新增的一个相对单位，只不过它要比em单位强大一些，因为它是集相对大小和绝对大小的 优点于一身，也就是说它除了有px，pt 的绝对大小属性外，还具备了em的相对大小属性。为什么呢？因为rem这个单位是相对于根元素HTML的。而如果我们想修改大小，只需修改根元素HMTL 的大小就可以了。除了IE8及更早的版本个，目前所有的主流浏览器均支持此属性。

---

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

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

答案：6em

一般62.5%是10px。了解到这样做的目的是为了响应式的考虑

 
饥人谷
 
饥人谷


 

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

google调试.jpg

代码

设置body的字体为微软雅黑，字号16px， 行高1.5倍，字体颜色 #333

设置段落颜色#000, 首行缩进两个字体宽度，1.5倍行高

  
  


  
text