在HTML中使用CSS

一、前言

在 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
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞