登录  /  注册
首页 > web前端 > css教程 > 正文

怎样引入外部css样式表

青灯夜游
发布: 2021-07-27 16:11:58
原创
16779人浏览过

引入外部css样式表的方法:1、使用“”语句引入;2、在style标签对中,使用“@import url("css文件路径");”语句引入。

怎样引入外部css样式表

本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

引入外部css样式表的方法

1、使用 标签

标签定义文档与外部资源的关系。 标签最常见的用途是链接外部css样式表。

语法:

<link rel="stylesheet" href="css文件路径" />
登录后复制

2、使用使用 @import 规则

@import 规则允许您将样式表导入另一张样式表中。

语法:

<style type="text/css">
@import url("css文件路径");
</style>
登录后复制

和@import方法的区别

  • link 属于 HTML 标签,而 @import 是 CSS 提供的。

  • 页面被加载时,link 会同时被加载,而 @import 引用的 CSS 会等到页面被加载完再加载。

  • @import 只在 IE 5 以上才能识别,而 link 是 HTML 标签,无兼容问题。

  • link 方式的样式的权重高于 @import 权重。

说明:路径

相对路径(Relative Path)

顾名思义:就是css文件相对某一个参照物的位置。

上物理课的时候老师都会提到相对运动:指某一个物体对另外一个物体的相对于一个固定参照物来是相对运动的。我们走路看汽车的时候觉得汽车往后走,汽车看我们的时候是往前走,那么相对路径也是酱样子的,网页所处目录就是我们的参照物。

像下面这段css代码的引入就是一个相对路径地址style.css文件跟这个网页文件是同处一个目录层级。

<link rel="stylesheet" href="style.css" />
登录后复制

绝对路径(Absolute Path)

既然是绝对的,那就说明这个地址是唯一性,独立性。相对本地来说,刚刚的站点test的绝对地址为F:\test,相对服务器来说,就应该是127.0.0.1/test类似这样的IP地址。

例:

<link rel="stylesheet" href="http://xxx.com/test/css/style.css" />
登录后复制

关于路径引入

要相对路径还是绝对路径引入css文件,个人认为本地预览的时候可以选择相对路径,项目上线的时候改成绝对路径来引入,为什么?有以下几点:

1. 减少索引,绝对地址的唯一性可以确保用户在输入网页的时候,浏览器直接去索引到那个IP地址,直接一刀致命,没有拖沓。而相对路径就要一步步索引目录,这就好比在路上遇见一个心仪的妹纸,我们害羞不敢当面去谈话,于是我们制造了无数的偶遇之后才有胆子上去问联系方式,到最后才发现妹纸早名花有主,早知如此,何必当初呢~

2. 增加外链,对于做SEO的人来说,我们都知道外链能带来不错的权重提高,就算是别人来抓我们的内容,假如它没有改成自己的服务器地址,那说明这个网站的引用地址还是我们的网址,爬虫会通过这个图片引用地址反爬回去,但相对路径引用,因为地址发生变更,因此爬虫爬回去之后找不到相应的文件,因此爬虫的工作也即将停止。

3. 提高排名,假如是你一个干前端的,那么多少都会遇到某一个自己喜欢的动画效果,HTML搞下来了,但是不想要直接把css也下下来,因此会在本地直接调用网络地址。当你预览这个页面的时候不小心点到了引入地址,会跳转到相应的网站css,即使你没有访问其主页,但是你还是访问了他的域名,无意之中还是增加了其访问量。

(学习视频分享:css视频教程

以上就是怎样引入外部css样式表的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
相关标签:
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号