样式有几种引入方式? 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 审查元素的功能做个简单的截图介绍
答:如图所示
如下设置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
**本教程版权归饥人谷_浩天和饥人谷所有,转载须说明来源**