Rumah  >  Artikel  >  hujung hadapan web  >  css文件怎么引入

css文件怎么引入

藏色散人
藏色散人asal
2021-06-19 14:37:5919292semak imbas

引入css文件的方法:1、行内式方法引入,在标记的style属性中设定CSS样式;2、嵌入式方法引入,将CSS样式集中写在网页的style标签中;3、使用link引用外部CSS文件;4、使用@import引用外部CSS文件。

css文件怎么引入

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

css文件怎么引入?HTML中引入CSS文件的几种方法

 概况来说有以下四种:

       1.行内式:也称内联式,在标记的style属性中设定CSS样式。这种方式没有体现出CSS的优势;

       2.嵌入式:将CSS样式集中写在网页的93f0f5c25f18dab9d176bd4f6de5d30e9c3bca370b5104690d9ef395f2c5f8d1标签对的c9ccee2e6ea535a969eb3f532ad9fe89531ac245ce3e4fe3d50054a55f265927标签对中;

       3.链接式:跟第4个的导入式都称外部式或者外联式,使用link引用外部CSS文件;

       4.导入式:使用@import引用外部CSS文件;

-----------------------------------------------------A

对于行内式,是刚开始写最容易也最习惯的方式,但这种写法完全体现不出css的优势,如下:

e6ac549ac51adac4e8d615b0cc8c1db681fa6bacf76a14009277e3c891b84925我是行内式写法16b28748ea4df4d9c2150843fecfba6854bdf357c58b8a65c66d7c19c8e4d114

一个 页面中如果标签很多,这种写法看起来不好并且显得很累赘,重复性太大,是很不建议的!

-----------------------------------------------------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”为扩展名,在93f0f5c25f18dab9d176bd4f6de5d30e标签内(不是在c9ccee2e6ea535a969eb3f532ad9fe89标签内)使用2cdf5bf648cf2f33323966d7f58a7f3f标签将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中需要加上9a6c6593cd224a767d2b5172bc71b53a531ac245ce3e4fe3d50054a55f265927,而在css文件中就可以直接@import

来添加路径使用了,这就出现了一个点:对应样式文件较多的项目,我们可以选择先主后次,把主要的样式先渲染出来,一些次要的可以放在css文件

中进行import,这样也可一定程度上缓解服务器的压力,虽然文件不大,但能优化还是好的。本质上这两种外部引入方式并没太多区别,但有时为了项

目中编辑站点的样式方便,较多的使用link的方式。

当然还有一些以XML为编辑要求的引入方式,但不常用....

推荐学习:《css视频教程

Atas ialah kandungan terperinci css文件怎么引入. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya:css怎么设置li不要点Artikel seterusnya:css应该怎么设置超链接样式