应用视觉设计概述

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

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

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

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

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

text-align: 实现视觉平衡

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<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 的方式, 保证文字内容高度的情况下再添加一个背景:

    1
    2
    3
    4
    5
    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 可以控制文字的变化, 有如下选项:

    1
    2
    3
    4
    5
    6
    lowercase
    uppercase
    capitalize
    initial: 使用默认值
    inherit:使用父级的 text-transform
    none: 使用原始文字
  9. 使用 font-size 和 font-weight 设置字体大小和粗细。

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

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

    1
    2
    3
    4
    5
    6
    7
    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 来设置距离,比如下面的代码:

1
2
3
4
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


应用视觉设计概述
https://blog.rayy.top/2020/11/18/2020-11-18-visual-design/
作者
貘鸣
发布于
2020年11月18日
许可协议