css的两种引用方式 link和@import
学习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的更多相关文章
- css中两种居中方式text-align:center和margin:0 auto 的使用场景
关于使用text-align:center和margin:0 auto 两种居中方式的比较 前言:最近由于要学习后端,需要提前学习一部分前端知识,补了补css知识,发现狂神在讲这一部分讲的不是特别清楚 ...
- class类名在webpack项目中的两种引用方式
一.问题描述 在项目工程中,我们通常既用到css module,也用到普通的less文件引用方式,代码及webpack配置如下,运行时,发现只有css module起作用,如何让两者都起作用呢? // ...
- 测开之路一百零五:bootstrap的两种引用方式
一:下载到本地引用: 3.3.7版本:https://getbootstrap.com/docs/3.3/getting-started/#download 下载后解压到本地项目中引用 第二种,cdn ...
- 引入外部CSS的两种方式及区别
1.CSS的两种引入方式 通过@import指令引入 @import指令是CSS语言的一部分,使用时把这个指令添加到HTML的一个<style>标签中: 要与外部的CSS文件关联起来,得使 ...
- Map的两种遍历方式
********************************************************************************* ****************** ...
- iconfont_3种引用方式
IconFont 图标的3种引用方式 新版Iconfont-阿里巴巴矢量图标库支持三种引用方式: 1.unicode引用(原始) unicode是字体在网页端最原始的应用方式,特点是: 兼容性最好 ...
- {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性 定位(position)z-index
前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...
- 2016/2/24 1,css有几种引入方式 2,div除了可以声明id来控制,还可以声明什么控制? 3,如何让2个div,并排显示。4,清除浮动 clear:left / right / both
1,css有几种引入方式 使用HTML标签的STYLE属性 将STYLE属性直接加在单个的HTML元素标签上,控制HTML标签的表现样式.这种引入CSS的方式是分散灵活方便,但缺乏整体性和规划性,不利 ...
- mui 顶部选项卡的两种切换方式
mui 顶部选项卡的两种切换方式 第一种main页面 <!DOCTYPE html> <html> <head> <meta charset="ut ...
随机推荐
- javaweb学习总结(二十五)——jsp简单标签开发(一)
一.简单标签(SimpleTag) 由于传统标签使用三个标签接口来完成不同的功能,显得过于繁琐,不利于标签技术的推广, SUN公司为降低标签技术的学习难度,在JSP 2.0中定义了一个更为简单.便于编 ...
- Python之Django【基础篇】
Python的WEB框架有Django.Tornado.Flask 等多种,Django相较与其他WEB框架其优势为:大而全,框架本身集成了ORM.模型绑定.模板引擎.缓存.Session等诸多功能. ...
- php内存缓存
1.文件方式缓存 哈希子目录缓存 2.APC APC,全称是Alternative PHP Cache,官方翻译叫”可选PHP缓存”.它为我们提供了缓存和优化PHP的中间代码的框架. APC的缓存分两 ...
- Windows 10开启默认网络驱动器访问
在Windows 10的系统策略中,驱动器盘符的网络访问是默认关闭的,用管理员权限打开注册表,找到HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\Curre ...
- nginx模块开发篇 (阿里著作)
背景介绍 nginx历史 使用简介 nginx特点介绍 nginx平台初探(100%) 初探nginx架构(100%) nginx基础概念(100%) connection request 基本数据结 ...
- 用户管理 之 在Linux系统中,批量添加用户的操作流程
一.阅读此文件您需要掌握的基础知识: <Linux 用户(user)和用户组(group)管理概述><用户(user)和用户组(group)配置文件详解><Linux 用 ...
- ASP.NET MVC 入门8、ModelState与数据验证
原帖地址:http://www.cnblogs.com/QLeelulu/archive/2008/10/08/1305962.html ViewData有一个ModelState的属性,这是一个类型 ...
- Android Studio 中关于NDK编译及jni header生成的问题
之前由于工作原因使用grails这个基于groovy的框架做项目,对groovy感觉很好. 基于groovy的gradle构建系统对我而言自然也是好的没得说. Android Studio 正式版出来 ...
- 为YAESU FT-817ND 增加频谱功能
> ft817可谓是QRP神机啊,可能是一开始就接触SDR的缘故,没有频谱显示,总觉得很难受,好在经典的817从不缺乏魔改.终于找到一个解决方案: http://item.taobao.com/ ...
- MyEclipse中拷贝J2EE项目,发布到tomcat中名字一样的解决办法
修改Eclipse工作空间下新拷贝项目下.settings文件夹中org.eclipse.wst.common.component的两个属性值. 为新项目名字: <?xml version=&q ...