美文网首页
CSS 三种样式的优先级问题

CSS 三种样式的优先级问题

作者: Miltonlong | 来源:发表于2017-12-12 14:59 被阅读28次

CSS 一般有三种使用样式,即行间样式,内嵌样式和外链样式

行间样式 即在 html的标签中书写样式,例如:

<div id="aaa" style="width: 100px;height: 200px;background: yellow;">110</div>

内嵌样式 即在 head 标签里面来书写,控制标签样式,例如:

<style>
    #aaa{
        width: 100px;
        height: 200px;
        background: yellow;
    }
</style>

外链样式 即通过 link 标签来引用,在外部的 css 文件中来控制标签样式,书写方式和内嵌样式的方法一样,但是需要在 head 标签里,style 标签外用 link 标签引用,引用的方式是:

<!--这里的aaa.css是同级目录下-->
<link rel="stylesheet" href="aaa.css">

三种样式已经介绍完,现在说一说优先级的问题。总结起来就是:如果同一属性在多个样式中都有描述,按照行间样式>内嵌样式>外链样式的顺序来执行。

举个列子,同一个 div 标签,如果三种样式都在描述其宽高,以行间样式为准;若行间样式没有描述,内嵌样式与外链样式描述冲突,以内嵌样式为准,以此类推。

相关文章

  • CSS要点记录

    CSS要点记录 CSS 指层叠样式表 (Cascading Style Sheets) 多种样式时的优先级问题 数...

  • CSS样式覆盖

    CSS样式覆盖 1.根据引用方式确定优先级 外部链接写在style标签里内联属性 以上三种方式引入的css,优先级...

  • WEB前端丨css — 选择器、盒子模型

    css: 层叠样式表 css引入方式行内样式 内嵌式 在head标签内部书写style 三种引入方式的优先级: 1...

  • React — css 样式的模块化

    问题描述 当不同组件中的css规则,存在冲突时,高优先级的样式,就会覆盖低优先级的样式,示例如下: 目录结构 样式...

  • CSS样式添加

    三种: 一般来说优先级:内联式>嵌入式>外部式 内联式css样式,直接写在现有的html标签中嵌入式css样式,写...

  • CSS 样式优先级

    CSS样式优先级的问题其实就是当我们“有意或无意”对一个元素设置了多个样式时,页面最终会显示哪个效果的问题。优先级...

  • 【CSS优先级与!important】

    CSS样式优先级: 1、相同权值情况下,CSS样式的优先级总结来说,就是——就近原则(离被设置元素越近优先级别越高...

  • css选择器优先级以及photoshop快捷键

    css选择器优先级 CSS选择器的优先级:作用的元素一样,样式一样,就会有优先级问题,当优先级相同时,一旦发生重...

  • 006 CSS三种引入方式

    CSS三种引入方式 一、三种方式的书写规范 1、行间式 2、内联式 3、外联式 二、三种方式间的"优先级" 与样式...

  • CSS基础(二)

    1 - CSS样式的引入 CSS样式的引入可以采用三种方式: 内联式css样式 嵌入式CSS样式 外部式CSS样式...

网友评论

      本文标题:CSS 三种样式的优先级问题

      本文链接:https://www.haomeiwen.com/subject/ichnixtx.html