06 - CSS 属性

★CSS 颜色

为我们的网站增添色彩

★字体属性

改变文本的外观

  • Font Properties

    • h1 {
  color: blue;
  font-weight: bold;/* 字体粗细 */
  font-size: 20px;/* 字体大小 */
  font-family: sans-serif;/* 字体系列 */
}

  • Font Size

    • h1 {
  font-size: 20px;/* 字体大小 */
}

    • 意味什么

      • 1 px（Pixel 像素）: 1/96th inch (0.26mm✖️0.26mm)

      • 1 pt（Point 磅点）: 1/72nd inch(0.35mm✖️0.35mm) 【word文档的字体用pt】

      • 1 em（）: 100% of parent 【相对于HTML元素的父级；文本的动态尺寸，相对于标准的 16px = 1em】

      • 1 rem（）: 100% of root 【文本的动态尺寸，相对于根元素；优先用于文本】

      px vs. pt vs. em vs. rem

  • Font Weight

    • h1 {
  font-weight: bold;/* 字体粗细 */
}

    • 一些方法来改变字体粗细

      • Keywords（关键字）：normal/bold/...

      • Relative to Parent（相对于父级）：lighter/bolder

      • number：100-900（-100light or +100bold）

  • Font Family

    • h1 {
  font-family: Helvetica, sans-serif;/* 字体系列 */
}

h2 {
  font-family: "Times New Roman", serif;
}

    • 浏览字体 - Google 字体（寻找免费字体）

      • <head>
  <!-- .... -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Caveat&display=swap" rel="stylesheet">
</head>
      •  /* Link: https://fonts.google.com/specimen/Caveat */
    h1 {
      font-family: 'Caveat', cursive;
    }

  • Text Align

★检查 CSS

使用 CSS 概览功能

  • Example HTML Website

  • Chrome开发者工具：在其所做的任何更改（暂时的，供你观察和尝试）不会影响到你的原始文件

    • 打开

      • More Tools -> Developer Tools

      • 快捷键：command+option+i （windows）：control+shift+i （功能键）F12

      • 右键 -> Inspect

    • 选择元素

    • 元素（Element）选项卡的子部分

      • 样式（Styles）部分：显示应用于元素的样式

        • 单击style.css，显示其源码

        单击style.css，显示其源码

        • 更改CSS工具 eg. 选择h1，单击“添加”，就可以为这个h1添加样式

          选择h1，单击“添加”，就可以为这个h1添加样式

        • 当自己的规则覆盖其他现有的规则

      • 如何知道实际应用到你的CSS元素上的内容呢？ 计算后的样式（Computerd）部分：用于查看 HTML 元素最终计算样式的部分

    • CSS Overview：显示一堆有的东西（颜色、字体...）

★CSS 盒子模型 - 边距、填充和边框

Margin（外边距）、Padding（内边距） 和 Border（边框）

  • 盒子模型：有宽度和高度形成的

    • height width

    • Border

    去除顶部边框

    • Padding

      无法使用padding获得元素之间的间距

    • Margin

    • 检查器的Box Model

    • CSS Box Model

    • Padding/Margin/Border-width设值

  • 人造盒子：将不同的内容的内容组合在一起，以便对其设置样式 <div></div>（content division Element 内容划分元素）

    • 将一组HTML元素组合成一个盒子

    • 对于组织和划分网页内容非常有用

  • pesticide chrome extension：用于 调试网页布局 的 Chrome 浏览器扩展工具

★[项目] 励志海报网站

制作自己的表情包

Previous05 - CSS 简介Next07 – 中级 CSS

Last updated