笔记大全

html中css代码可以放在哪里

更新时间：2023-10-20

HTML页面有多个方式可以指定样式表，而在指定样式表成功后，就可以在其中放置 CSS 样式了。CSS 样式可以包括各种 css 属性集合，例如字体样式、背景样式等。下面将介绍CSS代码可以放置的几个位置。

外部样式表就是当 CSS 样式需要被多个 HTML 页面应用时，将所有的样式单独写在一个 CSS 文件中，并通过HTML的 link 元素引入到 HTML 页面中。通过这种方法可以减少重复的代码、更加通用、且方便维护。

    <link rel="stylesheet" type="text/css" href="style.css">

内部样式表是将样式表嵌入到页面的 head 元素中，可以只作用于当前页面的标签。通过这种方式，可以给特定的 HTML 页面添加特定的样式。

    <head>
        <style type="text/css">
            body {
                font-size: 14px;
            }
        </style>
    </head>

行内样式是将样式直接作用到 HTML 标签的 style 属性中。例如：

    <p style="background-color: red;">这是个红色的段落。</p>

虽然修改起来方便，但行内样式不便于维护，且会增加 HTML 页面的大小。在一些特殊情况下使用即可。

在一些场景中，我们需要暂时调整页面的某个样式看看效果。这种情况下使用测试样式非常方便。例如：

    <p style="background-color: gray!important;">这是个灰色的段落。</p>

在这种情况下，使用 !important 修饰符在样式覆盖的时候优先级会较高。