HTML引入CSS样式三种方法及优先级

HTML引入CSS样式三种方法及优先级

HTML引入CSS样式的方式主要有三种：内联定义、链入内部CSS和链入外部CSS。不同位置的样式表影响的范围各不相同。

内联定义，直接在对象的标记内使用style属性设定样式，格式如下所示：

通过这种方式引用的样式仅影响当前HTML元素。

链入内部CSS，通过在HTML文档中使用标签引用CSS文件。示例代码如下：

链接外部CSS时，将CSS文件放置在网页外部，通过链接将其应用到网页中，类似于C语言中的.h文件。外部CSS文件的引用格式如下：

外部CSS文件的引用属性包括type、rel和href，其中type固定为text/css，rel固定为stylesheet，href指向CSS文件的路径。

三种引用方式的范围及优先级依次为：链接外部CSS、链接内部CSS、内联定义。内联定义的优先级最高，其次为内部CSS，最低为外部CSS。

以示例代码说明优先级。在外部CSS文件中定义div1背景色为红色，内部CSS中定义为黑色，内联定义为绿色。结果显示，内联定义的样式优先级最高，显示为绿色。去除内联定义后，比较内部CSS与外部CSS的优先级，内部CSS的优先级高于外部CSS。

总结，内联定义的样式优先级最高，内部CSS次之，外部CSS的优先级最低。

我是胖虎，一个正在创业的前端工程师，如果你同样迷茫不知道前端该如何学习，可以加入我的自学团，会有知识分享，匹配学习伙伴，还可以参加我组织的上线项目及活动。2024-10-02