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。

时间: 2024-12-26 01:12:43

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

DAY44-前端入门-css的三种引用方式以及优先级、样式与长度颜色、常用样式、css选择器

目录 一.css的三种引用方式 行间式 内联式 外联式 二.三种引入的优先级 三.样式与长度颜色 基本样式 长度 颜色 四.常用样式 字体样式 文本样式 背景样式 五.css选择器 基础选择器 基础选择器优先级 组合选择器 组合选择器优先级 属性选择器 一.css的三种引用方式 行间式 1.在标签头部的style 2.属性值是css语法 3.属性值用Key:value形式赋值,value具有单位 4.属性值之间用;隔开 <div style='width:100px;height=100px;b

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

一:下载到本地引用: 3.3.7版本:https://getbootstrap.com/docs/3.3/getting-started/#download 下载后解压到本地项目中引用 第二种,cdn标签引用:https://www.bootcdn.cn/twitter-bootstrap/ 为了稳定,找3.3.7版本,min.css,复制标签:<link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap

css三种引用方式

1 直接在标签内添加 style属性 1 <body> 2 <!-- 内嵌写在标签内 --> 3 <div style="color: red;font-size: 20px">山无陵,天地合</div> 4 </body> 运行效果: 2 写在标签<head>中,内部样式 1 <html lang="en"> 2 <head> 3 <meta charset=&q

引入CSS方式link和@import的有何区别

外部引用CSS中 link与@import的区别 这两天刚写完XHTML加载CSS的几种方式,其中外部引用CSS分为两种方式link和@import. 本质上,这两种方式都是为了加载CSS文件,但还是存在着细微的差别. 差别1:老祖宗的差别 link属于XHTML标签,而@import完全是CSS提供的一种方式. link标签除了可以加载CSS外,还可以做很多其它的事情,比如定义RSS,定义rel连接属性等,@import就只能加载CSS了. 差别2:加载顺序的差别 当一个页面被加载的时候(就是

2016/2/24 1,css有几种引入方式 2,div除了可以声明id来控制,还可以声明什么控制? 3,如何让2个div,并排显示。

1,css有几种引入方式 使用HTML标签的STYLE属性 将STYLE属性直接加在单个的HTML元素标签上,控制HTML标签的表现样式.这种引入CSS的方式是分散灵活方便,但缺乏整体性和规划性,不利于后期的修改和维护,当需要修改网站的样式时,一个相同的修改可能涉及多个地方,维护成本高.使用STYLE属性的样式效果最强,会覆盖掉其它几种引入方式的相同样式效果.   将样式代码写在页面<STYLE>...</STYLE>标签之中 <STYLE>...</STYLE&

自制Javascript分页插件,支持AJAX加载和URL带参跳转两种初始化方式,可用于同一页面的多个分页和不同页面的调用

闲话部分 最近闲着实在无聊,就做了点小东西练练手,由于原来一直在用AspNetPager进行分页,而且也进行了深度的定制与原有系统整合的也不错,不过毕竟是用别人的,想着看自己能试着做出来不能,后台的分页插件已经有比较成熟的了,那就自己试着写一个前台分页吧. 话不多说,先上效果图: 优点与缺点 来说说优缺点吧,首先AspNetPager是后台分页控件,所以在向客户端回传HTML文档之前生成HTML阶段 就会把分页代码生成完毕,然后回传,而JS是前端代码,就是HTML文档在服务器组织完毕往客户端传送

JS的三种使用方式/CSS的三种使用方式/JS中的DOM事件模型/JS中匿名函数的书写及调用/媒体查询@media的三种使用方式

一.JS的三种使用方式 1.html标签中内嵌JS(不提倡使用.)                <button onclick="javascript:alert('你真点啊.')" > 有本事点我呀!!!!</button>                                2.HTML页面中直接使用JS:                <script type="text/javascript">        

PlaceHolder的两种实现方式

placeholder属性是HTML5 中为input添加的.在input上提供一个占位符,文字形式展示输入字段预期值的提示信息(hint),该字段会在输入为空时显示. 如 1 <input type="text" name="loginName" placeholder="邮箱/手机号/QQ号"> 目前浏览器的支持情况 浏览器 IE6/7/8/9 IE10+ Firefox Chrome Safari  是否支持 NO YES YE

CSS的4种引入方式及优先级

第一:CSS的4种引入方式 CSS的4种引入方式是:行内样式.内嵌样式.链接样式.导入样式 1.行内样式 最直接最简单的一种,直接对HTML标签使用style="",例如: <p style="color:#F00; "></p> 缺点:HTML页面不纯净,文件体积大,不利于蜘蛛爬行,后期维护不方便. 2.内嵌样式 内嵌样式就是将CSS代码写在<head></head>之间,并且用<style></s