06 CSS 文本

5/12/2021 html

CSS Fonts - CSS(层叠样式表) | MDN (opens new window)

为文本添加样式(样式化文本) - 学习 Web 开发 | MDN (opens new window)

基本文本和字体样式 - 学习 Web 开发 | MDN (opens new window)

  • 1 font-size: 字号(px/%)
  • 2 font-family: 字体
  • 3 font-style: 文字样式(normal/italic/oblique)
  • 4 font-weight: 文字加粗(normal/bold/bolder/lighter/100-900)
  • 5 line-height: 行高(px/数字/em等)
  • 6 color: 文字的颜色(颜色的单词/rgb()->r:0-255,g:0-255,b-0-255/16进制(以#开头,后跟6位(#rrggbb)或3位(#rgb)16进制数)
  • 7 text-decoration: 文字修饰(none/underline/overline/line-through)
  • 8 text-align: 文本对齐方式(left/right/center)
  • 9 text-transform: 字母大小写(capitalize/uppercase/lowercase/none)
  • 10 text-indent: 文本缩进(px/em/%/pt等)

# font-size

font-size : 设置文本大小。

属性值

{number+px} :固定值尺寸像素 {number+%} :其百分比取值是基于父对象中字体的尺寸大小。

示例

p { font-size: 20px; }
p { font-size: 100%; }

# font-family

font-family : 设置文本字体。

属性值

name: 字体名称,按优先顺序排列,以逗号隔开。如果字体名称包含空格,则应使用引号括起。

示例:

p { font-family: Courier, "Courier New", monospace; }

# font-style

font-style : 设置文本字体的样式

属性值

  • normal :默认值。正常的字体。
  • italic :斜体。对于没有斜体变量的特殊字体,将应用 oblique。
  • oblique :倾斜的字体。
p { font-style: normal; }
p { font-style: italic; }
p { font-style: oblique; }

# font-weight

font-weight : 设置文本字体的粗细

属性值

  • normal :默认值,正常的字体。
  • bold :粗体。
  • bolder : 比 bold 粗。
  • lighter : 比 normal 细。
  • {100-900} :定义由粗到细的字符。400 等同于 normal,而 700 等同于 bold。
p { font-weight: normal; }
p { font-weight: bold; }
p { font-weight: 600; }

# color

color : 设置文本字体的颜色。

属性值

  • name :颜色名称指定 color。
  • rgb :指定颜色为RGB值。
  • {颜色16进制} :指定颜色为16进制。
p { color: red; }
p { color: rgb(100,14,200); }
p { color: #345678; }

# line-height

line-height : 设置文本字体的行高。即字体最底端与字体内部顶端之间的距离。

属性值

  • normal :默认值,默认行高。
  • {number+px} :指定行高为长度像素。
  • {number} : 指定行高为字体大小的倍数。
p { line-height: normal; }
p { line-height: 24px; }
p { line-height: 1.5; }

# text-decoration

text-decoration : 设置文本字体的修饰。

属性值

  • normal :默认值,无修饰。
  • underline :下划线。
  • line-through : 贯穿线。
  • overline : 上划线。
p { text-decoration: underline; }
p { text-decoration: line-through; }
p { text-decoration: overline; }

# text-align

text-align : 设置文本字体的对齐方式。

属性值

  • left :默认值,左对齐。
  • center :居中对齐。
  • right : 右对齐。
p { text-align: left; }
p { text-align: center; }
p { text-align: right; }

# text-transform

text-transform : 设置文本字体的大小写

属性值

  • none :默认值(无转换发生)。
  • capitalize :将每个单词的第一个字母转换成大写。
  • uppercase : 转换成大写。
  • lowercase : 转换成小写。
p { text-transform: capitalize; }
p { text-transform: uppercase; }
p { text-transform: lowercase; }

# text-indent

text-indent : 设置文本字体的首行缩进。

属性值

  • {number+px} :首行缩进number 像素。
  • {number+em} :首行缩进number 字符。
p { text-indent: 24px; }
p { text-indent: 2em; }

# font 复合属性:

font: font-style font-variant font-weight font-size/line-height font-family;

注意:

  • 1 属性值的位置顺序
  • 2 除了font-size和font-family之外,其它任何一个属性值都可以省略
  • 3 font-variant:normal/small-caps(让大写字母变得小一些)
p {
    font: italic small-caps bolder 18px/1.5 宋体;
    font: 18px 宋体;
}
更新时间: Wednesday, May 12, 2021 23:10