在HTML中使用CSS

2024年5月7日 163次阅读 来源: Bizhong

一、前言

在 HTML 中使用 CSS，包括内联式、内嵌式、链接式和导入式。

二、分类

2.1 内联式

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>在HTML中使用CSS之内联式</title>
    </head>
    <body>
        <p style="color: #39f;">在HTML中使用CSS之内联式</p>
    </body>
</html>

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

2.2 内嵌式

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

<!DOCTYPE html>
<html>
    <head>
        <meta 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 样式并运用在当前网页元素上。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>在HTML中使用CSS之链接式</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <p>在HTML中使用CSS之链接式</p>
    </body>
</html>
@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 样式的时候才会以链接的方式引入进来。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>在HTML中使用CSS之导入式</title>
        <style>
            <!--
                @import url(style.css);
            -->
        </style>
    </head>
    <body>
        <p>在HTML中使用CSS之导入式</p>
    </body>
</html>

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

三、提醒

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

  • 内联式 > 内嵌式 > 外部样式；

  • 在多个样式中，后出现的样式的优先级高于先出现的样式；

  • 在样式中，选择器的优先级：id 样式 > class 样式 > 标记样式。

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

    原文作者：Bizhong
    原文地址: https://segmentfault.com/a/1190000004656895
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞