css link和@import区别用法

  1. 云栖社区>
  2. 博客>
  3. 正文

css link和@import区别用法

科技探索者 2017-11-09 16:22:00 浏览647
展开阅读全文

1、link语法结构
<link href="CSSurl路径" rel="stylesheet" type="text/css" />

实际应用截图:

link标签使用截图
使用link标签截图

Html link标签说明
此标签是引入CSS文件link标签,只要设置好路径即可。

扩展阅读:html link

2、@import语法结构
@import + 空格+ url(CSS文件路径地址);

1)、在html中
<style type="text/css">
@import url(CSS文件路径地址);
</style>

import在html中使用
@import在html中使用截图

2)、在css中
直接使用
@import url(CSS文件路径地址);

import在css文件中使用
import在CSS代码或CSS文件中使用截图

在css和html中均可以使用@import

二、link与@import区别与选择   -   TOP

首页link和import语法结构不同,前者<link>是html标签,只能放入html源代码中使用,后者可看作为css样式,作用是引入css样式功能。import在html使用时候需要<style type="text/css">标签,同时可以直接“@import url(CSS文件路径地址);”放如css文件或css代码里引入其它css文件。

本质上两者使用选择区别不大,但为了软件中编辑布局网页html代码,一般使用link较多,也推荐使用link。

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/rumen/r431.shtml



html head <link>标签


什么是link标签?
link标签通常放置在一个网页的头部标签head标签内的用于链接外部css文件、链接收藏夹图标(favicon.ico),<link> 标签最常见的用途是链接外部样式表,外部资源。

link常用代码截图
link引人外部CSS与引人ico网站图标截图

link实例

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

链接外部css样式时候link标签的内容结构解释——css引用
href 值为外部资源地址,这里是css的地址
rel 定义当前文档与被链接文档之间的关系,这里是外部css样式表即stylesheet
type 规定被链接文档的 MIME 类,这里是值为text/css

这样就构成了一个完整的link标签

注意link标签因为不像<head></head>、<html></html>是一对的,解释还需一个斜杠的标签,这里link样式是放在<link>内的。

根据W3C标准,需要直接用斜杠一个">"结束,如<link .... ... />构成完整的一个link标签。

使用link引用网页收藏夹图标
收藏夹标签样式如下图


favicon ico图标截图

ICO图标引人代码如下:

<link rel="icon" href="favicon.ico" type="image/x-icon" />

link 标签的内容结构解释
href 值为外部资源地址这里是收藏夹图标地址
rel 定义当前文档与被链接文档之间的关系,这里是外部icon图标属性
type 规定被链接文档的 MIME 类,这里是值为image/x-icon

相关知识:favicon ico制作教程

div+css通过对head标签内link“<link>”标签讲解,希望对大家有帮助。在一个网页中常用就这两种,也许会碰到rel值不同的,大致使用方法相同。

特别说明<link>标签不一定必须放置在<head></head>标签内,可以适当放置在<body>下</body>以上部分,效果相同,但是推荐标准的放置在head标签内。

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/html/h64.shtml

本文转自wiwi博客51CTO博客,原文链接http://blog.51cto.com/wiwili/1968979如需转载请自行联系原作者


wiwili

网友评论

登录后评论
0/500
评论
科技探索者
+ 关注