学习web开发的最大乐趣就是不断的发现自己以前不曾见过的东西,这些东西对于我来说是那么的新鲜有趣。

比如说今天偶尔研究别人的网站,就发现了有趣的东东。

当点开此网页的css时(这个css文件命名方式就有些奇怪,后来才知道文件名里的all是什么意思)

下面就是点开之后所看见的,之后又回到源代码,但是并没有找到其它的css文件,显然下面这些语句已经引用上了所有的css语句。

下面我就对link和@import这种引用方式进行了总结,和在应用方面进行了区分。

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

实际应用截图:


使用link标签截图

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

2、@import语法结构

@import + 空格+ url(CSS文件路径地址);

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


@import在html中使用截图

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


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

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

二、link与@import区别与选择

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

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

css的两种引用方式 link和@import的更多相关文章

  1. css中两种居中方式text-align:center和margin:0 auto 的使用场景

    关于使用text-align:center和margin:0 auto 两种居中方式的比较 前言:最近由于要学习后端,需要提前学习一部分前端知识,补了补css知识,发现狂神在讲这一部分讲的不是特别清楚 ...

  2. class类名在webpack项目中的两种引用方式

    一.问题描述 在项目工程中,我们通常既用到css module,也用到普通的less文件引用方式,代码及webpack配置如下,运行时,发现只有css module起作用,如何让两者都起作用呢? // ...

  3. 测开之路一百零五:bootstrap的两种引用方式

    一:下载到本地引用: 3.3.7版本:https://getbootstrap.com/docs/3.3/getting-started/#download 下载后解压到本地项目中引用 第二种,cdn ...

  4. 引入外部CSS的两种方式及区别

    1.CSS的两种引入方式 通过@import指令引入 @import指令是CSS语言的一部分,使用时把这个指令添加到HTML的一个<style>标签中: 要与外部的CSS文件关联起来,得使 ...

  5. Map的两种遍历方式

    ********************************************************************************* ****************** ...

  6. iconfont_3种引用方式

    IconFont 图标的3种引用方式   新版Iconfont-阿里巴巴矢量图标库支持三种引用方式: 1.unicode引用(原始) unicode是字体在网页端最原始的应用方式,特点是: 兼容性最好 ...

  7. {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性  定位(position)z-index

    前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...

  8. 2016/2/24 1,css有几种引入方式 2,div除了可以声明id来控制,还可以声明什么控制? 3,如何让2个div,并排显示。4,清除浮动 clear:left / right / both

    1,css有几种引入方式 使用HTML标签的STYLE属性 将STYLE属性直接加在单个的HTML元素标签上,控制HTML标签的表现样式.这种引入CSS的方式是分散灵活方便,但缺乏整体性和规划性,不利 ...

  9. mui 顶部选项卡的两种切换方式

    mui 顶部选项卡的两种切换方式 第一种main页面 <!DOCTYPE html> <html> <head> <meta charset="ut ...

随机推荐

  1. javaweb学习总结(二十五)——jsp简单标签开发(一)

    一.简单标签(SimpleTag) 由于传统标签使用三个标签接口来完成不同的功能,显得过于繁琐,不利于标签技术的推广, SUN公司为降低标签技术的学习难度,在JSP 2.0中定义了一个更为简单.便于编 ...

  2. Python之Django【基础篇】

    Python的WEB框架有Django.Tornado.Flask 等多种,Django相较与其他WEB框架其优势为:大而全,框架本身集成了ORM.模型绑定.模板引擎.缓存.Session等诸多功能. ...

  3. php内存缓存

    1.文件方式缓存 哈希子目录缓存 2.APC APC,全称是Alternative PHP Cache,官方翻译叫”可选PHP缓存”.它为我们提供了缓存和优化PHP的中间代码的框架. APC的缓存分两 ...

  4. Windows 10开启默认网络驱动器访问

    在Windows 10的系统策略中,驱动器盘符的网络访问是默认关闭的,用管理员权限打开注册表,找到HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\Curre ...

  5. nginx模块开发篇 (阿里著作)

    背景介绍 nginx历史 使用简介 nginx特点介绍 nginx平台初探(100%) 初探nginx架构(100%) nginx基础概念(100%) connection request 基本数据结 ...

  6. 用户管理 之 在Linux系统中,批量添加用户的操作流程

    一.阅读此文件您需要掌握的基础知识: <Linux 用户(user)和用户组(group)管理概述><用户(user)和用户组(group)配置文件详解><Linux 用 ...

  7. ASP.NET MVC 入门8、ModelState与数据验证

    原帖地址:http://www.cnblogs.com/QLeelulu/archive/2008/10/08/1305962.html ViewData有一个ModelState的属性,这是一个类型 ...

  8. Android Studio 中关于NDK编译及jni header生成的问题

    之前由于工作原因使用grails这个基于groovy的框架做项目,对groovy感觉很好. 基于groovy的gradle构建系统对我而言自然也是好的没得说. Android Studio 正式版出来 ...

  9. 为YAESU FT-817ND 增加频谱功能

    > ft817可谓是QRP神机啊,可能是一开始就接触SDR的缘故,没有频谱显示,总觉得很难受,好在经典的817从不缺乏魔改.终于找到一个解决方案: http://item.taobao.com/ ...

  10. MyEclipse中拷贝J2EE项目,发布到tomcat中名字一样的解决办法

    修改Eclipse工作空间下新拷贝项目下.settings文件夹中org.eclipse.wst.common.component的两个属性值. 为新项目名字: <?xml version=&q ...