任务5-html2
2016-07-13 本文已影响0人
饥人谷_kule
问答题
样式有几种引入方式? link和 @import有什么区别?
- 浏览器缺省设置
- 外部样式表
<link rel="stylesheet" type="text/css" herf="./xxx.css">
- 内部样式表（在标签内部）
<style tyle="txt/css">
p {
background-color: bule;
}
</style>
- 内联样式表
<p style="border: 1px solid #fff;">xx</p>
link和@import的区别？
link标签语法：
<link rel="stylesheet" type="txt/css" herf="./xxx.css">```
***
@import语法：
.css中为： @import url(./css)
.html中为：<style>
@import url(./css)
</style>```
两者区别
区别1：link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。
区别2：link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
区别3：link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
区别4：ink支持使用Javascript控制DOM去改变样式；而@import不支持。
文件路径../main.css 、./main.css、main.css有什么区别?
../main.css(上一级目录中的main.css)-相对路径 、./main.css(当前目录中的main.css)－相对路径、
main.css(=./main.css)-相对路径
console.log是做什么用的?
- 调式javascript。你可以看到你在页面中输出的内容。
- 相比alert他的优点是：
- 他能看到结构话的东西，如果是alert，淡出一个对象就是[object object],但是console能看到对象的内容。
- console不会打断你页面的操作，如果用alert弹出来内容，那么页面就死了，但是console输出内容后你页面还可以正常操作。
text-align有几个值，分别有什么作用?
| left | 左对齐 |
|---|---|
| rigth | 右对齐 |
| center | 中间对齐 |
| justify | 两端对齐(没尝试成功) |
px、em、rem分别是什么？有什么区别？如何使用?
- px : 像素 (pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
- em和rem都是相对单位。em是相对于父节点的字号来计算。rem只相对根节点<html>计算，这就是说只要在根节点设定好参考值，那么全篇的1rem都相等，计算方式同em，默认1rem=16px;
- 重要：rem是css3属性，ie678不支持rem属性,需要做兼容处理。
- 如何使用？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
html {
font-size: 30px;
}
</style>
<title>Document</title>
</head>
<body>
<h1>px、em、rem如何使用？
<p style="font-size: 2em;">猜猜我等于多少px{继承父级h1(h1默认为2em)所以我是120px}
</p>
<p style="font-size: 2rem;">猜猜我等于多少px（根元素为30px，所以我是60px）
</p>
<p style="font-size: 16px;">猜猜我等于多少px（16px就是16px）
</p>
</html>
对chrome 审查元素的功能做个简单的截图介绍?
98D30135-3586-4569-8838-FD882030DCC9.jpeg
如下代码，设置 p为几 rem，让h1和p的字体大小相等?
QQ20160713-0.png
