学习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. iOS开发---百度地图配置流程,2.6.0 版本 支持64位

      1.首先需要在百度地图下载最新SDK:地址: http://developer.baidu.com/map/index.php?title=iossdk/sdkiosdev-download 2. ...

  2. 理解与模拟一个简单servlet容器

    servlet接口 使用servlet编程需要实现或者继承实现了javax.servlet.Servlet接口的类,其中定义了5个签名方法: public void init(ServletConfi ...

  3. python中xrange和yield的用法

    相信很多人对xrange和yield都不是很清楚,网上很多文章也是写的云里雾里的,今天我用最简单的例子给大家说下. 说起xrange的时候就一定要提range,其实xrange 用法与 range 完 ...

  4. MyBatis 查询

    User.java package com.mycom.mybatis_1.bean; import java.io.Serializable; public class User implement ...

  5. Solr调研总结

    http://wiki.apache.org/solr/ Solr调研总结 开发类型 全文检索相关开发 Solr版本 4.2 文件内容 本文介绍solr的功能使用及相关注意事项;主要包括以下内容:环境 ...

  6. Node初学者入门,一本全面的NodeJS教程(转载)

    分类 JS学习   发布 ourjs  2013-12-02 注意 转载须保留原文链接,译文链接,作者译者等信息.     作者: Manuel Kiessling  翻译: goddyzhao &a ...

  7. java.lang.ClassNotFoundException: org.junit.Assume$AssumptionViolatedException

    java.lang.ClassNotFoundException: org.junit.Assume$AssumptionViolatedException 在spring框架中进行单元测试,出现标题 ...

  8. Java程序员转Android开发必读经验分享

    小编最近几日偷偷的发现部分Java程序员想转安卓开发,故此加紧补充知识,为大家搜集资料,积极整理前人的经验,希望可以给正处于困惑中的你,带来些许的帮助. 啰哩啰嗦的说说Java和Android程序的区 ...

  9. LNMP软件安装所在的目录详细

    LNMP相关软件安装目录Nginx 目录: /usr/local/nginx/MySQL 目录 : /usr/local/mysql/MySQL数据库所在目录:/usr/local/mysql/var ...

  10. 游戏服务器ID生成器组件

    游戏服务器程序中,经常需要生成全局的唯一ID号,这个功能很常用,本文将介绍一种通用ID生成组件.游戏服务器程序中使用此组件的场景有: 创建角色时,为其分配唯一ID 创建物品时,每个物品需要唯一ID 创 ...