应用视觉设计概述

本文基于 FCC 的练习“视觉设计”进行汇总，便于日后查阅。

视觉设计：视觉设计在 web development 中是一个广泛的话题，包括字体字号设计，颜色理论，图像，动画，页面布局等。

在基础层面，大部分 web 内容就是向用户提供信息。页面的视觉设计直接影响用户体验。在开发过程中，HTML 用于指定页面的结构和语义，CSS 在此基础上用于控制布局和视觉配置。

在实际开发过程中，有若干工具可以辅助进行视觉设计，并且引入一些布局的核心原则。

text-align: 实现视觉平衡

由于网页上大部分内容都是文本信息为主，因此在 CSS 中有许多处理文本的选项。先来看 text-align, 有如下选择：

• justify： 两端对齐
• center： 中间对齐
• right： 右对齐
• left：左对齐

比如在一个容器中，需要将某个文字居中，此时可以使用 center。

<style>
  h4 {
      text-align: center;
  }
  p {
      text-align: justify;
  }
  .links {
    margin-right: 20px;

  }
  .fullCard {
    border: 1px solid #ccc;
    border-radius: 5px;
    margin: 10px 5px;
    padding: 4px;
  }
  .cardContent {
    padding: 10px;
  }
</style>
<div class="fullCard">
  <div class="cardContent">
    <div class="cardText">
      <h4>Google</h4>
      <p>Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.</p>
    </div>
    <div class="cardLinks">
      <a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a>
      <a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
    </div>
  </div>
</div>

width: 控制元素宽度

可以为元素设置 width，以指定宽度。宽度有三种表现方式：

1. 通过 px 指定绝对宽度
2. 通过 em 等指定相对宽度
3. 使用百分比 % 指定占父元素的比例

height: 控制元素高度

和 width 的设置方式类似。

不过有一个疑问，就是设置一些文本的高度是什么意思, 比如 h1 的 height？通过开发者工具可以看到实际高度设置为 0 时元素占 0，但文本仍然可以渲染出来。

strong tag：设置粗体

用 strong tag 包裹的元素，浏览器会渲染为应用 font-weight:bold;，使用它的好处是可以将某段文本包裹起来应用强调的效果，比如 p 中的一个词。

u tag: 设置下划线

可以使用 u tag 为一段文本设置下划线，最终会渲染为应用 text-decoration: underline。

CSS

1. 使用 em tag 来应用 font-style: italic;, 即应用斜体.

2. 使用 s tag 来应用 text-decoration: line-through;, 即中间划掉.

3. 使用 hr tag 来画一条水平线

4. 为了让内容更加易读, 一种方案是应用背景色+字体色的组合, 另外一种是只背景色单独的内容. 即使用背景色外带设置 padding 的方式, 保证文字内容高度的情况下再添加一个背景:

   h4 {
     text-align: center;
     padding: 10px;
     background-color: rgba(45,45,45,0.1)
   }

5. 一般情况下, h1-h6 的字体大小依次减小, 但都大于 P 的字体大小, 这样可以让内容的层级分明. 使用 font-size 就可以调整字体大小.

6. 可以应用阴影来突出某些部分, 阴影通过 box-shadow 添加, 并且阴影可以应用多个, 通过逗号分隔, 阴影的属性按如下顺序:

   • offset-x
   • offset-y
   • blur-radius 可选
   • spread-radius 可选
   • color

   比如 box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);

7. 使用 opacity 可以控制透明度。

8. 使用 text-transform 可以控制文字的变化， 有如下选项：

   lowercase
   uppercase
   capitalize
   initial： 使用默认值
   inherit：使用父级的 text-transform
   none： 使用原始文字

9. 使用 font-size 和 font-weight 设置字体大小和粗细。

10. 使用 line-height 设置文本的行距。

11. 使用 pseudo-class 设置特殊状态下的风格，比如 a 标签的 hover 状态下的颜色。

    a {
      color: #000;
    }
    
    a:hover {
      color: red;
    }

布局基础

CSS 将 HTML 中每个元素都作为一个盒子，这就是 CSS 的盒子模型。块级的元素自动占据新的一行（比如 h，p，div等），而内嵌元素则靠近内容，比如img或 span。这样的布局方式称为 normal-flow，不过 CSS 提供了改变默认布局的途径。

当一个元素的 position 被设置为 relative 后，就表明允许 CSS 控制它的位置了，即通过 left，right，top，bottom 来设置距离，比如下面的代码：

p {
  position: relative;
  bottom: 10px;
}

意思是将 p 从它的默认布局位置的底部偏移 10px, 就是往底部远离。实际上四个方向设置的数值都表示“远离”该方向的数值大小。

position 的第二个选项是 absolute。

position 的第三个选项三 fixed。

CSS 中的块级元素列表详见 MDN: https://developer.mozilla.org/zh-CN/docs/Web/HTML/Block-level_elements