HTML2

2016-06-23 本文已影响96人婷楼沐熙

一.样式有几种引入方式? link和 @import有什么区别?

<link rel="stylesheet" type="text/css" href="./index.css" >

@import url("xxx")
使用@import要记住始终要把@import放在样式代码的最前面，否则可能不会起作用。@import可以和link嵌套使用，比如说有两个样式：index.css和index2.css，index.css通过link插入到页面中，然后index.css中通过@import规则来引入index2.css；@import也可以和link并行使用。下面举个并行使用的例子：

<link rel="stylesheet" type="text/css" href="./index.css" >
<style>
@import url("css/index2.css");
</style>

<style>
p<
color: white;
font-size: 20px;
>
</style>

<p style="border: 1px solid #fff; border-radius:4px; "
>
段落
</p>

四种引入方式

当然这些引入方式各有各的特点，各有各的优势和使用的场景。比如说link比较适用于大量共有的样式，这样就能提高代码的复用性，而在style里面引入就能减少网络的请求。所以可以根据情况选用恰当的引入方式。

link和@import的区别主要有：
从根本上来说link属于html标签，而@import则属于css提供的一种方式，IE5不支持。link除了调用css外还可以声明页面链接属性和目录等等，而@import
就只能调用css。
link和@import的机制也是不同的。link是在加载页面前把css加载完毕，而@import则是读取完文件后再加载。
如果使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。

一般来说不建议使用@import。

“..”表示的是上层目录，而“.”表示的是当前目录。所以“../main.css”表示的是当前文件所在的上层目录的main.css样式文件，而“./main.css”和“main.css”当前目录的main.css文件。

console.log一般用于代码调试的时候，可以把信息（数字和字符串都可以）展示在控制台，便于调试。相比于alert会方便很多，因为alert每次调试都会弹出来，而且无法显示字符串，不便于调试。