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 ...
随机推荐
- iOS开发---百度地图配置流程,2.6.0 版本 支持64位
1.首先需要在百度地图下载最新SDK:地址: http://developer.baidu.com/map/index.php?title=iossdk/sdkiosdev-download 2. ...
- 理解与模拟一个简单servlet容器
servlet接口 使用servlet编程需要实现或者继承实现了javax.servlet.Servlet接口的类,其中定义了5个签名方法: public void init(ServletConfi ...
- python中xrange和yield的用法
相信很多人对xrange和yield都不是很清楚,网上很多文章也是写的云里雾里的,今天我用最简单的例子给大家说下. 说起xrange的时候就一定要提range,其实xrange 用法与 range 完 ...
- MyBatis 查询
User.java package com.mycom.mybatis_1.bean; import java.io.Serializable; public class User implement ...
- Solr调研总结
http://wiki.apache.org/solr/ Solr调研总结 开发类型 全文检索相关开发 Solr版本 4.2 文件内容 本文介绍solr的功能使用及相关注意事项;主要包括以下内容:环境 ...
- Node初学者入门,一本全面的NodeJS教程(转载)
分类 JS学习 发布 ourjs 2013-12-02 注意 转载须保留原文链接,译文链接,作者译者等信息. 作者: Manuel Kiessling 翻译: goddyzhao &a ...
- java.lang.ClassNotFoundException: org.junit.Assume$AssumptionViolatedException
java.lang.ClassNotFoundException: org.junit.Assume$AssumptionViolatedException 在spring框架中进行单元测试,出现标题 ...
- Java程序员转Android开发必读经验分享
小编最近几日偷偷的发现部分Java程序员想转安卓开发,故此加紧补充知识,为大家搜集资料,积极整理前人的经验,希望可以给正处于困惑中的你,带来些许的帮助. 啰哩啰嗦的说说Java和Android程序的区 ...
- LNMP软件安装所在的目录详细
LNMP相关软件安装目录Nginx 目录: /usr/local/nginx/MySQL 目录 : /usr/local/mysql/MySQL数据库所在目录:/usr/local/mysql/var ...
- 游戏服务器ID生成器组件
游戏服务器程序中,经常需要生成全局的唯一ID号,这个功能很常用,本文将介绍一种通用ID生成组件.游戏服务器程序中使用此组件的场景有: 创建角色时,为其分配唯一ID 创建物品时,每个物品需要唯一ID 创 ...