CSS的元素样式来源有哪些？案例 -

CSS的元素样式来源有哪些？

当前文档： <style>
当前元素属性： style="..."
外部公共样式： common. css,JQuery.css, layui.css, <link>引用

当前文档

<style> 的运用代码如下

` <style>

          /* 标签：选择器selector */
          /* 选择器 */
          h1 {
              /* 声明： 属性color： 值green*/
              /*声明块：使用大括号，将多个声明包裹起来 */
              color: blue;
              font-weight: 200;
          }
          /*
          1. 声明：由属性和属性值两部分组成
          2. 声明块：由一个或者多个声明，包裹在一个大括号中
          3. 选择器：写在声明块的前一个标识符，用来选择页面中一个或多个元素
          4. 规则集：由选择器和声明块组成
          */
          /* #id选择器 */
          #page-title {
              color: brown;
          }
          /* class类选择器 */
          .title {
              color: cyan;
          }
          /* tag < class < id <style */
      </style>`

当前元素属性

style="...":代码如下

<h1 style="color: gold;">css是什么？</h1>

外部公共样式运用

代码如下：
<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<link rel="stylesheet" href="style1.css" />

<style> @import url("style1.css"); </style>

<title>css的外部样式</title>`
</head>
<body>
<h1 class="title" id="page-title">这是外部公共样式</h1>
</body>
</html>

案例

`<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style1.css
<title>层叠的意义</title>

<style>

  h1 {
    /* 声明: 属性color: 值green*/
    /* 声明块: 使用大括号 将多个声明包裹起来 */
    color: green;
    font-weight: normal;
  }
  /* #id选择器 */
  #page-title {
    color: violet;
  }
  /* class类选择器 */
  .title {
    color: red;
    /* color: red !important; */
  }
  /* tag < class < id < style */
</style>

</head>
<body>


<h1 id="page-title" class="title" style="color: blue">习近平始终心系就业这个最大的民生</h1>
<h1>php.cn</h1>

<!-- 三个选择器,选中了同一个元素,但是呈现的效果却不一致, 原因是这些选择器具有优先级 -->
<script>
  console.log(document.querySelector(".title"));
  console.log(document.querySelector("#page-title"));
  console.log(document.querySelector("h1"));
</script>

</body>
</html>`

CSS的元素样式来源有哪些？ 案例