一、前言
在 HTML 中使用 CSS，包括内联式、内嵌式、链接式和导入式。
二、分类
2.1 内联式
内联式是所有样式应用方式中最为直接的一种，它通过对 HTML 标记使用 style 属性，将 CSS 代码直接写在其中。
|
1
2
3
4
5
6
7
8
9
10
11
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>在HTML中使用CSS之内联式</title> </head> <body> <p style="color: #39f;">在HTML中使用CSS之内联式</p> </body> </html> |
内联式是最简单、直接的 CSS 使用方法，但它的针对性很明显，只能作用于当前标记，造成代码冗余，维护比较困难。
2.2 内嵌式
内嵌式与内联式使用方法不同，它将 CSS 代码写在 <head> 标记之间，并需要采用 <style> 标记进行声明。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>在HTML中使用CSS之内嵌式</title> <style> p{ color: #39f; } </style> </head> <body> <p>在HTML中使用CSS之内嵌式</p> </body> </html> |
使用内嵌式 CSS 用法时 CSS 代码将被集中放在 <head> 标记中，这样方便查找，对后期维护比较方便，页面代码也会减少。但是，如果一个网站有很多页面，如果多个网页的某个标记要使用相同的样式效果，内嵌式也会出现代码冗余和维护困难的问题，所以，内嵌式比较适合个别风格特殊的页面效果设置。
2.3 链接式
在实际的网页设计中，链接式 CSS 用法是最常用的，也是效果最好的。链接式特点是将 CSS 代码单独放在一个或多个 .css 文件中，实现了 CSS 代码和 HTML 代码的分离，这样使前期设计和后期维护都很方便，也有助于实现前台美工设计与后台程序设计人员的合理分工。
链接式 CSS 使用时需要在 <head> 标记中使用 <link> 标记，通过 <link> 标记的相关属性指明外部 CSS 文件的路径，以方便找到其中定义的 CSS 样式并运用在当前网页元素上。
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>在HTML中使用CSS之链接式</title> <link href="bizhongbio.css" type="text/css" rel="stylesheet"> </head> <body> <p>在HTML中使用CSS之链接式</p> </body> </html> |
|
1
2
3
4
5
|
@charset "utf-8"; /* CSS Document */ p{ color: #39f; } |
链接式 CSS 用法的最大特点是将 CSS 代码和 HTML 代码分离，这样就可以实现将一个 CSS 文件链接到不同的 HTML 网页中。使用链接式 CSS，可以在设计整个网站时，将多个页面都会用到的 CSS 样式定义在一个或多个 .css 文件中，然后在需要用到该样式的 HTML 网页中通过 <link> 标记链接这些 .css 文件，通过链接式 CSS 可以降低整个网站的页面代码冗余并提高网站的可维护性。
2.4 导入式
导入式和链接式的用法基本相同，区别在于语法和使用方式上略有不同。导入式通过在 <head> 标记的 <style> 标记中使用 import 方法导入相应的 CSS 文件。被导入的 HTML 文件在初始化时，会将该 CSS 文件导入 HTML 文件中，作为此 HTML 文件的一部分，类似于内嵌式的效果，而链接式是在 HTML 的标记需要 CSS 样式的时候才会以链接的方式引入进来。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>在HTML中使用CSS之导入式</title> <style> <!-- @import url(bizhongbio.css); --> </style> </head> <body> <p>在HTML中使用CSS之导入式</p> </body> </html> |
不只是 HTML 文件的 <style> 标记可以导入 CSS 文件，在 CSS 文件内也可以导入其他的 CSS 文件。例如，可以在 style.css 文件中不写任何 CSS 代码，只写 @import url(bizhongbio.css);，这样所有导入或链接到该 CSS 文件的 HTML 页面都可以使用 bizhongbio.css 中定义的所有样式效果。
三、提醒
如果你网页中使用多种方式，样式之间可能会出现冲突。这时解决 CSS 冲突你就要了解在 HTML 中使用 CSS 的优先级规则：
- 内联式 > 内嵌式 > 外部样式；
- 在多个样式中，后出现的样式的优先级高于先出现的样式；
- 在样式中，选择器的优先级：id 样式 > class 样式 > 标记样式。
为了避免 CSS 冲突，建议你不要混合使用多种，强力推荐使用链接式。
2条评论
有这么多种引入方法呀！好