CSS基础1：元素样式来源，选择器，权重

CSS基础1

1.CSS是什么

Cascading Style Sheets（CSS）既层叠样式表。
主要功能：1. 设置元素样式（翻译：长什么样子） 2.元素布局（翻译：在哪里显示）。

2.元素样式来源有哪些

2.1 CSS工作流：1.找到元素 2.设置样式。

2.2 CSS元素样式来源：

默认样式：用户代理样式（既浏览器样式）。
自定义样式：分为行内样式（style=“…”）,文档样式（style标签），外部样式（style.css使用link标签引用外部文件）
继承样式：（关键词inhert），通常关于文本的颜色，字体，字号可以继承，而盒模型样式不能继承。

2.3 元素样式优先级排序

行内样式 > 文档样式 > 外部样式 > 默认样式 > 继承样式

2.4实例演示几种样式来源：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="css/style1.css" />
    <title>实例演示样式来源</title>
  </head>
  <body>
    <!-- 1.默认样式来源 -->
    <h1>默认样式</h1>
    <!-- 2.自定义样式 -->
    <!-- 2.1 行内样式 -->
    <h2 style="color: brown">行内样式</h2>
    <!-- 2.2 文档样式 -->
    <h3>文档样式</h3>
    <style>
      h3 {
        color: cadetblue;
      }
    </style>
    <!--  2.3 外部样式  -->
    <h4>外部样式</h4>
    <!-- 继承样式 -->
    <div>
      div父样式
      <p>p标签继承父样式</p>
      <h5>h5继承父样式</h5>
    </div>
    <style>
      div {
        color: yellowgreen;
      }
      p {
        color: thistle;
        color: inherit;
      }
      h5 {
        color: tomato;
        color: inherit;
      }
    </style>
  </body>
</html>

效果图：

3. 选择器

什么是选择器，理解就是要设置css样式的对象，可以作为选择器的对象有以下几种：
3.1基本选择器：tag，例如h1
3.2属性选择器：例如 <h1 title="a"> hello </h1> 种的title，应用中使用h1[titile=”a”]来选择引用。其中 id和class属于高频属性，简化用法为id用”#”代替，class用“.” 代替。推荐是用class，因为在后面权重中id得权重过高，无进一步提升空间。
3.3群组选择器：多个选择器并列，用逗号隔开，例如.a,p {color:red}
3.4通配符选择器：用*号表示，例如 html body *{color:red}
3.5上下文选择器/层级选择器：其中，子元素用”>”表示；后代元素用“空格”表示；邻居兄弟元素用“+ *”表示；所有兄弟元素用“~ *” 表示。
实例代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS选择器的种类及用法</title>
  </head>
  <body>
    <!-- 1. 基本选择器 tag -->
    <h1>这是基本选择器,使用h1标签</h1>
    <style>
      h1 {
        color: khaki;
      }
    </style>
    <!-- 2. 属性选择器 -->
    <h2 title="a">这是属性选择器，h2[title="a"]</h2>
    <style>
      h2[title="a"] {
        color: red;
      }
    </style>
    <h3 id="a">这是属性选择器，h3#id</h3>
    <style>
      h3#a {
        color: saddlebrown;
      }
    </style>
    <h4 class="a">这是属性选择器，h4.class</h4>
    <style>
      h4.a {
        color: skyblue;
      }
    </style>
    <!-- 3. 通配符选择器 -->
    <div>
      <ul class="list">
        <li class="item1">item1</li>
        <li class="item2">item2</li>
        <ul class="list2">
          <li class="item">item1</li>
          <li class="item second">item2</li>
          <ul class="list3">
            <li class="item">item1</li>
            <li class="item">item2</li>
            <li class="item">item3</li>
          </ul>
          <li class="item">item3</li>
        </ul>
        <li class="item3">item3</li>
        <li class="item4">item4</li>
      </ul>
      <style>
        /* 子元素选择器“>” */
        .list > li {
          border: 1px solid slateblue;
        }
        /* 后代元素选择器用“空格” */
        .list2 li {
          border: tomato solid 1px;
        }
        /* 邻居兄弟元素选择器用“+ *” */
        .item2 + * {
          background-color: green;
        }
        /* 所有兄弟元素选择器用“~ *” */
        .item.second ~ * {
          color: turquoise;
        }
      </style>
    </div>
  </body>
</html>

效果图：

4.选择器权重

CSS规则是同样名称后写的覆盖前面的，为了保证前面的能生效，产生出权重的概念，权重是由specificity（0，0，0）表示的，个位代表tag数量，十位代表class数量，百位代表id数量，这也是为什么程序员在代码中将id认为成唯一的原因，因为id权重过高，很有可能遇到提权重的瓶颈，tag的语义化标签数量有限，不能满足复杂度需求，class没有数量限制，可以自定义，所以成为代码中最常用的属性，其对增加代码的弹性起到了重要作用。
最重要的是要学会权重的计算，并在实际编程中使用权重。
实例

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>选择器的权重(重点)</title>
  </head>
  <body>
    <h1 class="title" id="active">Hello</h1>
    <style>
      /* 1 1 2 */
      /* 2: 表示2个标签, 
      1: 表示1个class
      1: 表示1个id  */
      body h1.title#active {
        color: red;
      }
      /* 0 1 2 */
      /* 2: 表示2个标签, 
      1: 表示1个class
      0: 表示没有id  */
      body h1.title {
        color: blue;
      }
      /* 就想放在第一行,又想让它生效,只有提权 */
      /* 0 0 2 */
      /* 2: 表示2个标签, 
      0: 表示没有class
      0: 表示没有id  */
      body h1 {
        color: green;
      }
      /* 相同的权重,由位置决定样式 */
      /* 0 0 1 */
      /* 1: 表示只有一个标签, 
      0: 表示没有class
      0: 表示没有id  */
      h1 {
        color: darkorange;
      }
      /* 三个权重的位置, 从右到左
      第1位: 标签数量
      第2位: class数量
      第3位: id数量 */
      /* css 将 id, class, tag 看成一个"三位整数", id -> 百位, class -> 十位, tag -> 个位 */
      /* h1 {
        color: violet !important;
      } */
      /* id : 为什么不推荐用? 因为权重太高, 为了让你的代码具有弹性,尽可能用class */
      /* 为什么不用权重最低的标签呢? 只是标签的数量太少了, 而class可以任何命名 */
      /* bootstrap , element ui  */
    </style>
    <div class="col-md-3 vip">Bootstrap</div>
    <style>
      /* 0 2 1 */
      div.col-md-3.vip {
        border: 5px solid red;
      }
      /* 0 1 1  */
      div.col-md-3 {
        border: 1px solid #000;
      }
    </style>
  </body>
</html>

CSS基础1

1.CSS是什么

2.元素样式来源有哪些

3. 选择器

4.选择器权重

更多相关文章

随机推荐