07 – 中级 CSS

★The Cascade - Specificity and Inheritance 层叠 - 特指性与继承

如何解决竞争样式

  • Cascading：只有当我们考虑多个不同的冲突CSS规则时Cascading才有意义

    • 这种确定哪些规则真正得到应用、哪些规则被忽略的方法是我们的级联是如何形成的

    • 一旦完成级联：

  • 确定总体重要性时，我们会考虑四大类：位置、特异性、类型、重要性。 每个级联中几乎都有一个迷你级联级别，你可以确定哪一个时重要的？

  • goal

  • css

    #outer-box {
  background-color: purple;
}

.box {
  background-color: blue;
  padding: 10px;
}

.inner-box {
  background-color: red;
}

p {
  color: yellow;
  margin: 0;
  padding: 0;
}

.white-text {
  color: white;
}

  • html

    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>CSS Cascade</title>
  <link rel="stylesheet" href="./solution.css">
</head>
<body>
  <div id="outer-box">
    <div class="box">
      <p>Yellow Text</p>
      <div class="box inner-box">
        <p class="white-text">White Text</p>
      </div>
    </div>
    <div class="box">
      <p>Yellow Text</p>
      <div class="box inner-box">
        <p class="white-text">White Text</p>
      </div>
    </div>
  </div>
</body>

</html>

★Combining CSS Selectors 组合CSS选择器

如何选择特定元素进行样式设置

  • 一些规则：

    • 组（Group）：使用,隔开

    • 子项（Child）：使用>来选择另一个选择器的子项

    • 后代（Descendant）：

    • 链接（Chaining）：

    • 组合组合器（Combining Combiners）：

★CSS Positioning CSS定位

相对（Relative）、绝对（Absolute）、固定（Fixed）和静态（Static）定位

  • CSS Positioning Demo

  • Pesticide for Chrome - Chrome Web Store

  • 静态定位（Static Positioning）- HTML的默认流动性

    • 无论添加任何属性，它都不会执行任何操作

  • 相对定位（Relative Positioning）- 相对于默认位置定位

    • 1

  • 绝对定位（Absolute Positioning）- 相对于最近的定位祖先元素或网页左上角定位

    • Z轴索引 z-index （默认z-index: 0），当你设置Absolute时，即使z-index: 0，它实际上会把元素取出来，并将其放在另一层上

  • 固定定位（Fixed Positioning）- 相对于浏览器窗口左上角定位

    • 即使你在网页上上下滚动，它仍会相对于浏览器位于相同的位置

    • <!DOCTYPE html>
<html>

<head>
  <title>CSS Positioning Exercise</title>
  <style>
    .red-circle {
      width: 200px;
      height: 200px;
      background-color: red;
      border-radius: 50%;
      position: absolute;
      top: 150px;
      left: 250px;
    }
    
    .blue-box {
      background-color: blue;
      width: 500px;
      height: 300px;
      position: relative;
      top: 200px;
      left: 200px;
    }

  </style>
</head>

<body>
  <div class="blue-box">
    <div class="red-circle"></div>
  </div>
</body>

</html>

★[Project] CSS Flag [项目] CSS旗帜

用CSS制作老挝国旗

Previous06 - CSS 属性Next08 - 高级 CSS

Last updated