1.样式有几种引入方式? link 和 @import 有什么区别?
CSS有3种引入方式:
- 外部样式表
在<head>标签里面引入外部.css文件:
<link rel="stylesheet" type="text/css" href="css/task5.css">
优势:文件可控制多个页面;易改版、便于维护;减少代码量、代码简洁规范易于分工协作;有效利用缓存机制。
劣势:外部引入中的href属性会给服务器造成请求的压力。
- 内部样式表
在<head>标签中添加<style>标签引入:
<style type="text/css">
body {
color: red;
}
</style>
这种方式的缺点是只对当前页面有效,不便于维护.不过像方式1那样加载外部文件需要时间如果有少量的,只在本页面使用的css时推荐这种方式.
- 内联样式表
直接在该标签上引入:
<p style="color: red;">内联样式表</p>
这种方式只对当前元素有效
link 和 @import的区别:
1. link语法
<link href="CSS地址" rel="stylesheet" type="text/css" />
2. @import语法
- 在html中
<style>
@import url(css文件路径);
</style>
- 在css中
@import url(css文件路径);
区别
<link>是html标签,只能放在html源码中;而后者可以看作css样式,可以放在html中的<style>标签中和在css文件中。而且在一个样式文件中使用@import会为页面总体加载时间增加更多一个返程(也就是增加页面的总体加载时间)。
当一个页面被加载的时候(就是被浏览者浏览的时候),link引用的CSS会同时被加载;
而@import引用的CSS 会等到页面全部被下载完再被加载。
简而言之,推荐用<link>
2.文件路径 ../main.css 、 ./main.css 、 main.css 有什么区别?
../表示当前文件的上级文件夹,./表示当前文件所在的文件夹。
./main.css和main.css都代表当前目录的main.css文件。
../main.css代表上一级目录的mian.css文件。
3.console.log 是做什么用的?
主要是方便你调式javascript用的。你可以看到你在页面中输出的内容。
相比alert他的优点是:
1.alert() 输出的结果是一个模态消息框 (model message box) ,必须有用户干预才能结束,而 console.log() 会直接将结果输出到控制台
2.JavaScript 的基本类型是数值类型,字符串类型,布尔类型, null 和 undefined ,除此之外所有其他类型都是对象.对于简单类型, alert() 和console.log() 都能输出结果.而对于对象类型, alert() 会弹出 [object object] ,且并不能输出对象内部的值, console.log() 却可以做到
拓展阅读:
4.text-align 有几个值,分别有什么用?
主要有 left , right , center , justify这几个值。
left: 行内内容向左侧边对齐
right: 行内内容向右侧边对齐
center: 行内居中
justify: 文字向两侧对齐
拓展阅读:
5.px、em、rem、分别是什么?有什么区别?如何使用?
- px : 像素 (pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
- em : em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。
特点:- em的值并不是固定的;
- em会继承父级元素的字体大小。
注意:任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。
- rem : root em,rem是CSS3新增的一个相对单位。
使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素。通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。
目前,除了IE8及更早版本外,所有浏览器均已支持rem。对于不支持它的浏览器,应对方法也很简单,就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。下面就是一个例子:
p {font-size:14px; font-size:.875rem;}
**注意:** 选择使用什么字体单位主要由你的项目来决定,如果你的用户群都使用最新版的浏览器,那推荐使用rem,如果要考虑兼容性,那就使用px,或者两者同时使用。 对于需要适配各种移动设备,使用rem。