学习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. 通过MSSQL连接服务器连接至Oracle数据库

    前言 有很多时候,我们需要MSSQL与Oracle进行跨库查询或数据交互.本篇随笔将阐述如何通过MSSQL的连接服务器连接至Oracle数据库,并且读取数据的示例. 具体步骤 首先需要到Oracle的 ...

  2. vs2012 MSDN帮助文档离线包下载安装方法

    vs2012安装文件 自带的 MSDN帮助文档不全, 需要自己手动添加需要的离线文档包, 具体方法如下 1. 打开 vs2012 2. 按 ctrl + alt + F1 打开帮助文档管理器 3. 在 ...

  3. 解决12306.cn网站验证码获取提示“基础连接已经关闭: 未能为 SSL/TLS 安全通道建立信任关系“的问题

    https://dynamic.12306.cn/otsweb/passCodeAction.do?rand=sjrand&0.8967564508222368 这是图片的访问网址 大家看清楚 ...

  4. 搞了个基于zookeeper的Leader/Follower切换Demo

    基于zookeeper写了个Leader选举类库demo,场景如下: 上图中的Program1..4可以部署在1台server上,也可以部署在多台server上,也可以是一个进程中的多个线程. 运行效 ...

  5. 【C++沉思录】代理类

    1.考虑下面的场景:设计一个容器,包含一组类型不同但相互关联的对象(比如:Animal,Dog,Cat),对象具备多态行为.2.容器一般只能包含一种类型的对象,使用vector<Animal&g ...

  6. fio terse输出详解

    fio, the flexible IO tester, is a very useful tool for benchmarking IO performance. It has an option ...

  7. ubuntu 12 JDK 编译

    下载openjdk源码 http://jdk7.java.net/source.html 安装Ubuntu上面的依赖包: .参考原书 环境变量配置: .去www.hzbook.com上面将深入理解ja ...

  8. Android杂谈--HTC等手机接收不到UDP广播报文的解决方案

    最近遇到个问题,在android手机上发送UDP报文的时候,HTC等机型(测试用HTC new one)接收不到广播报文,而其他的samsung, huawei, xiaomi, nexus等等均没有 ...

  9. Openvswitch原理与代码分析(5): 内核中的流表flow table操作

      当一个数据包到达网卡的时候,首先要经过内核Openvswitch.ko,流表Flow Table在内核中有一份,通过key查找内核中的flow table,即可以得到action,然后执行acti ...

  10. gitignore for vs

    */**/bin/Debug*/**/bin/Release*/**/obj/Debug*/**/obj/Release*/**/x86/Debug*/**/x86/Release*/**/x64/D ...