css中link和import的区别，link css 引用格式

css中link和import的区别？

实质上，这两种方法都也是为了加载CSS文件，但还是存在着细微的差别。

1. 老祖宗的差别。link属于XHTML标签，而@import完全是CSS提供的一种方法。 link标签除了可以加载CSS外，还可以做不少其它的事情，例如定义RSS，定义rel连接属性等，@import就只可以加载CSS了。

2. 加载顺序的差别。当一个页面被加载时（就是被浏览者浏览时），link引用的CSS会同时被加载，而@import引用的CSS会等到页面都被下载完再被加载。故此，有的时候，候浏览@import加载CSS的页面时启动没有样式（就是闪烁），网络速度慢时还挺明显。

3. 兼容性的差别。因为@import是CSS2.1提出的故此，老的浏览器不支持，@import唯有在IE5以上的才可以识别，而link标签无此问题。

4. 使用dom控制样式时的差别。当使用javascript控制dom去改变样式时，只可以使用link标签，因为@import不是dom可以控制的。

@import可在css中再次引入其他样式表，例如可以创建一个主样式表，在主样式表中再引入其他的样式表，如：

main.css

---—-

@import “sub1.css”;

@import “sub2.css”;

sub1.css

---—-

p {color:red;}

sub2.css

---—-

.myclass {color:blue}

这样更利于更改和扩展。

总体就这几种差别了，其它的都一样，从上面的分析来看，还是为了让用link标签很好。标准网页制作加载CSS文件时，还应该选定要加载的媒体（media），例如screen，print，或者都all等。

提示：这样做有一个缺点，会对官方网站服务器出现过多的HTTP请求，之前是一个文件，而目前反而两个或更多文件了，服务器的压力增大，浏览量大的官方网站还是谨严使用。有兴趣的可以观察一下像新浪等官方网站的首页或栏目首页代码，他们总会把css或js直接写在html里，而不需要外部文件。

css引用的两种方法，link和@import的区别？

网页中引用外部CSS文件有两种方法：link和@import，两者引用的方法在页面上的展现效果差不多的。link引用方法请看下方具体内容：

link href="styles.css" type="text/css" /

@import引用方法请看下方具体内容：

style type="text/css"@import url("styles.css");/style

差别1 ：适用范围不一样@import可在网页页面中使用，也可在css文件中使用，用来将多个css文件引入到一个css文件中；而link只可以将css文件引入到网页页面中。差别2： 功能范围不一样link属于XHTML标签，而@import是CSS提供的一种方法，link标签除了可以加载CSS外，还可以定义RSS，定义rel连接属性等，@import就只可以加载CSS。

差别3： 加载顺序不一样当一个页面被加载时，link引用的CSS会同时被加载，而@import引用的CSS会等到页面都被下载完再被加载。故此，有的时候，候浏览@import加载CSS的页面时启动没有样式（就是闪烁），网络速度慢时还挺明显。

差别4： 兼容性因为@import是css2.1提出的，故此，老的浏览器不支持，@import唯有在IE5以上的才可以识别，而link标签无此问题。

差别5： 控制样式时的差别使用link方法可以让用户切换CSS样式.现代浏览器如Firefox,Opera,Safari都支持rel=”alternate stylesheet”属性(就可以在浏览器上选择不一样的风格),当然你还可以使用Javascript让IE也支持用户更改替换样式。

HTML代码中src和href什么意思？

src用于替换现目前元素，href用于在现目前文档和引用资源当中确立联系。src是source的缩写，指向外部资源的位置，指向的主要内容将会嵌入到文档中现目前标签所在位置；在请求src资源时会故将他指向的资源下载并应用到文档内，比如js脚本，img图片和frame等元素。script src =js.js/script当浏览器剖析解读到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行结束，图片和框架等元素也如此，类似于将所指向资源嵌入现目前标签内。这也是为什么将js脚本放在底部而不是头部。

href是Hypertext Reference的缩写，指向互联网资源所在位置，建立和现目前元素（锚点）或现目前文档（链接）当中的链接，假设我们在文档中添加link href=common.css rel=stylesheet/既然如此那，浏览器会识别该文档为css文件，就可以并行下载资源还不会停止对现目前文档的处理。这也是为什么建议使用link方法来加载css，而不是为了让用@import方法。

css的四种引用的方法？

css有四种引入方法：1、使用“link href=css文件地点位置”引入css样式；2、使用“@importcss文件地点位置”引入css样式；3、在style标签里写css样式；4、在元素标签里使用style属性写css样式。

（1）链接式 ： 在网页的head/head标签对中使用link标记来引入外部样式表文件，使用html规则引入外部css (用得非常多) :

（2）导入式 ： 将一个独立的.css文件引入HTML文件中，导入式使用CSS规则引入外部CSS文件。

（3）内联css文件，直接在header 里面写css。

（4） 直接在标签里面写样式

什么是FOUC？如何不要FOUC？

假设使用import方式对CSS进行导入,可能会造成某些页面在Windows 下的Internet Explorer产生一部分奇怪的情况:以无样式显示页面内容的瞬间闪烁,这样的情况称之为文档样式短暂失效(Flash of Unstyled Content),简称为FOUC.因素总体为： 1，使用import方式导入样式表。

2，将样式表放在页面底部 3，有哪些样式表，放在html结构的不一样位置。实际上原理很了解：当样式表晚于 结构性html 加载，当加载到此样式表时，页面将停止以前的渲染。此样式表被下载和剖析解读后，将重新渲染页面，也就产生了短暂 的 花屏情况。处理方式：使用LINK标签将样式表放在文档HEAD中更多

elementui如何独自引用infinite scroll？

您好，可在 element-ui 的官方网站找到 infinite scroll 组件的文档，然后根据以下步骤独自引用：

1. 在页面中引入 element-ui 的样式文件：

```html

link rel=stylesheet href=https://unpkg.com/element-ui/lib/theme-chalk/index.css

```

2. 在页面中引入 element-ui 的脚本篇文章件和 Vue.js：

```html

script src=https://unpkg.com/vue/script

script src=https://unpkg.com/element-ui/lib/index.js/script

```

3. 独自引用 infinite scroll 组件：

```html

script src=https://unpkg.com/element-ui/lib/theme-chalk/base.css/script

script src=https://unpkg.com/element-ui/lib/theme-chalk/infinite-scroll.css/script

script src=https://unpkg.com/element-ui/lib/infinite-scroll.js/script

```

4. 在 Vue 组件中使用：

```html

template

div

ul v-infinite-scroll=loadMore infinite-scroll-distance=10

li v-for=item in items{{ item }}/li

/ul

/div

/template

script

export default {

data() {

return {

items: [],

page: 1,

};

},

methods: {

loadMore() {

// 加载更多数据

},

},

};

/script

```

注意：假设你使用的是 webpack 等构建工具，则可以使用 import 或 require 引入组件。

西藏专升本备考资料及辅导课程