任务5-HTML2

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

三种方式:

  • 外部样式表
       
    
  • 内部样式表
  
  • 内敛样式表
内敛样式测试

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

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

任务5-HTML2_第1张图片
B9FA36FA-C427-4156-B7AA-0BD91AC2B82B.png

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

饥人谷

饥人谷

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

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

你可能感兴趣的:(任务5-HTML2)