WD1X.COM - 问答一下,轻松解决,电脑应用解决专家
主板显卡CPU内存显示器
硬盘维修显卡维修显示器维修
注册表系统命令DOS命令Win8
存储光存储鼠标键盘
内存维修打印机维修
WinXPWin7Win11Linux
硬件综合机箱电源散热器手机数码
主板维修CPU维修键盘鼠标维修
Word教程Excel教程PowerPointWPS
网络工具系统工具图像工具
数据库javascript服务器
PHP教程CSS教程XML教程

@import引用外部css样式表文件用法详解

更新时间:2021-03-09 17:15 作者:刘代码点击:
我们调用外部CSS样式表或将CSS文件导入到html页面中,有两种调用方式:
 
第一种是在页面的<head>和</head>之间使用<link>标签调用:
 
<link href="a.css" rel="stylesheet" type="text/css"/>
 
现在绝大部分的网站都采用这种<link>标签方式,主要原因是@import先加载HTML,后加载CSS;而<link》标签方式是先加载CSS,后加载HTML。
 
第二种使用@import导入外部样式表,而我们今天要讲解的就是第二种方法。
 
@import调用书写格式:
 
比如,我们要调用一个a.css的文件,用@import调用的书写格式可以写成以下五种:
 
@import 'a.css' //Windows IE4/ NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4不识别 
@import "a.css" //Windows IE4/ NS4, Macintosh IE4/NS4不识别 
@import url(a.css) //Windows NS4, Macintosh NS4不识别 
@import url('a.css') //Windows NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4不识别 
@import url("a.css") //Windows NS4, Macintosh NS4不识别
 
以上五种写法,@import url(a.css)兼容浏览器最多,字节最优化,也是最值得推荐的写法;其次,就是@import url("a.css");
 
@import如何调用外部样式表
@import调用外部CSS样式表的方式有两种,分别介绍如下:
 
1、在使用style标签内调用
 
在页面中的<head>和</head>之间,使用在<style>和</style>之内
 
<!doctype html>
<html>
<head>
     <meta charset="utf-8">
     <title>@import调用外部CSS样式表的方式</title>   
     <style>
          @import url(b.css);
          p{color:blue;}   
     </style>
</head>
 
@import必须放在style容器中,而且要放在其他css规则之前,否则它将会不起作用!

2、在CSS文件中直接调用
 
如果我们要在a.css文件中调用b.css文件,只需要直接在a.css文件中使用如下代码:
 
@import url(b.css);
 
@import要放在其他css规则之前,否则它将会不起作用,如下图所示:
@import使用总结:
 
1、@import是用来调用或导入一个外部CSS样式表文件的。
 
2、@import必须放在所有CSS规则之前,否则无效;
 
3、一个文档可以有多条@import调用css文件的语句;
 
3、可以限制调用的样式表应用于某一种或多种媒体:
 
 <style>
    @import url(a.css) all; 
    @import url(b.css) screen;
    p{color:blue;}   
 </style>
 
all:表示可以应用到所有多媒体;
 
screen:表示只应用到有屏幕的多媒体设备;
 
注意事项:
@import调用css样式表是不同于<link>标签调用方式的,<link>标签调用是在加载页面前把css加载完毕,而@import调用则是读取完html页面文件后再加载CSS样式表,所以浏览器打开页面的时候,会出现一开始没有css样式效果,在网速或网页打开慢的情况下,会在一瞬间有闪烁现象,其实就是无样式表的页面,当加载完CSS之后,就会恢复正常!

顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
你可能感兴趣的内容