HTML & CSS 视觉设计

文本 Text文本对齐 Text Align

web 内容大部分都是文本。 CSS 里面的 ​​text-align​​ 属性可以控制文本的对齐方式。

text-align: justify; 将文本隔开，使每行的宽度相等。
text-align: center; 可以让文本居中对齐。
text-align: right; 可以让文本右对齐。
text-align: left; 是默认值，它可以让文本左对齐

加粗 Bold

使用 ​​strong​​ 标签来加粗文字。 粗体文字一般用来吸引读者注意或用来表示强调。

使用 ​​font-weight ​​来加粗文字。

<strong></strong>

font-weight: bold;
font-weight: XX px;

下划线 Underline

使用 ​​u​​ 标签来给文字添加下划线。 下划线通常用来表示重要内容或需要记忆的内容。

使用 ​​text-decoration: underline​​ 标签来给文字添加下划线。

如果使用 ​​u​​ 标签添加下划线，可能混淆文本和链接，则应避免使用它。 超链接标签也有默认的下划线格式。

<u></u>

text-decoration: underline;

强调/斜体 Italic

使用 ​​em​​ 标签来强调文本，使用 ​​i​​ 斜体文本。

使用 ​​font-style: italic​​ 标签来强调文本。

强调和斜体的效果一样，但是含义不同。前者强调标签中包含的文本，后者突出技术术语，标题或者来自另一语言的短语。

<em></em>
<i></i>

font-style: italic;

大小写 Upper/Lowercase

CSS 里的 ​​text-transform​​ 属性可以改变英文字母的大小写。 使用这个属性时，无需改变 HTML 元素中的文本也可以统一页面里英文的显示。

下面的表格展示了 ​​text-transform​​ 的不同值对文字 “Transform me” 的影响：

值

结果

​​lowercase​​

"transform me"

​​uppercase​​

"TRANSFORM ME"

​​capitalize​​

"Transform Me"

​​initial​​

使用默认值

​​inherit​​

使用父元素的 ​​text-transform​​值。

​​none​​

**Default:**不改变文字。

text-transform: uppercase;

上下标 Super/Subscript

使用​​sup​​和​​sub​​表示上下标，在表示公式时有用。

<sup></sup>
<sub></sub>

---

线条 Line删除线 Strikethrough

用 ​​s​​ 标签来给文字添加删除线。 删除线是位于文字水平中央的一条线，它代表着一段文字不再有效。

用 ​​text-decoration: line-through​​ 标签来给文字添加删除线。

<s></s>

text-decoration: line-through;

水平线 Horizontal Line

用 ​​hr​​ 标签来创建一条宽度撑满父元素的水平线。 这种水平分割线一般用来表示内容主题的改变，或在视觉上将文档分隔成几个部分。

HTML 中的 ​​hr​​ 是自闭合标签。

<hr>

---

行 Row换行 Wrap

用​​br​​标签来换行。 HTML 中的 ​​br​​ 是自闭合标签。

<br>

行高 Line Height

CSS 提供 ​​line-height​​ 属性来设置行间的距离。 行高，顾名思义，可以用来设置每行文字所占据的垂直空间。

line-height: 25px;

---

阴影 Shadow

​​box-shadow​​ 属性用来给元素添加阴影，该属性值是由逗号分隔的一个或多个阴影列表。

​​box-shadow​​ 属性的阴影依次由下面这些值描述：

​​offset-x​​ 阴影的水平偏移量；​​offset-y​​ 阴影的垂直偏移量；​​blur-radius​​ 模糊半径；​​spread-radius​​ 阴影扩展半径；​​color​​ 颜色

其中 ​​blur-radius​​ 和 ​​spread-radius​​ 是可选的。

可以通过逗号分隔每个 ​​box-shadow​​ 元素的属性来添加多个 box-shadow。

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

---

透明度 Transparency

CSS 里的 ​​opacity​​ 属性用来设置元素的透明度。

属性值为 1 代表完全不透明。 属性值为 0.5 代表半透明。 属性值为 0 代表完全透明。

透明度会应用到元素内的所有内容，不论是图片，还是文本，或是背景色。

opacity: 0.7;

---

超链接 Anchor

可以使用 ​​a:hover​​ 伪类选择器来选取超链接的悬停状态。

a:hover {
  color: blue;
}

---

位置 Position相对定位 Relative

在 CSS 里一切 HTML 元素皆为盒子，也就是通常所说的盒模型。 块级元素自动从新的一行开始（比如标题、段落以及 div），行内元素排列在上一个元素后（比如图片以及 span）。 元素默认按照这种方式布局称为文档的普通流，同时 CSS 提供了 position 属性来覆盖它。

当元素的定位设置为 ​​relative​​时，它允许通过 CSS 指定该元素在当前文档流页面下的相对 偏移量。 CSS 里控制各个方向偏移量的属性是 ​​left​​、​​right​​、​​top​​ 和 ​​bottom​​。 它们代表从原来位置向远离该方向偏移 指定的像素、百分比或者 em。

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

把元素的位置设置成相对，并不会改变该元素在布局中所占的位置，也不会对其它元素的位置产生影响。

CSS 里面的 ​​top​​、​​bottom​​、​​left​​和 ​​right​​ 定义了元素在相应方位的偏移距离。 元素将从当前位置向属性相反的方向偏移。

绝对定位 Absolute

CSS ​​position​​ 属性的取值选项 ​​absolute​​，它的含义是相对于其包含块定位。 和 ​​relative​​ 定位不一样，绝对定位会将元素从当前的文档流里面移除，周围的元素会忽略它。 这样就可以用 CSS 的 top、bottom、left、right 属性来调整元素的位置。

绝对定位比较特殊的一点是元素的定位参照于最近的 positioned 祖先元素。 如果它的父元素没有添加定位规则（默认是 ​​position: relative;​​），浏览器会继续寻找直到默认的 ​​body​​ 标签。

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

固定定位 Fixed

​​fixed​​ 定位，它是一种特殊的绝对（absolute）定位，将元素相对于浏览器窗口定位。 类似于绝对位置，它与 CSS 偏移属性一起使用，并且也会将元素从当前的文档流里面移除。 其它元素会忽略它的存在，这样也许需要调整其他位置的布局。

但 ​​fixed​​ 和 ​​absolute​​ 的最明显的区别在于，前者定位的元素不会随着屏幕滚动而移动。

position: fixed;
top: 0;
left: 0;

浮动 Float

通过元素的 ​​float​​ 属性来设置。 浮动元素不在文档流中，它向 ​​left​​ 或 ​​right​​ 浮动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。 通常需要用 ​​width​​ 属性来指定浮动元素占据的水平空间。

.card1 {
  float: left;
  width: 50%;
}
.card2 {
  float: right;
  width: 50%;
}

元素重叠 Overlapping

当一些元素在位置上重叠时（例如，使用 ​​position: absolute | relative | fixed | sticky​​时），在 HTML 里后出现的元素会默认显示在更早出现的元素的上面。 可以使用 ​​z-index​​ 属性指定元素的堆叠次序。 ​​z-index​​ 的取值是整数，数值大的元素会叠放到数值小的元素上面。

z-index: 2;

元素水平居中 Center

在应用设计中经常需要把一个块级元素水平居中显示。 一种常见的实现方式是把块级元素的 ​​margin​​ 值设置为 auto（前提要设定元素的宽度 width）。

同样的，这个方法也对图片奏效。 图片默认是内联元素，但是可以通过设置其 ​​display​​ 属性为 ​​block​​来把它变成块级元素。

width: 100px;
margin: auto;

---

渐变 Gradient

HTML 元素的背景色并不局限于单色。 CSS 还为提供了颜色渐变。 可通过 ​​background​​ 里的 ​​linear-gradient()​​ 实现线性渐变。

background: linear-gradient(gradient_direction, color 1, color 2, color 3, ...);

第一个参数指定了颜色过渡的方向——它的值是角度，​​90deg​​ 表示垂直渐变（从左到右），​​45deg​​ 表示沿对角线渐变（从左下方到右上方）。 其他参数指定了渐变颜色的顺序：

background: linear-gradient(90deg, red, yellow, rgb(204, 204, 255));

​​repeating-linear-gradient()​​函数和 ​​linear-gradient()​​ 很像，主要区别是前者会重复指定的渐变。 ​​repeating-linear-gradient()​​ 有很多参数，为了便于理解，只用到角度值和色标。角度就是渐变的方向。 色标代表渐变颜色及发生渐变的位置，由百分比或者像素值表示。

下面的代码可以帮助理解成对的起止渐变颜色值是如何过渡的。

0px [yellow -- blend -- blue] 40px [green -- blend -- red] 80px

如果每对起止渐变颜色值的颜色都是相同的，由于是在两个相同的颜色间过渡，那么中间的过渡色也为同色，接着就是同色的过渡色和下一个起止颜色，最终产生的效果就是条纹。

---

背景图

​​background​​ 属性支持使用 ​​url()​​ 函数作为属性值，这让我们可以通过链接的方式引入纹理或样式的图片。 图片链接的地址应写在括号内，一般会用引号包起来。

background: url("/news/upload/ueditor/image/202209/aspe3p5bltu.png");

---

元素大小 Scale

CSS 属性 ​​transform​​ 里面的 ​​scale()​​ 函数可以用来改变元素的显示比例。

p {
  transform: scale(1.5);
}

​​transform​​ 属性有很多函数可以调用，可以对元素进行调整大小、移动、旋转、翻转等操作。 当使用伪类选取元素的指定状态（如 ​​:hover​​）时，可以通过 ​​transform​​ 属性非常方便地给元素添加交互。

p:hover {
  transform: scale(1.1);
}

​​transform​​ 属性 ​​skewX()​​：它使选择的元素沿着 X 轴（横向）倾斜指定的角度。

transform: skewX(24deg);

​​skewY​​ 属性使指定元素沿 Y 轴（垂直方向）翻转指定角度。

transform: skewY(24deg);

---

动画&关键帧 Animation&Keyframes

​​animation​​ 属性控制动画，​​@keyframes​​规则控制动画中各阶段的变化。 总共有 8 个 animation 属性。

​​animation-name​​ 用来设置动画的名称。​​animation-duration​​ 设置动画显示的时间。

​​@keyframes​​ 可以通过设置特定时间点的行为来创建动画。 为此，只需要给持续时间内的特定帧（从 0% 到 100%）加上 CSS 规则。

#rect {
  animation-name: rainbow;
  animation-duration: 4s;
}
@keyframes rainbow {
    0% {
      background-color: blue;
  }
    50% {
      background-color: green;
  }
    100% {
      background-color: yellow;
  }
}

​​animation-fill-mode​​ 指定了在动画结束时元素的样式.

animation-fill-mode: forwards;

​​animation-iteration-count​​，这个属性控制动画循环的次数。如果想让动画一直运行，可以把值设置成 ​​infinite​​。

animation-iteration-count: 3;

​​animation-timing-function​​ 用来定义动画的速度曲线。 速度曲线决定了动画从一套 CSS 样式变为另一套所用的时间。 如果要描述的动画是一辆车在指定时间内（​​animation-duration​​）从 A 运动到 B，那么 ​​animation-timing-function​​ 表述的就是车在运动中的加速和减速等过程。有一些预定义的关键字可用于常见的选项。 比如，默认值是 ​​ease​​，动画以低速开始，然后加快，在结束前变慢。 其它常用的值包括 ​​ease-out​​：动画以高速开始，以低速结束；​​ease-in​​，动画以低速开始，以高速结束；​​linear​​：动画从头到尾的速度是相同的。

---

贝塞尔曲线 Bezier Curve

在 CSS 动画里，用 ​​cubic-bezier​​ 来定义贝塞尔曲线。 曲线的形状代表了动画的速度。 曲线在 1 * 1 的坐标系统内， 其中 X 轴代表动画的时间间隔（类似于时间比例尺），Y 轴代表动画的改变。

​​cubic-bezier​​ 函数包含了 1 * 1 网格里的4个点：​​p0​​、​​p1​​、​​p2​​、​​p3​​。 其中 ​​p0​​ 和 ​​p3​​ 是固定值，代表曲线的起始点和结束点，坐标值依次为 (0, 0) 和 (1, 1)。 你只需设置另外两点的 x 值和 y 值，设置的这两点确定了曲线的形状从而确定了动画的速度曲线。 在 CSS 里面通过 ​​(x1, y1, x2, y2)​​ 来确定 ​​p1​​ 和 ​​p2​​。 以下就是 CSS 贝塞尔曲线的例子：

animation-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);

---

对齐 Align文本对齐

见第一标题文本下对齐子标题。

HTML 元素对齐

HTML 元素对齐需要考虑盒子模型和文档流。

居中对齐

对于块级元素：

先给元素设定宽度，然后推外边距至充满父元素的可用空间。

<div class="parent">
  <div class="child">
  </div>
</div>

通过设置边距把父元素的空间可视化：

.parent {
  border: 5px solid red;
}

把子元素的宽度设置为父元素的 50%，给一定的内边矩（把元素变为空心）和边框（为了可视化），为了居中子元素，把外边距设置为 ​​auto​​ ，该属性告诉浏览器根据可用空间自动计算外边距：

.child {
  width: 50%;
  padding: 20px;
  border: 4px solid green;
  margin: auto;
}

对于行内元素，需要先把其变为块级元素，然后应用相同的方式：

.child {
  display: block;
  border: 4px dashed blue;
  margin: auto;
}

左右对齐

常用方式是使用 ​​float​​ 属性或者 ​​position​​ 属性。

​​float​​ 属性设置元素位置相对于其父元素的文本内容。文本会包住子元素。

右对齐：

<div class="parent">
  <img src="logo.png" class="child">Lorem
</div>

.child {
  float: right;
}

注意文本内容在 img 元素之后，此时图片的右部和顶部是挨着屏幕的，如果文本内容在图片之前，那么图片的顶部会挨着文本。