HTML_002_CSS元素样式来源 -

css元素样式来源：

当前文档: <style>
当前元素的属性: style="..."
外部公共样式: common.css jQuery.css layui.css <link>引入

CSS元素样式来源

<!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="static/css/style1.css" />
    <title>Document</title>
  </head>
  <body>
    <img
      src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=4113007248,1487639643&fm=26&gp=0.jpg"
      alt=""
    />
    <h1 class="title">满江红</h1>
    <h1 id="content-one" class="content">怒发冲冠，凭栏处、潇潇雨歇。</h1>
    <h1 class="content">抬望眼、仰天长啸，壮怀激烈。</h1>
    <h1 id="content-one" class="content" style="color: darkcyan">
      三十功名尘与土，八千里路云和月。
    </h1>
    <h1 id="content-one" class="content-four">莫等闲、白了少年头，空悲切。</h1>
    <h1>靖康耻，犹未雪。</h1>
    <h1>臣子恨，何时灭。</h1>
    <h1>驾长车，踏破贺兰山缺。</h1>
    <h1>壮志饥餐胡虏肉，笑谈渴饮匈奴血。</h1>
  </body>
</html>

/* 标签：选择器selector */
/* 选择器  */
h1 {
  /* 声明：属性color: 值green */
  /* 声明块：使用大括号 将多个声明包裹起来 */
  color: green;
  font-weight: lighter;
  font-size: 20px;
  text-align: center;
}
/*
      声明：由属性和属性值两部分组成
      声明块：由一个或多个声明，包裹在一对大括号中
      选择器：写在声明块前面的一个标识符，用来选择页面中一个或多个元素
      规则集：选择器和声明块组成
      */
/* #id选择器*/
#content-one {
  color: violet;
  font-size: 20px;
}
/* class类选择器 */
.title {
  color: red; /*!important 使其优先级变道最大*/
  font-weight: bolder;
  font-size: 26px;
  text-align: center;
}
.content {
  color: tomato;
  font-size: 20px;
}
.content-four {
  color: darkslateblue !important;
}