本文根据 FCC 的 CSS 基础教程总结而来， 便于日后查询。

  1. inline css: style="color: red;"

  2. 使用 CSS Selector:

    css
    <style>
  h2 {
    color: red;
  }
</style>

  3. 使用 CSS class:

    css
    <style>
  .blue-text {
    color: blue;
  }
</style>

  4. 字体相关的 font-size 和 font-family

  5. 导入外部字体时, 可以使用这样的形式: <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">, 然后在需要的 font-family 中设置字体即可.

  6. 字体选择, 可以使用逗号分隔:

    css
    p {
  font-family: Helvetica, sans-serif;
}

  7. 指定 Image 的 size:

    css
    <style>
  .larger-image {
    width: 500px;
  }
</style>

  8. 添加 Border:

    css
    .thin-red-border {
  border-color: red;
  border-width: 5px;
  border-style: solid;
}

  9. Border Radius 添加:

    css
    .thin-red-border {
  border-color: red;
  border-width: 5px;
  border-style: solid;
  border-radius: 10px;
}

  10. 如果要全圆角, 可以设置 border-radius 为 50%.

  11. 为 div 设置背景色, 可以使用 background-color.

  12. 可以设置元素的 id, id 没有硬性规定必须唯一, 但实践中总是把 id 设置为唯一, 通过 id selector 来进行风格配置的时候, 在 css 以 # 开头.

  13. Padding 表示的是元素内部的四周距离, 可以设置 padding:

    css
    .blue-box {
  background-color: blue;
  color: #fff;
  padding: 20px;
}

  14. Margin 表示元素外部四周距离, 可以设置 margin:

    css
    .blue-box {
  background-color: blue;
  color: #fff;
  padding: 20px;
  margin: 20px;
}

  15. 设置负数的 margin 意味着和周围元素的距离为负.

  16. 可以对上下左右设置不同的 padding 值:

    css
    .blue-box {
  background-color: blue;
  color: #fff;
  padding-top: 40px;
  padding-bottom: 20px;
}

  17. 同样可以对上下左右设置不同的 margin 值.

  18. 可以直接按上-右-下-左的顺序设置 padding 或 margin(从12点顺时针), 这样简化写法: padding: 20px 40px 20px 40px;

  19. 使用 attribute selector 来设置风格, 比如设置全部 type 为 checkbox 的元素的风格;

    css
    [type="checkbox"] {
    margin: 10px 0 15px 0
}

  20. 关于在 CSS 中的单位, 有绝对单位和相对单位, 其中 px 为绝对单位. em 或 rem 为相对单位. 比如 em 基于元素父元素, 如果在 font-size 中设置 em, 则它相对父的 font-size. 比如可以设置 padding:

    css
    .red-box {
  background-color: red;
  margin: 20px 40px 20px 40px;
  padding: 1.5em;
}

  21. 继承: 在特定元素的孩子, 会自动使用继承风格, 即如果设置 body 的 color 为 green, 则它里面有一个 h1 的话, h1 的 color 也是 green:

    css
    <style>
  body {
    background-color: black;
    color: green;
    font-family: monospace;
  }

</style>

<h1>Hello World</h1>

  22. 在一般情况下, 可能设置的风格会有冲突, 则特殊风格会覆盖一般风格:

    css
    <style>
  body {
    background-color: black;
    font-family: monospace;
    color: green;
  }
  .pink-text {
    color: pink;
  }
</style>
<h1 class="pink-text">Hello World!</h1>

  23. 如果一个元素设置多个 class 中有冲突的设置, 则后面的会覆盖前面的.

  24. 但可以通过 id 来设置, 这样 id 对应的风格会比 class 的优先.

  25. 如果有 inline 的 style, 即直接在元素里面设置 style, 则 style 的会覆盖 id 和 class 的设置.

  26. 如果在 css 中给某个值设置 important, 则这个值最优先, 即覆盖其他的配置:

    css
    .pink-text {
    color: pink !important;
}

  27. CSS 中可以使用十六进制表示颜色, 比如 #fff, 颜色的十六进制表示是: #红绿蓝alpha

  28. 可以使用 rgb(r,g,b,alpha) value 来指定颜色, 其中颜色是 0~255, alpha 是 0 到 1.

  29. 使用 CSS 变量可以更好组织代码

    • 创建变量用 --penguin-skin: gray; 语法
    • 使用变量用 background: var(--penguin-skin); 这样的语法
    • 如果变量没有定义, 可以使用 fallback 的语法, 即指定默认值, 类似这样background: var(--penguin-skin, black);
    css
     .penguin {

    /* 变量定义 */
    --penguin-skin: gray;
    --penguin-belly: white;
    --penguin-beak: orange;

    position: relative;
    margin: auto;
    display: block;
    margin-top: 5%;
    width: 300px;
    height: 300px;
  }

  .penguin-top {
    top: 10%;
    left: 25%;
    /*变量使用*/
    background: var(--penguin-skin, gray);
    width: 50%;
    height: 45%;
    border-radius: 70% 70% 60% 60%;
  }

  30. 写 CSS 时, 有时需要考虑浏览器兼容问题, 这样可以针对浏览器来设置相同的值的不同表示.

  31. 通过如下方式设置变量, 这样该变量就会在指定了 root class 的范围内可用:

    css
    :root {
  /* Only change code below this line */
  --penguin-belly: pink;
  /* Only change code above this line */
}

  32. 可以在任意 selector 中重写同名变量的值, 则在该范围内变量将被替换为新的值.

  33. 使用 media-query, 可以针对不同的条件对变量设置不同的值, 也可以用相同的办法设置相同 selector 在不同条件下的配置:

    css
    :root {
    --penguin-size: 300px;
    --penguin-skin: gray;
    --penguin-belly: white;
    --penguin-beak: orange;
}
@media (max-width: 350px) {
  :root {
    --penguin-size: 200px;
    --penguin-skin: black;
  }
}