一、问答
1.样式有几种引入方式? link 和 @import有什么区别
1.外部样式表
2.内部样式表
3.内联样式表
html代码
<doctype html>
<html>
<meta charset="UTF-8">
<head>
<title>样式表的三种表示</title>
<link rel="stylesheet" style="text/css" href="1.css">
<style style="text/css">
.inner{
color: green;
font-size:1em;
}
</style>
</head>
<body style ="font-size:40px;">
<div>外部样式表</div>
<div class="inner">内部样式表</div>
<div style="color:blue;font-size:0.5em">内联样式表</div>
</body>
</html>
css 代码
div{
color: red;
font-size: 2em;
}
2.文件路径../main.css 、./main.css、main.css有什么区别
../main.css 代表的是当前文件的上层路径下的main.css
./main.css、main.css代表的是当前路径下的main.css
3.console.log是做什么用的
console.log是一个JS函数 可以在控制台console下输出内容
例如
var a=1;
console.log(a)
就会输出 1；
console.log 不同于alert
1.console.log 的提示在控制台 alert在页面中弹出窗体
2.对于对象的解释不同 前者能看到具体的属性 后者弹出的是[object Object]
var obj={
name: "xiaohan",
age: 18
};
console.log(obj);
alert(obj);
Paste_Image.png
4.text-align有几个值，分别有什么作用
text-align 用来设置文本的对齐方式 有4个值 分别代表：
left 左对齐、right 右对齐、center 居中、justify 两端对齐
样例代码
<!doctype html5>
<html>
<meta charset="utf-8">
<body>
<head>
<style type="text/css">
table{
background-color: #ccc;
font-size: 60px;
}
</style>
<title>text-align 的几种值</title>
</head>
<body>
<table border="1" style="width:50%;" >
<tr>
<td style="text-align:left;">左对齐</td>
<tr>
<tr>
<td style="text-align:right">右对齐</td>
</tr>
<tr>
<td style="text-align:center">居中</td>
</tr>
<tr>
<td style="text-align:justify;">两端对齐</td>
</tr>
</table>
</body>
</body>
</html>
5.px、em、rem分别是什么？有什么区别？如何使用
px、em、rem 都是 font-size 的单位 用来表示字体的大小
1.px 是绝对单位 是字体的像素值 font-size: 30px;
2.em 是相对单位 是相对于父亲到字体大小倍数。 父亲上即使没显式的定义字体大小也会有继承的字体大小 默认16px；
3.rem 是相对单位 是相对与 根元素html来说的，如果html没有font-size 属性， 则取默认值16px；
6.对chrome 审查元素的功能做个简单的截图介绍
Paste_Image.png
7.如下代码，设置 p为几 rem，让h1和p的字体大小相等?
根节点的字体大小是16pm*62.5%=10pm， 所以 rem的值为6时h1和p字体大小相等
<h1>饥人谷</h1>
<p>饥人谷</p>
<style>
html{
font-size: 62.5%;
}
p{
font-size: 6rem;
}
h1{
font-size: 60px;
}
</style>
