CSS 基础教程

本文最后更新于 2021年4月4日 晚上

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

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

  2. 使用 CSS Selector:

    1
    2
    3
    4
    5
    <style>
      h2 {
        color: red;
      }
    </style>

  3. 使用 CSS class:

    1
    2
    3
    4
    5
    <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. 字体选择, 可以使用逗号分隔: 

    1
    2
    3
    p {
      font-family: Helvetica, sans-serif;
    }

  7. 指定 Image 的 size:

    1
    2
    3
    4
    5
    <style>
      .larger-image {
        width: 500px;
      }
    </style>

  8. 添加 Border:

    1
    2
    3
    4
    5
    .thin-red-border {
      border-color: red;
      border-width: 5px;
      border-style: solid;
    }

  9. Border Radius 添加:

    1
    2
    3
    4
    5
    6
    .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:

    1
    2
    3
    4
    5
    .blue-box {
      background-color: blue;
      color: #fff;
      padding: 20px;
    }

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

    1
    2
    3
    4
    5
    6
    .blue-box {
      background-color: blue;
      color: #fff;
      padding: 20px;
      margin: 20px;
    }

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

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

    1
    2
    3
    4
    5
    6
    .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 的元素的风格;

    1
    2
    3
    [type="checkbox"] {
        margin: 10px 0 15px 0
    }

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

    1
    2
    3
    4
    5
    .red-box {
      background-color: red;
      margin: 20px 40px 20px 40px;
      padding: 1.5em;
    }

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <style>
      body {
        background-color: black;
        color: green;
        font-family: monospace;
      }

    </style>

    <h1>Hello World</h1>

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <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, 则这个值最优先, 即覆盖其他的配置:

    1
    2
    3
    .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);
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    .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 的范围内可用:

    1
    2
    3
    4
    5
    :root {
      /* Only change code below this line */
      --penguin-belly: pink;
      /* Only change code above this line */
    }

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

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    :root {
        --penguin-size: 300px;
        --penguin-skin: gray;
        --penguin-belly: white;
        --penguin-beak: orange;
    }
    @media (max-width: 350px) {
      :root {
        --penguin-size: 200px;
        --penguin-skin: black;
      }
    }
frontend
CSS 基础教程
https://blog.rayy.top/2020/11/18/2020-11-18-css-basic/
作者
貘鸣
发布于
2020年11月18日
许可协议