[分享]css内部样式控制外部样式

CSS内部样式是指在HTML文档中通过标签内定义的CSS样式。而外部样式是指将CSS样式定义在外部文件中，通过标签引入的样式。如何在内部样式中控制外部样式呢？/ 外部样式表文件 styles.css ...

CSS内部样式是指在HTML文档中通过<style>标签内定义的CSS样式。而外部样式是指将CSS样式定义在外部文件中，通过<link>标签引入的样式。如何在内部样式中控制外部样式呢？

/* 外部样式表文件 styles.css */
h1 {
    font-size: 24px;
}

/* 内部样式 */
<style>
    h1 {
        color: red;
    }
</style>

/* HTML文件 */
<link rel="stylesheet" href="styles.css">
<h1>Hello World!</h1> 

上面代码中，我们在外部样式中定义了h1标签的字体大小，为24像素。在内部样式中，我们又定义了h1标签的颜色为红色。在HTML文件中，我们先引入外部样式表文件，然后使用h1标签并填写内容。现在我们来看一下页面上的效果：

Hello World!

结果发现，虽然我们在外部样式表中定义了h1标签的字体大小为24px，但是直接在h1标签的内部样式中定义了颜色为红色，导致最终页面上展示的文字颜色是红色。这就是CSS内部样式控制外部样式的例子。在内部样式中定义的CSS样式，会覆盖外部样式的样式定义。