课程任务
1.样式有几种引入方式? link 和 @import有什么区别?
答:
- 外部样式表:将css的样式代码写在一个单独的文件里面,一般位于文档的头部并且使用link标签将其引入。
<link rel="stylesheet" type="text/css" href="index.css">
- 嵌入样式表:将css的样式代码直接写在<style>标签里面
<style type="text/css">body{background-color:red}</style>
- 内联样式表:将css的样式代码直接写在要修饰的html的标签里面
<body style="background-color:yellow">
link 和 @import 都作用于外部样式引用,区别在于:
①link更多书写通用样式,提高复用效率。②@import只能加载css,而link除了加载css之外还能定义RSS等。③@import是不支持低版本浏览器,是在css2.1提出的。④link引用外部样式表示后是与页面同时加载,而@import是需要等页面加载完后再加载。⑤link支持使用Javascript控制DOM去改变样式;而@import不支持。
2.文件路径../main.css 、./main.css、main.css有什么区别
答:../main.css是表示上一级目录下面的文件,而./main.css和main.css都是表示当前目录下的文件。
3.console.log是做什么用的?
答:就是把信息展示在控制台上,在开发调试中用得。
4.text-align有几个值,分别有什么作用?
- justfy:两端对齐文本居中的效果
- center:文本居中的效果
- right:靠右对齐
- left:靠左对齐
5.px、em、rem分别是什么?有什么区别?如何使用
- px -像素是一个相对单位。是指显示器屏幕物理设备上最小的点,不是一定的数值。
- em-尺寸也是相对单位,但是相对的浏览器内默认字体尺寸。默认情况下1em=16px;
- rem-是css3新增的相对长度单位,但是它是相对HTML中的根元素。通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。
6.对chrome 审查元素的功能做个简单的截图介绍
7.如下代码,设置 p为几 rem,让h1和p的字体大小相等?
<h1>饥人谷</h1>
<p>饥人谷</p>
<style>
html{ font-size: 62.5%; }
p{ font-size: ?rem; }
h1{ font-size: 60px; }
</style>```
答:由于系统默认是16px,所以根元素字体大小为0.625*16=10px。rem是相对根元素的单位,所以为了使p和H1字体大小相等,60/10=6rem.
***
**本教程版权归饥人谷_鬼脚七和饥人谷所有,转载须说明来源**