任务5-HTML-2

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

答:引入样式的方法有外部样式、内部样式、内联样式。

  • 外部样式:将样式表写入外部的CSS文件中,优势利于管理所有样式,也是最推荐的一种方法。
    例:<link rel="stylesheet" type="text/css" href="index.css" />
  • 内部样式:将样式写入<head></head>之间,优点是直观修改起来方便,缺点是如果是多个网页不利于代码的维护管理。
    例:<style type="text/css"> body{ color: #000; font-size: x-large; } </style>
  • 内联样式:将样式写入标签内部,最不推荐使用。
    例:<p style="font-size:14px;color:red></p>

link和 @import的区别:

  • link是HTML的一个标签还可以用来定义RSS、REL链接等,import是css的一个标签。
  • link在加载页面前加载好CSS,而import在加载完页面后再加载CSS,且会出现闪现。
  • link支持使用JS控制DOM改变CSS样式,而import不可以。

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

答:

  • ../main.css表示上一级目录文件。
  • ./main.css表示当前目录文件。
  • main.css表示当前目录文件。

console.log是做什么用的?

答:用来调试JS,输出到控制台比alert()方便一些。

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

答:text-align用来设置文本的对齐方式,常用的有4个值:

  • left 向左对齐
  • right 向右对齐
  • center 居中对齐
  • justify 两侧调整对齐

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

答:

  • px表示像素的大小,取决于屏幕像素的大小。
  • em是相对于父元素的大小。
  • rem是相对于HTML根节点的大小根节点默认为16PX。
    区别:px是绝对的。em会继承父元素字体的大小,但是父元素大小不同,会发生一些连锁反应。rem直接继承根节点的大小,可以说是固定的,只有根字体发生变化才会发生变化。

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

答:如图所示


QQ截图20160719132904.png

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

<p>饥人谷</p> 
<style>
 html
{
 font-size: 62.5%;
 }
 p{
 font-size: ?rem;
 }
 h1{
 font-size: 60px;
 }
 </style>```
答:已知浏览器默认大小为16px,设置h1字体为60px
所以rem值为:60/(16*62.5%)=6rem

**本教程版权归饥人谷_浩天和饥人谷所有,转载须说明来源**
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,840评论 1 92
  • 课程目标 掌握样式的几种引入方式能使用Chrome开发工具进行基本页面调试熟悉常见文本样式熟悉单位的使用 课程建议...
    饥人谷_江君阅读 471评论 0 0
  • 一,样式有几种引入方式? link 和 @import有什么区别? 答:在html文件中,css样式一共有三种引入...
    kingBirds阅读 463评论 0 0
  • 1.样式有几种引入方式? link 和 @import有什么区别? ①css的引入一般有3种,分别为:(1)外部资...
    freddy阅读 257评论 0 0
  • 秋叶大叔《如何找到自己的定位》微课,讲了好几天了,这几天我都在抽空看,在听。一小时四十分钟的讲课,直到现在,我还没...
    归旅阅读 303评论 5 6