小编给大家分享一下CSS文件如何引入，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！引入css文件的方法：1、行内式方法引入，在标记的style属性中设定CSS样式；2、嵌入式方法引入，将C
小编给大家分享一下CSS文件如何引入，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！
引入css文件的方法：1、行内式方法引入，在标记的style属性中设定CSS样式；2、嵌入式方法引入，将CSS样式集中写在网页的style标签中；3、使用link引用外部CSS文件；4、使用@import引用外部CSS文件。
本文操作环境：windows7系统、HTML5&&css3版、Dell G3电脑。
css文件怎么引入？HTML中引入CSS文件的几种方法
概况来说有以下四种:
1.行内式：也称内联式，在标记的style属性中设定CSS样式。这种方式没有体现出CSS的优势；
2.嵌入式：将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中；
3.链接式：跟第4个的导入式都称外部式或者外联式，使用link引用外部CSS文件；
4.导入式：使用@import引用外部CSS文件；
-----------------------------------------------------A
对于行内式，是刚开始写最容易也最习惯的方式，但这种写法完全体现不出css的优势，如下：
<span style="font-size:14px;"><div id="demo" style="position:absoulte;left: 20px;top:50px;width:300px;height: 50px;border: solid 1px red;padding-left: 20px;color:gray;font-size: 20px;line-height: 50px;text-align: center;">我是行内式写法</div></span>
一个 页面中如果标签很多，这种写法看起来不好并且显得很累赘，重复性太大，是很不建议的！
-----------------------------------------------------B
嵌入式如果页面比较少的情况下，也是挺不错的选择，但如果对应一个项目页面很多，这样无疑有点灾难性，要修改个样式，或许是大篇幅的相似页
面，但都得一个个的去修改，如下：
<span style="font-size:14px;"><style type="text/css"></span>
<span style="font-size:14px;">#demo{
position:absoulte;
left: 20px;
top:50px;
width:300px;
height: 50px;
border: solid 1px red;
padding-left: 20px;
color:gray;
font-size: 20px;
line-height: 50px;
text-align: center;</span>
<span style="font-size:14px;">}
</style></span>这种写法一定程度上避免了页面一种"无样式"现象，页面加载完css才去渲染页面...
-----------------------------------------------------CD
外部式css样式就是把css代码写一个单独的外部文件中，这个css样式文件以“.css”为扩展名，在<head>标签内（不是在<style>标签内）使用<link>标签将css样式文件链接到html文件内，这样最大化的发挥了css出现的优势，当然".css"文件文件的命名要有一定的意义，方便后面的修改或增强其可读性，如"main.css"...
<link href="main.css" rel="stylesheet" style="text/css"/>其中的 rel="stylesheet" type="text/css" 是固定写法不可修改
通过@import引入的格式如下：
<style type="text/css">
@import url(demo.css);
</style>这种方式会在整个页面加载完成时才引入css文件，很明显的问题就是页面的"裸奔"现象，这个当然从交互和体验的角度考虑是绝对不能接受的
以上的两种外部引入方式从直观看语法结构的区别：
<span style="font-size:14px;"><link href="CSS路径" rel="stylesheet" type="text/css" /></span>
<span style="font-size:14px;">@import + 空格+ url(CSS文件路径地址);</span>@import这种方式还应注意下载HTML和CSS文件中的不同，在HTML中需要加上<style type="text/css"></style>，而在css文件中就可以直接@import
来添加路径使用了，这就出现了一个点：对应样式文件较多的项目，我们可以选择先主后次，把主要的样式先渲染出来，一些次要的可以放在css文件
中进行import,这样也可一定程度上缓解服务器的压力，虽然文件不大，但能优化还是好的。本质上这两种外部引入方式并没太多区别，但有时为了项
目中编辑站点的样式方便，较多的使用link的方式。
当然还有一些以XML为编辑要求的引入方式，但不常用....
看完了这篇文章，相信你对“css文件如何引入”有了一定的了解，如果想了解更多相关知识，欢迎关注编程网VUE频道，感谢各位的阅读！
--结束END--
本文标题: css文件如何引入
本文链接: https://www.lsjlt.com/news/66393.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0