样式有几种引入方式? link和 @import有什么区别?
样式引入方式:
//外部样式表
<head>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
//内部样式表
<style type="text/css">
p{
color:red;
}
</style>
//内联样式
<p style="color:red;">测试</p>
两种都是外部引用CSS的方式,差别在:
1.link是XHTML标签,除了引用CSS外还可以定义rel链接属性等,而@import是CSS提供的一种方式,只能引用CSS。
2.link引用CSS时,会在页面载入同时加载,而@import则会在页面完全载入完毕再加载。
3.link是CSS2.1提出的,老版本的浏览器会有兼容问题。
4.当用JavaScript改变DOM样式时,只有link支持。
文件路径../main.css、./main.css、main.css有什么区别?
../main.css:在目录上一级寻找main.css。
./main.css,main.css:在当前目录下寻找main.css。
console.log是做什么用的?
console.log主要是用来调试JavaScript用的。可以看到对象中的内容,并且不会弹出窗口打断操作。
text-align有几个值,分别有什么作用?
text-align:left;//文本左对齐
text-align:right;//文本右对齐
text-align:center;//文本居中
text-align:justify;//文本两端对齐
text-align:inherit;//从父元素继承文本属性的值
px、em、rem分别是什么?有什么区别?如何使用?
px:固定大小像素;
em:相对于父元素的像素大小,如果父元素没有设置则逐级向上查找;
rem:相对于根节点<html>
的像素大小。
对chrome 审查元素的功能做个简单的截图介绍
如下代码,设置 p为几 rem,让h1和p的字体大小相等?
<h1>饥人谷</h1>
<p>饥人谷</p>
<style>
html{
font-size: 62.5%;
}
p{
font-size: 6rem;
}
h1{
font-size: 60px;
}
</style>
浏览器的默认字体大小为16px,而根节点<html>
的font-size
设置为62.5%,所以<html>
字体大小为10px,所以应设为6rem。