当前位置: 首页 > Web前端 > HTML

Web前端学习教程,详解4种引入CSS的方式

时间:2023-04-03 01:17:16 HTML

我们在编写HTML文件的时候,为了丰富网页的内容和属性,不可避免地要引入CSS来达到我们的目的。CSS是一种用于表达HTML文件样式的计算机语言。它只能静态修改网页,也可以用各种脚本语言动态格式化网页元素。导入CSS有4种方式,其中2种是直接在HTML文件中添加CSS代码,另2种是导入外部CSS文件。下面我们一起学习4种介绍CSS的方法,了解过的朋友也可以温故知新。1.内联模式内联样式只在某个元素中使用style属性。它只针对某个元素,不影响整个文件,因此可以控制某个HTML元素的外观,适合代码调试。不推荐使用。例子:

这种写法通常不好,它只能改变当前标签的样式,如果你想让多个
有相同的样式,你不得不为每个
重复添加相同的样式,如果要修改一个样式,就得修改所有样式中的代码。显然,内联CSS代码会使HTML代码冗长,并使页面难以维护。2、嵌入方式嵌入方式是指在HTML头部的嵌入的CSS只对当前网页有效。因为CSS代码在HTML文件中,使得代码更加集中,这在我们写模板页面的时候往往是有好处的。因为看模板代码的人一眼就能看出HTML结构和CSS样式。因为内嵌的CSS只对当前页面有效,当多个页面需要引入相同的CSS代码时,这样写会导致代码冗余,不利于维护。链接方式链接方式是指在HTMLhead中使用标签3.导入外部CSS文件示例:这是导入CSS最常用和推荐的方式。这样,所有的CSS代码只存在于一个CSS文件中,具有很好的可维护性。并且所有的CSS代码只存在于CSS文件中,第一次加载时会导入CSS文件,以后切换页面时只需要加载HTML文件即可。导入方法导入方法是指使用CSS规则导入外部CSS文件。例子:4、导入链接的方法是链接外部样式表,就是把样式表保存为样式表文件,然后用导入外部css文件。这种方法可以说是现在占主导地位的引入方法。比如IE和浏览器。这也是最能体现CSS特性的方法;在DIV+CSS中最能体现内容与显示分离的思想,也是最容易修改维护,代码看起来最漂亮的。与导入式不同的是,链接式是使用HTML规则引入外部CSS文件,它是利用网页标签中的标签引入外部样式表文件。(就是方法看起来不一样,一个用style,一个用link)以上是CSS介绍的4种方式。事实上,在编写CSS样式时,我们大多使用link标签来链接样式。这种方法用得最多,是我们重点把握的对象。动力节点老杜教授的css教程,也重点讲解了链接的引入,从而引入了CSS。您可以观看视频并了解它。CSS视频教程https://www.bilibili.com/video...CSS资料下载http://www.bjpowernode.com/?s...