首頁 > web前端 > html教學 > CSS的@import的用法_html/css_WEB-ITnose

CSS的@import的用法_html/css_WEB-ITnose

WBOY
發布: 2016-06-21 09:10:21
原創
1706 人瀏覽過

CSS的@import的用法:

@import在很多页面都有应用,不过使用的频率还是比link标签要少的多,所以可能还有很多布局者对此不是太熟悉,下面就简单介绍一下它的用法。它是用来引入外部样式表的一种方式,格式有以下两种:

@import "style.css";@import url("style.css");
登入後複製

@import既可以为页面引入外部样式表,也可以在一个样式表中引入另一个样式表,代码实例如下:

实例一:

<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部落</title> <style type="text/css">@import "mytest/div+css/mytest.css";</style> </head> <body> <div id="mytest">蚂蚁部落</div> </body> </html>
登入後複製

以上代码通过@import为网页引入了外部样式表,将字体颜色设置为红色。

实例二:

@import也可以在一个样式文件中引入其他样式文件,比如一个网站的代码量比较大,CSS样式表文件也比较庞大,就可以使用此方法把不同功能模块的样式代码放入各自样式表中,然后再通过@import引入到一个主样式表中。

@charset "utf-8";/* CSS Document */@import url("one.css");@import url("two.css");@import url("three.css");
登入後複製

注意:不过最好不要使用@import,因为使用它加载的样式文件会等到页面都加载完成再被加载,这样可能会导致页面浏览出现问题,建议使用标签替代,可以参阅CSS的link和@import的区别一章节。

原文地址是:http://www.51texiao.cn/div_cssjiaocheng/2015/0503/585.html

 最为原始地址是:http://www.softwhy.com/ 


相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板