使用CSS的三种方式

1.内联(Inline)方式

内联(Inline)方式,又称为行内方式。往往用于单个元素。

<!DOCTYPE html>
<html lang="en">
  <body>
    <p style="color:red;">This is a paragraph</p>
  </body>
</html>

2.内部(Internal)方式

往往用于单个网页。

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      p {
        color: orange;
      }
    </style>
  </head>
  <body>
    <p>This is a paragraph</p>
  </body>
</html>

3.外部(External)方式

往往用于所有网页。

//目录结构
demo/
  index.html
  mystyle.css
//index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="mystyle.css">
  </head>
  <body>
    <p>This is a paragraph</p>
  </body>
</html>
//mystyle.css
p {
  color: blue;
}

4.优先级

当同时存在多种使用 CSS 的方式时,如果为相同的选择器(元素)定义了相同的 CSS 属性名,则优先级如下:

内联方式优先级最高。

其次,内部方式和外部方式的优先级取决于它们放置在 <head> 元素中的前后顺序,后面的永远覆盖前面的。情形如下:

  • 后面的内部方式优先级 > 前面的内部方式。
  • 后面的内部方式优先级 > 前面的外部方式。
  • 后面的外部方式优先级 > 前面的外部方式。
  • 后面的外部方式优先级 > 前面的内部方式。

最后,浏览器默认的优先级最低。

原创文章,作者:huoxiaoqiang,如若转载,请注明出处:https://www.huoxiaoqiang.com/experience/javascriptexp/31815.html

(0)
huoxiaoqiang的头像huoxiaoqiang
上一篇 2023年8月10日
下一篇 2023年10月11日

相关推荐

  • type=”module”、defer、async属性的区别

    当 <script> 标签无 type=”module” 属性时,defer 和 async 属性都只可以被用在 <script> 元素的外部方式,如果被用在 <script> 元素的内部方式,则会被忽略。 当 <script> 标签有 type=”module” 属性时…

    JavaScript经验 2024年1月25日
    0510
  • npm exec和npx的区别

    从以上两者的使用方式上,我们很容易可以看出,npm exec 命令后面的内容与 npx 命令后面的内容相同,npx 就是 npm exec 的简写,但在解决包方面还是有一些区别的,如下所示: npm exec 可以使用双连字符(–)标志(flag)来抑制作为选项的包的解决,以达到与 npx 一样的功能。 npx

    JavaScript经验 2021年7月24日
    01.4K0
  • 使用ES模块的两种方式

    无论是内部方式还是外部方式,带有 type=”module” 属性的 <script> 标签会告诉浏览器相关代码应该作为模块执行,而不是作为普通的脚本执行。 无论是内部方式还是外部方式,一个 HTML 页面有多少个 type=”module” 属性的 <script> 标签没有限制。 无论是内部…

    JavaScript经验 2024年1月16日
    0310

发表回复

登录后才能评论