css文件怎么引入

藏色散人
Freigeben: 2023-01-06 11:17:51
Original
19257 Leute haben es durchsucht

引入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样式集中写在网页的

标签对的 标签对中;

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

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

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

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

我是行内式写法

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

-----------------------------------------------------B

嵌入式如果页面比较少的情况下,也是挺不错的选择,但如果对应一个项目页面很多,这样无疑有点灾难性,要修改个样式,或许是大篇幅的相似页

面,但都得一个个的去修改,如下:

Nach dem Login kopieren

这种写法一定程度上避免了页面一种"无样式"现象,页面加载完css才去渲染页面...

-----------------------------------------------------CD

外部式css样式就是把css代码写一个单独的外部文件中,这个css样式文件以“.css”为扩展名,在标签内(不是在

Nach dem Login kopieren

这种方式会在整个页面加载完成时才引入css文件,很明显的问题就是页面的"裸奔"现象,这个当然从交互和体验的角度考虑是绝对不能接受的

以上的两种外部引入方式从直观看语法结构的区别:


@import + 空格+ url(CSS文件路径地址);
Nach dem Login kopieren

@import这种方式还应注意下载HTML和CSS文件中的不同,在HTML中需要加上,而在css文件中就可以直接@import

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

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

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

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

推荐学习:《css视频教程

Das obige ist der detaillierte Inhalt voncss文件怎么引入. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
css
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!