[分享]css内部样式表有哪些

发布于 2024-11-11 15:25:56

在 CSS 中，我们可以使用三种方式来定义样式：内联样式、内部样式表和外部样式表。本篇文章将介绍内部样式表。内部样式表是指将 CSS 样式写在 HTML 文件的 head 标签内部，使用 style ...

在 CSS 中，我们可以使用三种方式来定义样式：内联样式、内部样式表和外部样式表。本篇文章将介绍内部样式表。

内部样式表是指将 CSS 样式写在 HTML 文件的 head 标签内部，使用 style 标签包裹。

  <head>
            <style>
                body {
                    background-color: #f2f2f2;
                }
                h1 {
                    color: red;
                }
            </style>
        </head>

在这种方式下，为不同的元素设置不同的样式非常方便，只需要像上面一样针对元素写样式即可。

除此之外，还可以使用类选择器、id 选择器等方法来选中 HTML 元素进行样式设置。

  <head>
            <style>
                .content {
                    background-color: #f2f2f2;
                }
                #title {
                    color: red;
                }
            </style>
        </head>
        <body>
            <div class="content">
                <h1 id="title">这是标题</h1>
                <p>这是内容...</p>
            </div>
        </body>

通过上面的代码，可以看到将类名和 id 名添加到 HTML 元素后面，然后在样式表中分别使用 .content 和 #title 来选择元素进行样式设置。

总体来说，内部样式表在需要为单个页面设置样式时比较方便，但如果需要在多个页面中共享同一套样式，建议使用外部样式表。

css 教程