使用CSS的三种方式

1.外部(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;
}

2.内部(Internal)方式

往往用于单个网页。

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

3.内联(Inline)方式

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

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

4.优先级

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

内联方式优先级最高。

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

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

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

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

(0)
huoxiaoqianghuoxiaoqiang
上一篇 2023年10月9日
下一篇 2023年10月10日

相关推荐

  • nodejs -v与node -v的区别

    笔者在使用Node.js的时候发现有nodejs -v和node -v两个命令,经过一番测试后,总结如下: 如果从Ubuntu操作系统官方源里面安装的Node.js,命令用nodejs -v,例如: 如果从Ubuntu操作系统以外的第三方源(包括snap)安装的Node.js,命令用node -v,例如:

    JavaScript经验 2020年9月12日
    03.7K0
  • HTML文件路径

    绝对路径 描述 <img src=”https://www.example.com/picture.jpg”> 在 https://www.example.com/ 绝对路径下 相对路径 描述 <img src=”picture.jpg”> 在包含<img>元素的 HTML 文件的所在目录下 <…

    JavaScript经验 2023年10月11日
    0230
  • npm exec和npx的区别

    从以上两者使用方式上,我们很容易可以看出,npm exec 命令后面的内容与 npx 命令后面的内容一致,npx 就是 npm exec 的简写,但在解析顺序方面还是有一些区别的,如下所示: npm exec 可以使用双连字符(–)标志(flag)来抑制 npm 应该发送到执行命令的开关(switch)和选项(opt…

    JavaScript经验 2021年7月24日
    01.3K0

发表回复

登录后才能评论