问答题
样式有几种引入方式? 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>