美文网首页
任务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

    1.样式有几种引入方式? link 和 @import有什么区别? ①css的引入一般有3种,分别为:(1)外部资...

  • 任务5-html2

    样式有几种引入方式?link和@import有什么区别? 三种。1.内部样式。在html文档中加入 ,可以加载在...

  • 任务5-HTML2

    样式有几种引入方式? 外部样式 link(链接)和@import(导入) 内部样式(标签内部) p{color:r...

  • 任务5-HTML2

    1.样式有几种引入方式? link 和 @import 有什么区别? CSS有3种引入方式: 外部样式表在 标签里...

  • 任务5-html2

    问答题 样式有几种引入方式? link和 @import有什么区别? 浏览器缺省设置 外部样式表 内部样式表(在标...

  • 任务5-HTML2

    1.样式有几种引入方式? link和 @import有什么区别 三种方式: 外部样式表 内部样式表 内敛样式表 p...

  • 任务5-HTML2

    1.样式有几种引入方式?link和@import有什么区别 有5种写入样式方式:1.行内式,在html元素标签中使...

  • 任务5-HTML2

    **2016/05/07 问题 样式有几种引入方式? 样式的3种写法外部样式表 内部样式表(位于标签内部) bod...

  • 任务5-HTML2

    一、样式有几种引入方式? link和 @import有什么区别? 1.样式有三种引入方式,分别是 外部样式表 内部...

  • 任务5-HTML2

    问答 1.样式有几种引入方式? link和 @import有什么区别? link是引入外部样式表@import是引...

网友评论

      本文标题: 任务5-HTML2

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