CSS 与设计备忘录

(封面图由 DALL·E 生成)

基础

CSS（Cascading Style Sheets，层叠样式表）

文件嵌入引入：

<link href="style.css" rel="stylesheet" />

em 与 rem

• em 是最常见的相对长度单位，基于特定的字号进行排版。
• 1em 相当于当前元素的字号，准确值取决于作用于的元素。

设置 padding、height、width、border-radius 时，使用 em 会很方便

文本

• font-size
• font-family
• text-transform：比如换成大写
  • uppercase
• font-style
• line-height 行高
  • e.g. 1.5，是字体的 1.5x
• text-align 文本对齐
• font-weight
  • bold
• text-decoration
  • underline

色彩

• rgb(0, 255, 255)

• rgba(0, 255, 255, 0.3)

#00ffff 两个一样时，可以简写成 #0ff

三原色相同为灰度值，从 0 - 255，总共有 256 个级别。白色和黑色是两个极值，rgb(255, 255, 255) 和 rgb(0, 0, 0)

CSS 变量

:root 选择器，可以使得变量在整个网站都可以使用：

:root {
	--main-font: Helvetica, Arial, sans-serif;
}

变量前面需要有两个连字符 --

调用函数 var 使用该变量。

p {
	font-family: var(--main-font);
}

背景图片

cover 计算所需大小，覆盖整个元素。

background-image: url(/img/hero-1.jpg);
background-size: cover;

内部加边框

box-shadow: inset 0 0 0 3px #fff;

filter

调整图像颜色、饱和度，等等。

.logos img {
	height: 3.2rem;
	filter: grayscale(100%);
}

选择器

后代选择器

但和 HTML 结构耦合，不是一个特别好的选择，比较容易出问题，不好维护。

footer p {
}

类选择器与 ID 选择器

• # ID 选择器，ID 不能重复
• . 类选择器

通常不用 ID 选择器。优先级太高，不好覆盖，应该尽可能选择优先级低的选择器。

伪类

li:first-child {
	 font-weight: bold; 
}

• last-child
• nth-child
  • odd 奇数
  • even 偶数
• a:link 对有 href 才生效
• a:visited 访问过的链接生效
• a:hover 悬停
• a:active

a:hover {
	color: orangered;
	font-weight: bold;
	text-decoration: underline dotted orangered;
}

定义的顺序一般是：link、visited、hover、active（LVHA）

规则冲突时（层叠）

优先级从高到低：

1. !important
2. 内联
3. ID
4. 类 / 伪类
5. 标签选择器
6. 通用 *

继承

大多数是文本属性

伪元素

h1::first-letter {
	font-style: normal;
	margin-right: 5px;
}

伪元素是 ::，伪类是 :

first-line

::after
::before

h2::after {
    content: "TOP";
    background-color: hsl(54, 100%, 53%);
    color: #444;
    font-size: 16px;
    font-weight: bold;
    display: inline-block;
    padding: 5px 10px;
    position: absolute;
    top: -10px;
    right: -25px;
}

定位

默认是 relative

absolute 失去对周围元素的影响，甚至会和其它元素重叠。

默认是相对视口定位。

body {
    position: relative;
}

button {
    position: absolute;
    bottom: 50px;
    right: 50px;
}

不一定是 body 可以是其它父元素。

盒模型

• Content
• Border
• Padding
• Margin

重置默认的边距设定

有利于设计，避免默认值的影响。

* {
	margin: 0;
	padding: 0;
}

通常是新项目时做的第一件事。

大多数情况下空间用 bottom

外边距折叠：相邻外边距中的最大值

上下堆叠的间距问题

外边距「就像是给一个物体的一侧涂了胶水，而你还没有决定是否要将它贴到某处，或者还没想好贴到什么东西上。」—— Web 设计师 Heydon Pickering

猫头鹰选择器

body * + * {
	margin-top: 1.5em;
}

页面居中

div 包含整个页面标签

.container {
	width: 700px;
	margin-left: auto;
	margin-right: auto;
}

两个 auto 意味着左右边距需要相同，由浏览器自动计算。

可以 简写 成：

.container {
	width: 700px;
	margin: 0 auto;
}

块级元素

display

• inline 不会直接换行（比如：<strong>、<em>、button）
  • height 和 width 没有作用
• block 大多数 HTML 标签都是块级元素。
  • 默认占据一行
• inline-block
  • 从外部看像 inline ，行为从内部上比较像 block
  • 不会直接换行

布局

浮动

类似绝对定位，会将元素移出流（flow）

要实现将图片移动到网页一侧，并且让文字围绕图片的效果，浮动仍然是唯一的方法。

清除浮动

浮动元素不同于普通文档流的元素，它的高度不会加到父元素上。因此包含浮动元素的元素可能不会包含内部的浮动元素，这时候就需要清除浮动让容器扩展包含该元素。

加入一个空标签，例如 <div class="clear"></div>，然后使用 clear:

.clear {
	clear: both;
}

由于会引入空标签，可以改用 clearfix hack：

.clearfix::after {
  clear: both;
  content: '';
  display: block;
}

伪元素是行内元素，所以要改成 block

box-sizing

border-box

可以设置成全局，但它不是继承属性，所以不能放在 body 的属性上。

* {
	box-sizing: border-box;
}

Flexbox

Flexbox 全称弹性盒子布局（Flexibe Box Layout），跟浮动布局相比，Flexbox 的可预测性更好，还能提供更精细的控制。

构建 一维（1-dimensional）布局，主要思想是浏览器通过它的子元素自动划分空白空间。

display: flex

垂直的高度和最高元素的高度相同

display: flex;
align-items: center; /* 控制子元素在副轴的位置 stretch / flex-start / flex-end */

justify-content: center;

概念

• Flex container
• Flex items
• 主轴
• 副轴

align-self 子元素在副轴上的对齐方式，会覆盖容器上的 align-items 的值。

flex 属性是三个不同属性的简写

• flew-grow
  • 尽可能的增长
  • 越大，则剩余空间的分配权重越大
• flew-shrink
  • 必要时收缩元素（控制溢出）
• flex-basis
  • 元素大小的基准值

默认值 0 、1、auto

实际上不应该使用具体的三个值，而应该直接使用 flex

弹性方向

flex-direction 切换主轴和副轴方向

• column 从上到下
• column-reverse 从下到上
• row 从左到右
• row-reverse 从右到左

小结

• 选择一个容器及其子元素，给容器设置 display: flex
• 如有必要，给容器设置 flex-direction
• 给弹性子元素设置外边距或者 flex 值，用来控制大小

网格

CSS 网格定义了由行和列组成的二维布局，然后将元素放置到网格中。

display: grid

fr 代表每一列（每一行）的分数单位（fr）

grid-template-columns

• 最后一个可以使用 auto 自动填充）；
• repeat(4, 1fr) 可以省略重复的属性；
  column-gap
row-gap

概念

• Gird cell（网格单元）
• Grid line（网格线）
• Column Axis
• Row Axis
• Gaps(Gutters)
• Grid track（网格轨道）：相邻网格线之间的空间

跨列和跨行：

grid-column: 1 / 2;
grid-row: 3 / 4;

也可以使用 span 跨越单元格

/*grid-column: 1 / 4; */
grid-column: 1 / span 3;

延伸到最后，可以直接使用 -1

一般垂直的高度根据内容扩展，不特别进行设置。

命名网格区域

. 作为名称，则空出一个网格单元。下面的 CSS 定义了四个网格区域，中间围绕着一个空的网格单元：

grid-template-areas:
  "top top right"
  "left .  right"
  "left bottom bottom";

不能是 L 或者 U 型区域。

响应式设计

移动优先

响应式设计第一原则：移动优先，即构建桌面版之前先构建移动端布局。这样才能确保两个版本都生效。

如果一开始就设计一个包含全部交互的网站，再根据移动设备的限制来制约网站的功能，一般会以失败而告终。
而移动优先的方式会让你设计网站的时候就一直想着这些限制。一旦移动版的体验做好了，就可以用「渐进增强」（progressive enhancement）来为大屏增加体验。

一定要确保 HTML 包含各种屏幕尺寸所需的全部内容。

可以对每个屏幕尺寸应用不同的 CSS，但必须共享同一份 HTML。

流式布局

• 使用 % （或者 vh / vw）替代 px 适应视口
• 使用 max-width 替代 width，自适应窗口
• 绝大多数长度使用 rem

一个技巧，将页面字体大小设置为 62.5%（浏览器默认 16px，我们需要 10px，10 / 16），便于计算 em 大小，这样 1em 等于 10px。（不要设置成 10px，默认用户无法更改字体大小）

媒体查询

• 包含断点

@media (max-width: 600px)

注意，必须有下面这一行，否则会自动缩小，而不是响应式：

<meta name="viewport" content="width=device-width" />

不应该使用像素。

设计的指导性原则

排版

使得书面语言清晰、可读和有吸引力。

衬线和无衬线

serif 和 sans-serif

衬线是更传统的字体，可以用来创建更传统或经典的界面。传递可依赖性，适用于长文本，例如文章和杂志。
无衬线看起来非常干净和简单。现代的外观和感觉。

选择一个合适的无衬线字体要比选择衬线字体更容易。

选择好和流行的字体，不要选择怪异的。

以下是 6 种非常好的无衬线字体：

• Inter
• Open Sans
• Roboto
• Montserrat
• Work Sans
• Lato

衬线字体：

• Merriweather
• Aleo
• Playfair Display
• Cormorant
• Cardo
• Lora

一个页面上只用一种字体，最多使用两种

字体的选择和网站的个性有关

限制字体大小的数量，普通的文本使用 16px 和 32px 之间的字体。对于长文本（例如博客和文章），稍微大一点，选择 20px 或更大一点，更容易阅读。

对于标题，可以使用 50px 加粗等等，具体取决于网站的个性。

所有文本都不要用低于 400（regular）的字体粗细（font weight）

一行的字数不要超过 75 个字符

正常尺寸的文本，使用的行高（line height）介于 1.5 到 2。大文本，低于 1.5。文字越小、文本越长，行高就应该相应大一点。

如果觉得标题不自然，可以适当缩小字距（letter spacing）

短标题使用全大写

网络上，通常不对齐文本。

不要居中文本，除非特别短。

颜色

与网站个性要匹配，颜色传递着意义。

• 红色 引人注目，象征着力量、激情和兴奋；
• 橙色 没有那么激进，象征着幸福、快乐和创造力；
• 黄色 象征着快乐、光明和智慧；
• 绿色 象征着和谐、自然、生长和健康；
• 蓝色 和平、专业和可信；
• 紫色 财富、智慧和魔力；
• 粉色 浪漫、关怀和感情；
• 棕色 自然、舒适和耐用；
• 黑色 力量、优雅和简约，另一面也表现出悲伤和悲哀。（对于初学者来说，黑色可能不是一个好的选择）

使用一个好的色调，不要选择随机的色调或者 CSS 的命名颜色

可以使用下面这些工具选择一个基础色调：

• Open color
• tailwindcss
• FLAT UI Color（阴影少一点）

为了容易区分，可以使用变量：

html {
	--brand-green: #076448;
}

任何设计中，调色板中至少要有两种类型的颜色：一个主色（main color）和一个灰色（grey color）。（并不是一定是真的灰色，可以只是另一个颜色的一个暗色版本）。

主色可以考虑从公司的品牌或者 Logo 中衍生。

两种颜色很多时候就足够了，有了相当的经验之后，可以增加更更多的颜色，比如强调色（accent color）。

强调色不是随机选择的，和主色之间要有一定的联系。最简单的方式是找到它的互补色。补色位于色相环的对侧，例如：蓝色的补色是黄色；绿色的补色是洋红。

总是需要这三种颜色的浅色和深色版本。浅色称为色调，深色为阴影。（有对应的生成工具，tints-shades-generator）

• palleton.com
• coolors

主色始终用于吸引用户对最重要元素的注意力。强调色使得某些部分突出。

可以策略性地在你的图片中使用对应颜色，可以获得一致的外观。

在深色背景上，用浅色来写文字。

文字不应该用纯黑。纯白色背景（#fff）上的纯黑色文本回产生强烈的对比效果，很容易在阅读的时候造成视觉疲劳，特别是大段的文本。黑色背景上的白色文本也会有这样的问题。这种情况下，要么用深灰色。

不要让文本太浅（light），使用工具（比如：coolors）去检查文本和背景色之间的对比。（对于视力不好的阅读者不友好）。普通文本的对比度应该至少 4.5:1，大文本（18px +）应该至少 3:1。更加严格（加强型）是 7:1 和 4.5:1。（W3C 的 Web 内容无障碍指南 Web Content Accessibility Guidelines, WCAG）

照片/说明

• 产品图片
• 故事图片（storytelling photo）
• 插图
• 图案（pattern）：纹理背景插图

用图片去支撑你的网站信息和故事，所以，只使用有关的图片。

可以去下面的网站下载：

• Unsplash
• Pexels
• Drawkit
• unDraw

表现出真实的人物去触发用户的情感。

如果有必要，裁剪掉图片中不需要内容。

文本与图片结合

• 文本所在的图片变暗或变亮（也可以使用渐变的灰度），文字更容易阅读；
• 将文本放到中性的区域；
• 放到某个框中；

为了让图片适应高分辨率的屏幕，图片的大小应该是展示的大小的 2 倍，例如展示区域如果是 300 × 300，原图大小最好是 600 × 600。

压缩图片大小。（可以使用 Squoosh 工具）

并排时，确保图片大小相同。（起码宽高比要一样）

图标

使用一个好的 icon Pack，比如：

• phosphor icons
• ionicons
• icons8

也可以使用 emojis。

只使用一个 icon Pack，不要混合使用不同的 icon Pack。风格间的差异可能会错误地引导用户的注意力。

使用 SVG 或者 icon font，不要使用位图（例如：.jpg 或者 .png）。

为文本提供可视化的帮助；功能模块的提示。

如果想要中立，那么和文本使用同样的颜色。如果想吸引注意力，使用不同的颜色。

不要使用没有意义的图标来混淆用户。

阴影

拟物化（Skeuomorph） 到扁平化（Flat Design），但带来可用性问题。之后设计中又将阴影深度适当的加入（比如：Material、Win11）。

阴影创建第三个维度（3D），阴影越多，看起来就离屏幕越远。（模拟了假想光源）。

并不一定要使用阴影。一般比较严肃的网站用阴影会比较少，而比较活泼的网站会更多的使用阴影。

小范围使用阴影，不要每个元素都添加阴影。这样反而有损视觉层次。

阴影要浅，不能太暗。

推荐为需要突出的小元素添加小阴影。

对应该更突出的较大区域使用中等大小的阴影，例如卡片从页面突出。

大阴影用于需要真正漂浮在页面上的元素，比如：modal 框。

在鼠标的交互上添加阴影。

阴影不一定是黑色的，可以使用彩色阴影（glow）。

/* x 偏移量 | y 偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

文字阴影 text-shadow 也是一种图片上显示文字的方式之一。

边框圆角

border-radius 增加趣味性，使得不会那么严肃。

字体有确定的圆度（roundness），确保 border-radius 和它匹配。

用得最多的是在按钮（button）上，加少量的弧度，去掉那里的硬边。另外用得比较多的是在图片上。

空白

空白在布局之间创建了不可见的关系。

在分段（section）之间使用大量的空白；分组元素之间也使用大量空白（当然，不需要像分段（section）的空白那么多）。元素之间也要留有空白。

元素分组优先使用空白替代线（line），这样更现代，更干净。

邻近定律：相关元素彼此靠近。

可以考虑先用大量的空白，然后再删减空白。

匹配其它的设计选项。如果是大量文本和大图标，需要更多的空白。

可以跟字体大小一样，考虑建立一个系统，例如：16px 的倍数。

视觉层次

关于确定某个设计的哪些元素是最重要的。

定义了一条路径去引导用户使用这个页面。

需要使用位置、大小、颜色、空白、边框和阴影去建立一个有意义的视觉层次。

最重要的元素放在顶部。那里可以得到最多的关注。

使用图片要小心，他们会吸引大量注意力。

策略性空白。

对于文本，可以使用字体大小、字体粗细、颜色和空白来传递重要性。

强调的元素：标题、副标题、链接、按钮、数据、图标。可以淡化不重要的文本，像标签、附加信息。

强调重要的组件可以使用背景颜色、阴影或者

用户体验（UX）

Design is not just what it looks like and feels like. Design is how it works. - Steve Jobs

用户在与产品交互时的体验。UI 讲究的是美观，而 UX 关注的是有用（useful）和实用（functional）。

没有 UI 设计，UX 就不可能存在。

围绕目标：用户带着目的（goal）去访问一个网站和 App，企业有目的的去创建它。

使用成熟模式，而不是自己去设计布局。

蓝色文字和下划线文本只用在链接上。

设计中如果使用动画，确保动画有目的而且足够快（200 - 500ms）。

表单各个数据域垂直对齐。操作都应该提供一个结果反馈。

操作按钮应该放在能产生效果的地方。（局部性法则）

个性

严肃或优雅

传达奢华和优雅

• 细衬线
• 金色或柔和
• 高质量的大图

通常也不使用圆角、小图标。

比如：奢侈品网站

极简

重点在文本内容

• 使用小型或中型黑色文本
• 不用小图标

比如：时尚网站

简单、中立

• Adobe、微软等成熟公司中使用（商城）
• 通过使用中性和小字体
• 结构化的布局

大胆、自信

明亮和大色块

平静、平和

用于产品和服务

创业

现代外观无衬线

有趣

手绘图标或插图

获取灵感

网站设计的聚合平台

• Land Book
• One Page Love
• Awwwards