在HTML中使用CSS

2014.11.06 08:00 bizhongbio 1206 2

一、前言

在 HTML 中使用 CSS,包括内联式内嵌式链接式导入式

二、分类

2.1 内联式

内联式是所有样式应用方式中最为直接的一种,它通过对 HTML 标记使用 style 属性,将 CSS 代码直接写在其中。

内联式是最简单、直接的 CSS 使用方法,但它的针对性很明显,只能作用于当前标记,造成代码冗余,维护比较困难。

2.2 内嵌式

内嵌式与内联式使用方法不同,它将 CSS 代码写在 <head> 标记之间,并需要采用 <style> 标记进行声明。

使用内嵌式 CSS 用法时 CSS 代码将被集中放在 <head> 标记中,这样方便查找,对后期维护比较方便,页面代码也会减少。但是,如果一个网站有很多页面,如果多个网页的某个标记要使用相同的样式效果,内嵌式也会出现代码冗余和维护困难的问题,所以,内嵌式比较适合个别风格特殊的页面效果设置。

2.3 链接式

在实际的网页设计中,链接式 CSS 用法是最常用的,也是效果最好的。链接式特点是将 CSS 代码单独放在一个或多个 .css 文件中,实现了 CSS 代码和 HTML 代码的分离,这样使前期设计和后期维护都很方便,也有助于实现前台美工设计与后台程序设计人员的合理分工。

链接式 CSS 使用时需要在 <head> 标记中使用 <link> 标记,通过 <link> 标记的相关属性指明外部 CSS 文件的路径,以方便找到其中定义的 CSS 样式并运用在当前网页元素上。

链接式 CSS 用法的最大特点是将 CSS 代码和 HTML 代码分离,这样就可以实现将一个 CSS 文件链接到不同的 HTML 网页中。使用链接式 CSS,可以在设计整个网站时,将多个页面都会用到的 CSS 样式定义在一个或多个 .css 文件中,然后在需要用到该样式的 HTML 网页中通过 <link> 标记链接这些 .css 文件,通过链接式 CSS 可以降低整个网站的页面代码冗余并提高网站的可维护性。

2.4 导入式

导入式和链接式的用法基本相同,区别在于语法和使用方式上略有不同。导入式通过在 <head> 标记的 <style> 标记中使用 import 方法导入相应的 CSS 文件。被导入的 HTML 文件在初始化时,会将该 CSS 文件导入 HTML 文件中,作为此 HTML 文件的一部分,类似于内嵌式的效果,而链接式是在 HTML 的标记需要 CSS 样式的时候才会以链接的方式引入进来。

不只是 HTML 文件的 <style> 标记可以导入 CSS 文件,在 CSS 文件内也可以导入其他的 CSS 文件。例如,可以在 style.css 文件中不写任何 CSS 代码,只写 @import url(bizhongbio.css);,这样所有导入或链接到该 CSS 文件的 HTML 页面都可以使用 bizhongbio.css 中定义的所有样式效果。

三、提醒

如果你网页中使用多种方式,样式之间可能会出现冲突。这时解决 CSS 冲突你就要了解在 HTML 中使用 CSS 的优先级规则:

  • 内联式 > 内嵌式 > 外部样式;
  • 在多个样式中,后出现的样式的优先级高于先出现的样式;
  • 在样式中,选择器的优先级:id 样式 > class 样式 > 标记样式。

为了避免 CSS 冲突,建议你不要混合使用多种,强力推荐使用链接式。

感谢你的阅读,本文版权归 双鱼bizhongbio 所有,转载时请注明出处。
注明出处格式:双鱼bizhongbio(https://bizhongbio.github.io/article/html-use-css/

这一刻,一只鱼已经游到下游了

下一篇:

分享到

相关文章

2条评论

  1. 主要看气质 2015.12.10 16:51

    有这么多种引入方法呀!好

发表评论