CSS排版设计

在下不才
254 阅读6分钟

原文链接：flaviocopes.com/css-typogra…

**如何在CSS中使用排版设计 **

在这篇文章中，我将谈谈用CSS对文本进行造型，使用以下属性：

  • text-transform
  • text-decoration
  • text-align
  • vertical-align
  • line-height
  • text-indent
  • text-align-last
  • word-spacing
  • letter-spacing
  • text-shadow
  • white-space
  • tab-size
  • writing-mode
  • hyphens
  • text-orientation
  • direction
  • line-break
  • word-break
  • overflow-wrap

text-transform

这个属性可以转换元素的大小写 。

有4个有效值。

  • capitalize 将每个单词的第一个字母大写。
  • uppercase 大写所有的文本
  • lowercase 将所有文本小写
  • none 禁用文本转换，用于避免继承该属性。

示例：

p {
  text-transform: uppercase;
}

text-decoration

此属性用于向文本添加装饰，包括：

有4个有效值。

  • underline
  • overline
  • line-through
  • blink
  • none

示例：

p {
  text-decoration: underline;
}

你还可以设置装饰的样式和颜色

示例：

p {
  text-decoration: underline dashed yellow;
}

有效的样式值是 solid, double, dotted, dashed, wavy 。

你可以在一行中完成，或使用特定属性：

  • text-decoration-line
  • text-decoration-color
  • text-decoration-style

示例：

p {
  text-decoration-line: underline;
  text-decoration-color: yellow;
  text-decoration-style: dashed;
}

text-align

默认情况下，text-align是start值，意味着文本从包含它的盒子的 "起始"，原点0，0开始。这意味着在从左到右的语言中是左上角，在从右到左的语言中是右上角。

可能的值是 start, end, left, right, center, justify （ 在行结束处有一致的间距很好 ）。

p {
  text-align: right;
}

vertical-align

确定内联元素如何垂直对齐。

这个属性有几个值。首先，我们可以指定一个长度或百分比值。这些都是用来对齐文本的位置，比父元素的基线高或低（使用负值）。

然后是关键词：

  • baseline （默认值）, 将基线与父元素的基线对齐
  • sub 使元素对齐下标，模拟HTML元素的下标结果
  • super 使元素对齐上标，模拟HTML元素的上标结果
  • top 将元素的顶部与线条的顶部对齐
  • text-top 将元素的顶部与父元素的顶部对齐
  • middle 将元素的中间与父元素所在行的中间对齐
  • bottom 将元素的底部与线条的底部对齐
  • text-bottom 将元素的底部与父元素字体的底部对齐

line-height

这允许你改变一条线的高度。每行文本都有一定的字体高度，但行与行之间有额外的垂直间距。这是行高：

p {
  line-height: 0.9rem;
}

text-indent

缩进段落的第一行，按设定的长度或段落宽度的百分比缩进：

p {
  text-indent: -10px;
}

text-align-last

默认情况下，段落的最后一行是按照文本对齐值对齐的。使用此属性可更改该行为：

p {
  text-align-last: right;
}

word-spacing

修改每个单词之间的空格。

你可以使用normal关键字来重置继承的值，或者使用长度值：

p {
  word-spacing: 2px;
}

span {
  word-spacing: -0.2em;
}

letter-spacing

修改每个字母之间的间距。

你可以使用normal关键字来重置继承的值，或者使用长度值

p {
  letter-spacing: 0.2px;
}

span {
  letter-spacing: -0.2em;
}

text-shadow

将阴影应用于文本。默认情况下，文本现在有阴影。

此属性接受可选颜色，以及有一组值可以设置

  • 来自文本的阴影的x偏移量

  • 来自文本的阴影的y偏移

  • 模糊半径

如果未指定颜色，则阴影将使用文本颜色。

示例：

p {
  text-shadow: 0.2px 2px;
}

span {
  text-shadow: yellow 0.2px 2px 3px;
}

white-space

设置CSS如何处理元素内部的空白、新行和制表符。

折叠留白的有效值为：

  • normal 折叠白色空间。当文本到达容器末端时，必要时添加新的行
  • nowrap 折叠白色空间。当文本到达容器的末尾时，不添加新的一行，并抑制任何添加到文本的换行。
  • pre-line 折叠白色空间。当文本到达容器末端时，必要时添加新的行。

保留空白的有效值为：

  • pre 保留留白。当文本到达容器的末端时，不添加新的一行，但保留添加到文本中的换行符。
  • pre-wrap 保留留白。当文本到达容器末端时，必要时添加新的行。

tab-size

设置制表符的宽度。默认情况下是8，您可以设置一个整数值来设置它所使用的字符空间，或者设置一个长度值。

p {
  tab-size: 2;
}

span {
  tab-size: 4px;
}

writing-mode

定义文本行是水平布局还是垂直布局，以及块的进展方向。

你可以使用的值是：

  • horizontal-tb (默认值)
  • vertical-rl 内容是垂直排列的。新行被放在前一行的左边。
  • vertical-lr 内容是垂直排列的。新行被放在前一行的右边。

hyphens

确定当转到新行时是否应该自动添加连字符。

有效的值是：

  • none (默认值)
  • manual 只有在已经有一个可见的连字符或一个隐藏的连字符（一个特殊字符）的情况下才添加连字符。
  • auto 当确定文本可以使用连字符时，添加连字符。

text-orientation

当 writing-mode 为垂直模式时，决定了文本的方向 。

有效的值是：

  • mixed 是默认的，如果一种语言是垂直的（如日语），它就会保留这个方向，而用西方语言书写的文本则会旋转。
  • upright 使所有文本垂直方向 。
  • sideways 使所有文本水平方向。

direction

设置文本的方向。有效值为 ltr 和 rtl ：

p {
  direction: rtl;
}

word-break

此属性指定如何在单词中断行。

  • normal (默认值) 意思是文本只是被分隔在单词之间，而不是一个单词里面
  • break-all 浏览器可以拆分单词(但不添加连字符)
  • keep-all 抑制软连接。主要用于CJK（中文/日语/韩语）文本。

说到中日韩文本，属性 line-break 是用来决定文本行如何断开的。我不是这些语言的专家，所以我将避免涉及它。

overflow-wrap

如果一个单词太长而不能容纳一行，它就会溢出到容器外。

这个属性也被称为 word-wrap，尽管这是非标准的（但仍然可以作为一个别名）。

这是默认用法（overflow-wrap: normal;）。

我们可以这样使用：

p {
  overflow-wrap: break-word;
}

按照线的长度把它折断，或者

p {
  overflow-wrap: anywhere;
}

如果浏览器看到前面有一个软连接的机会，就会把它关掉。在任何情况下，都不会添加连字符。

这个属性与 word-break 非常相似。我们可能想在西方语言上选择这个，而 word-break 对非西方语言有特殊处理。

请看我最新的YouTube视频!

下载我的免费CSS手册!

avatar
文章
阅读
粉丝