【CSS in Depth 2 精译_066】11.2 颜色的定义（上）：实现示例页中的基础样式及初步布局
当前内容所在位置（可进入专栏查看其他译好的章节内容）
- 第四部分 视觉增强技术 ✔️
- 【第 11 章 颜色与对比】 ✔️
- 11.1 通过对比进行交流
- 11.1.1 模式的建立
- 11.1.2 还原设计稿
- 11.2 颜色的定义 ✔️
- 11.2.1 色域与色彩空间
- 11.2.2 深入理解颜色表示法
《CSS in Depth》新版封面
译者按
由于本章需要综合应用前面十章介绍的知识点，从本篇开始放慢节奏，旨在让大家仔细领会每一行示例代码的意图。本篇为 11.2 节的上篇，先完成示例页面的基础样式和初步布局；中篇再介绍全新增补的色域与色彩空间相关的知识；下篇则深入解析 CSS 颜色的表示方法。
11.2 颜色的定义 Defining color
设计师交付设计稿时，通常会提供一份包含几个部分的大型文档。该文档的大部分篇幅多半为类似图 11.4 所示的整页视觉稿。但在此之前，设计师需要先准备一些基础设计。文档中可能会包含一两页关于多种标题和正文副本的排版示例，也可能会有一些基础 UI 元素的详情列表，比如链接和按钮设计，同时包含它们的各种状态，比如鼠标悬停和激活状态。此外还会包含网站用到的调色板（color palette）。
调色板的外观如图 11.5 所示。其中列出了全站使用的所有颜色样本以及对应的十六进制颜色值。设计师通常会为每种颜色分别命名，并在后续的明细规范文档中引用这些命名。
【图 11.5 网站的调色板】
调色板通常会有一种主色调，其他颜色均以该主色调为基础。主色一般从公司的品牌或者 LOGO 商标中衍生而来。在本例中，主色调即为品牌绿（位于图 11.5 左上角）。调色板中的其他颜色一般取同一色调中明暗各异的颜色或者与该色调互补的颜色。大部分调色板都会包含黑色和白色（尽管可能不是纯黑的 #000000 或纯白的 #ffffff），以及少量的灰色。
因为这些颜色会在 CSS 中多次反复出现，所以将它们赋给自定义属性可以节省大量时间；否则只能一遍又一遍地反复输入这些十六进制值，无法保证一定不出差错。
我们先为页面同一添加一些基础样式，包括将调色板中的每种颜色赋给特定的变量，为后续的复用创造条件。图 11.6 所示的页面效果感觉不怎么像视觉稿，但从颜色上看已经开始贴近视觉稿了。
【图 11.6 添加了基础样式和部分颜色的页面效果】
然后将代码清单 12.2 中的样式添加到本地样式表。
代码清单 11.2 带有颜色变量的全局样式代码
@layer reset, theme, global, layout, modules, utility;
@layer reset {
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
margin: unset;
}
button,
input,
textarea,
select {
font: inherit;
}
img,
picture,
svg,
canvas {
display: block;
max-width: 100%;
}
}
@layer theme {
:root { /* 将每种颜色赋给某个自定义属性 */
--brand-green: #076448;
--dark-green: #099268;
--medium-green: #20c997;
--text-color: #212529;
--gray: #868e96;
--light-gray: #f1f3f5;
--extra-light-gray: #f8f9fa;
--white: #fff;
}
}
@layer global {
body {
font-family: Helvetica, Arial, sans-serif;
line-height: 1.4;
background-color: var(--extra-light-gray); /* 在需要指定颜色的位置使用自定义属性值 */
color: var(--text-color);
}
h1,
h2,
h3,
h4 {
font-family: Georgia, serif; /* 设置标题文字 */
}
a {
color: var(--medium-green); /* 在需要指定颜色的位置使用自定义属性值 */
}
a:visited {
color: var(--brand-green); /* 在需要指定颜色的位置使用自定义属性值 */
}
a:hover {
color: var(--brand-green); /* 在需要指定颜色的位置使用自定义属性值 */
}
a:active {
color: var(--red); /* 先为链接元素的激活状态占位，后面再来定义该红色的具体取值 */
}
}
跟前面章节的做法一样，这里也给需要的颜色用上了自定义属性。有了这些变量，后续一旦要修改这些值，就会很省事。我曾参与过一个项目，已经推进到后期了，设计师却决定调整品牌颜色。当时只需要在一个地方改一下变量的值即可，但要是没用变量，那就得把用到这个值的多达 100 多处的代码老老实实改一遍。
本例中我还对激活状态下的链接样式预留了一个占位符，稍后再来确定颜色变量 --red 的值。在此之前，先初步完成页面布局：先把页面涉及的各主要区域放置到恰当的位置，然后在设置部分颜色和字体（如图 11.7 所示）。至于间距先缓缓，暂不做过多处理。
【图 11.7 初步完成布局并添加了初始样式后的页面效果】
我们将从页面顶部开始，分三个部分进行初步调整：页头区域、主图区域以及分三栏展示的主体部分。其间大部分工作都可以复用前面章节介绍过的技术，之后再回过头来认真琢磨页面的微调问题。
首先是页头及其导航条区域。这部分由三个模块组成：nav-container、home-link 和 top-nav，具体样式详见代码清单 11.3。将它们添加到本地样式表。
代码清单 11.3 页头样式代码
@layer modules {
.nav-container {
background-color: var(--medium-green);
}
.nav-container__inner {
display: flex;
justify-content: space-between;
/* 令内容居中，且最大宽度为 1080px */
max-inline-size: 1080px;
margin-inline: auto;
}
.home-link {
color: var(--text-color);
font-size: 1.6rem;
font-family: Georgia, serif;
font-weight: bold;
text-decoration: none;
}
.top-nav {
display: flex; /* 利用弹性布局将导航菜单项水平展布 */
list-style-type: none;
}
.top-nav a {
/* 给各导航链接指定颜色与内边距 */
display: block;
padding: 0.3em 1.25em;
color: var(--white);
background: var(--brand-green);
text-decoration: none;
border-radius: 3px;
}
.top-nav a:hover {
background-color: var(--dark-green);
}
.top-nav__featured > a {
color: var(--brand-green);
background-color: var(--white);
}
.top-nav__featured > a:hover {
color: var(--medium-green);
background-color: var(--white);
}
}
可以看到，整个页头区域都在 nav-container 容器内，并且使用了双容器模式来居中内部元素（相关内容详见第 3 章），这样就能在主体内容受最大宽度约束的同时，让背景色覆盖到页面边缘。而双容器中的内部容器本身就是一个 Flexbox 容器，并且设置了 justify-content: space-between，可将其内部元素分置左右：左侧为 home-link 链接元素，右侧则为 top-nav 顶部导航条。接着再让 top-nav 也使用 Flexbox 布局，让里面的导航菜单项都排成一行；而导航链接的颜色则使用自定义属性进行配置。
页头搞定后，再来看主图区域。该区域的样式包含两个新模，一个用于主图，另一个则留给下方的按钮。具体样式详见代码清单 11.4。同样将它们添加到本地样式表。
代码清单 11.4 主图及其下方按钮的样式代码
@layer modules {
.hero {
background: url(collaboration.jpg) no-repeat;
background-size: cover;
margin-block-end: 40px;
}
.hero__inner {
/* 双容器模式 */
max-inline-size: 1080px;
margin-inline: auto;
padding-block: 50px 200px; /* 简单通过内边距来定位标语和按钮 */
text-align: end;
}
.hero h2 {
font-size: 1.95rem;
}
.button {
display: inline-block;
/* 标准按钮样式 */
padding: 0.4em 1em;
color: var(--brand-green);
border: 2px solid var(--brand-green);
border-radius: 0.2em;
text-decoration: none;
font-size: 1rem;
}
.button:hover {
background-color: var(--dark-green);
color: var(--white);
}
.button--cta {
/* CTA 按钮的变体样式 */
padding: 0.6em 1em;
background-color: var(--brand-green);
color: var(--white);
border: none;
}
}
与页头类似，主图区域也使用了双容器模式。其内部容器还设置了一些内边距，其大小目前只能粗略估计。本章会把所有页面元素放置到合适的位置；下一章我们再回过头来，看看如果精确匹配设计师的视觉稿会遇到哪些关键问题。
我们还定义了一个按钮模块，默认的外观是一个带绿色边框和文字的白底按钮。页面主体部分底部使用的按钮就是该默认样式。此外我们还为按钮定义了一个 CTA 变体，用的是纯绿色背景、白色文字（之前解释过，CTA 即 “Call To Action” 的缩写，是一个针对核心元素的营销术语，旨在引导用户交互行为。在本例中，CTA 按钮即醒目的 “Get Started” 开始按钮）。最后一步，是给页面下方的三栏主体部分添加样式，如图 11.8 所示。
【图 11.8 页面主区域的初步样式】
页面主体部分由一下几部分组成：限制了最大宽度的容器、控制三栏布局的 title-row 以及各分栏内的白色板块区域 tile。将代码清单 11.5 中的代码添加到样式表，其中也包含了页脚的样式。因为之前添加过按钮样式，所以不需要再考虑这些内容了。
代码清单 11.5 三个内容分栏及对应板块的样式
.container {
margin-inline: auto;
max-inline-size: 1080px; /* 和页面其他部分一样，令最大宽度为 1080px */
}
.tile-row {
display: flex;
}
.tile-row > * { /* 令各内容栏宽度相等 */
flex: 1;
}
.tile {
background-color: var(--white);
border-radius: 0.3em;
}
.page-footer {
margin-block-start: 3em;
padding-block: 1em;
background-color: var(--light-gray);
color: var(--gray);
}
.page-footer__inner {
margin-inline: auto;
max-inline-size: 1080px; /* 和页面其他部分一样，令最大宽度为 1080px */
text-align: center;
font-size: 0.8rem;
}
可以看到，这里的样式再次用到了双容器模式，并将宽度限制在 1080px 以内。同时为 tile 板块区域设置了白色背景与圆角边框。
页脚部分也应用了对比，不同的是，这里并非为了吸引注意力，而是淡化注意力。该部分设置了浅灰色背景，并且使用了小号字和灰色文本。因为页脚是整个页面最不重要的内容，所以无需制造视觉上的冲突。使用让人容器忽视的配色就仿佛在告诉用户：“页面的这部分内容可能并非您要找的”。
（上篇完）
关于《CSS in Depth》（中译本书名《深入解析 CSS》）
| 第 1 版 | 第 2 版 | |
|---|---|---|
| 读者评分 | 原版：4.7（亚马逊）；中文版：9.3（豆瓣） | 原版：5.0（亚马逊）；中文版：暂无，待出版 |
| 出版时间 | 原版：2018 年 3 月；中文版：2020 年 4 月 | 原版：2024 年 7 月；中文版：暂无，待出版 |
| 原价 | 原版：$44.99；中文版：￥139.00 | 原版：$59.99；中文版：暂无，待出版 |
| 现价 | 原版：$36.49；中文版：￥52.54 起步 | 原版：$52.09；中文版：暂无，待出版 |
| 原版国内预订 | 起步价 ￥461.00 | 起步价 ￥750.00 |
本专栏为该书第 2 版高分译文专栏，全网首发，精译精校，持续更新，计划今年内完成全书翻译，敬请期待！！！
目前已完结的章节（可进入本专栏查看详情，连载期间完全免费）：
- 第一章 层叠、优先级与继承（已完结）
- 1.1 层叠
- 1.2 继承
- 1.3 特殊值
- 1.4 简写属性
- 1.5 CSS 渐进式增强技术
- 1.6 本章小结
- 第二章 相对单位（已完结）
- 2.1 相对单位的威力
- 2.2 em 与 rem
- 2.3 告别像素思维
- 2.4 视口的相对单位
- 2.5 无单位的数值与行高
- 2.6 自定义属性
- 2.7 本章小结
- 第三章 文档流与盒模型（已完结）
- 3.1 常规文档流
- 3.2 盒模型
- 3.3 元素的高度
- 3.4 负的外边距
- 3.5 外边距折叠
- 3.6 容器内的元素间距问题
- 3.7 本章小结
- 第四章 Flexbox 布局（已完结）
- 4.1 Flexbox 布局原理
- 4.2 弹性子元素的大小
- 4.3 弹性布局的方向
- 4.4 对齐、间距等细节处
- 4.5 本章小结
- 第五章 网格布局（已完结）
- 5.1 构建基础网格
- 5.2 网格结构剖析 （上）
- 5.2.1 网格线的编号（下）
- 5.2.2 网格与 Flexbox 配合（下）
- 5.3 两种替代语法
- 5.3.1 命名网格线
- 5.3.2 命名网格区域
- 5.4 显式网格与隐式网格（上）
- 5.4.1 添加变化 （中）
- 5.4.2 让网格元素填满网格轨道（下）
- 5.5 子网格（全新增补内容）
- 5.6 对齐相关的属性
- 5.7 本章小结
- 第六章 定位与堆叠上下文（已完结）
- 6.1 固定定位
- 6.1.1 创建一个固定定位的模态对话框
- 6.1.2 在模态对话框打开时防止屏幕滚动
- 6.1.3 控制定位元素的大小
- 6.2 绝对定位
- 6.2.1 关闭按钮的绝对定位
- 6.2.2 伪元素的定位问题
- 6.3 相对定位
- 6.3.1 创建下拉菜单（上）
- 6.3.2 创建 CSS 三角形（下）
- 6.4 堆叠上下文与 z-index
- 6.4.1 理解渲染过程与堆叠顺序（上）
- 6.4.2 用 z-index 控制堆叠顺序（上）
- 6.4.3 深入理解堆叠上下文（下）
- 6.5 粘性定位
- 6.6 本章小结
- 第七章 响应式设计（已完结）
- 7.1 移动端优先设计原则（上篇）
- 7.1.1 创建移动端菜单（下篇）
- 7.1.2 给视口添加 meta 标签（下篇）
- 7.2 媒体查询（上篇）
- 7.2.1 深入理解媒体查询的类型（上篇）
- 7.2.2 页面断点的添加（中篇）
- 7.2.3 响应式列的添加（下篇）
- 7.3 流式布局
- 7.4 响应式图片
- 7.5 本章小结
- 第八章 层叠图层及其嵌套
- 8.1 用 layer 图层来操控层叠规则（上篇）
- 8.1.1 图层的定义（上篇）
- 8.1.2 图层的顺序与优先级（下篇）
- 8.1.3 revert-layer 关键字（下篇）
- 8.2 层叠图层的推荐组织方案
- 8.3 伪类 :is() 和 :where() 的用法
- 8.4 CSS 嵌套的使用
- 8.4.1 嵌套选择器的使用
- 8.4.2 深入理解嵌套选择器
- 8.4.3 媒体查询及其他 @规则 的嵌套
- 8.5 本章小结
- 第九章 CSS 的模块化与作用域
- 9.1 模块的定义
- 9.1.1 模块和全局样式
- 9.1.2 一个简单的 CSS 模块
- 9.1.3 模块的变体
- 9.1.4 多元素模块
- 9.2 将模块组合为更大的结构
- 9.2.1 模块中多个职责的拆分
- 9.2.2 模块的命名
- 9.3 CSS 的作用域
- 9.3.1 CSS 作用域的就近原则
- 9.3.2 划定作用域的边界
- 9.3.3 CSS 中的隐式作用域
- 9.3.4 关于 CSS 作用域与层叠图层
- 9.4 CSS 模式库
- 9.5 本章小结
- 第十章 CSS 容器查询
- 10.1 容器查询的一个简单示例
- 10.1.1 容器尺寸查询的用法
- 10.2 深入理解容器
- 10.2.1 容器的类型
- 10.2.2 容器的名称
- 10.2.3 容器与模块化 CSS
- 10.3 与容器相关的单位
- 10.4 容器样式查询的用法
- 10.4.1 将模块与所在容器解耦
- 10.4.2 减少重复代码
- 10.5 本章小结
- 附录
- 附录A：CSS 选择器参考
- 附录B：CSS 预处理器简介
原文地址：https://blog.csdn.net/frgod/article/details/144227118
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！