美文网首页
任务5-HTML2

任务5-HTML2

作者: freddy | 来源:发表于2016-12-01 18:55 被阅读9次

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

    ①css的引入一般有3种,分别为:
    (1)外部资源引入

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

    (2)内部style标签

    <style type="text/css">
    div
    { 
    color: red; font-size:12px; 
    } 
    </style>
    

    (3)内联style属性

    <div style="color:red; font-size:12px;">123</div>
    


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

    差别2:加载顺序的差别。当一个页面被加载的时候(就是被浏览者浏览的时候),link引用的CSS会同时被加载,而@import引用的CSS会等到页面全部被下载完再被加载。

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

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


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

    • ../main.css表示上一级目录下的css文件;
    • ./main.css和main.css表示当前目录下的css文件;
    • /main.css表示磁盘根目录

    3.console.log是做什么用的?

    console 控制台
    log 日志
    意思是在控制台输出日志信息,控制台也叫开发者工具,是浏览器的一部分,便于开发者调试用的。


    4.text-align有几个值,分别有什么作用?为什么text-align:justify没有效果?写截图说明区别。

    描述
    left 把文本排列到左边。默认值:由浏览器决定。
    right 把文本排列到右边。
    center 把文本排列到中间
    justify 实现两端对齐文本效果。
    inherit 规定应该从父元素继承 text-align 属性的值。

    ①text-align的5个值:

    描述
    left 把文本排列到左边。默认值:由浏览器决定。
    right 把文本排列到右边。
    center 把文本排列到中间
    justify 实现两端对齐文本效果。
    inherit 规定应该从父元素继承 text-align 属性的值。
    justify差异

    如图所示,两段颜色为深绿色darkgreen的段落同属于class:"justify",都在css样式里对text-align设置了"justify"即段落两端对齐的属性,但第一个没有占满一行内容的深绿色段落是直接显示左对齐的样式,并没有显示"justify"的效果,因为它没有占满一行内容,只有左边对齐,右边无法和任何内容对齐,但是第二段深绿色的片段占了3行内容,可以看到应用了"justify"参数后它的左右两端都是对齐的。


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

    IE无法调整那些使用px作为单位的字体大小;国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位;Firefox能够调整px和em,rem

    • px像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。

    • em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。em的值并不是固定的;em会继承父级元素的字体大小。所以我们在写CSS的时候,需要注意两点:
      ①body选择器中声明Font-size=62.5%;
      ②将你的原来的px数值除以10,然后换上em作为单位。
      重新计算那些被放大的字体的em数值。避免字体大小的重复声明。

    • rem是CSS3新增的一个相对单位(root em,根em),这个单位引起了广泛关注。这个单位与em有什么区别呢?区别在于使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身,通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。目前,除了IE8及更早版本外,所有浏览器均已支持rem。对于不支持它的浏览器,应对方法也很简单,就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小

    • 选择使用什么字体单位主要由你的项目来决定,如果你的用户群都使用最新版的浏览器,那推荐使用rem,如果要考虑兼容性,那就使用px,或者两者同时使用。

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

    chrome调试

    代码

    代码

    相关文章

      网友评论

          本文标题: 任务5-HTML2

          本文链接:https://www.haomeiwen.com/subject/tnxfmttx.html