肉渣教程

CSS 文本

上一节 下一节

CSS中可以设置文本的颜色、对齐方式、划线方式、大小写、首行缩进、字间距、行高、文本方向、词距、文本阴影等属性。

文本颜色 Color

CSS中的color属性可以用来定义文本颜色;其取值如下:

  • 颜色名 - 诸如“red”、“black”等
  • Hex - 16进制色彩,诸如“#46acb6”
  • RGB - 以rgb的形式取值方式,诸如“rgb(255,0,0)”

更多取值方式,可参考CSS颜色

body {
    color: LightGray;
}

h1 {
    color: #46acb6;
}

运行一下

文本对齐方式 Align

CSS中的text-align用来定义文本元素水平层面上的对齐方向,一般分为左对齐(left)、右对齐(right)、居中(center)、两端对齐(justify)。

h1 {
    text-align: center;
}

h2 {
    text-align: left;
}

h3 {
    text-align: right;
}

运行一下


如下例所示,表示的是两端对齐(justify),即文本的每行宽度保持同样的宽度,一般适用于报纸类的文本排版。

div {
    text-align: justify;
}

运行一下

文本装饰 Decoration (划线方式)

CSS中的text-decoration属性是用来定义文本装饰方式,实际上就是让该文本的划线样式:上划线(overline)、中划线(line-through)、下划线(underline)抑或是不被划线(none)。

默认情况下,a元素定义的链接元素都会有下划线,如果想去除默认的下划线,可以通过把text-decoration属性设置成none取值以达到去除默认下划线的功效。如下例所示:

a {
    text-decoration: none;
}

运行一下


上划线、中划线、下划线的案例如下:

h1 {
    text-decoration: overline;
}

h2 {
    text-decoration: line-through;
}

h3 {
    text-decoration: underline;
}

运行一下

文本字母大小写样式

CSS中的text-transform属性,可以控制文本元素中的字母的大小写样式,取值如下:

  • uppercase - 全部字母转为大写字母
  • lowercase - 全部字母转为小写字母
  • capitalize - 所有单词首字母自动大写
p.uppercase {
    text-transform: uppercase;
}

p.lowercase {
    text-transform: lowercase;
}

p.capitalize {
    text-transform: capitalize;
}

运行一下

文本首行缩进 Indent

CSS中的text-indent属性是用来定义文本首行缩进距离。如下例所示:

p {
    text-indent: 256px;
}

运行一下

文本字符间距

CSS中的letter-spacing可用来定义文本的字符间距,如下例所示:

h1 {
    letter-spacing: 3px;
}

h2 {
    letter-spacing: -3px;
}

运行一下

行高 line-height

CSS中的line-height属性可用来定义文本的行高。行高的取值如下:

  • 具体的数值加单位 - 譬如36px这种形式
  • 表示百分百的数字,但习惯上并不用%,而是用实数来表示 - 比如1.2代表1.2倍行高
p.small {
    line-height: 0.7;
}

p.big {
    line-height: 1.8;
}

运行一下


友情提示:line-height属性使用实数取值时,比如0.8代表0.8倍行高,这里的0.8倍不是针对外部容器的高度,而是针对该文本元素本身而言。

文本方向 Direction

CSS中的direction属性可以定义文字的方向,该属性可取值:

  • rtl - right to left的缩写,即文本方向是从右向左
  • ltr - left to right的缩写,即文本方向是从左到右
p {
    direction: rtl;
}

运行一下

词距 word-spacing

CSS中的word-spacing属性可以用来定义文本中单词之间的距离,该属性主要是针对拉丁字母构成的文本。试试下面的例子吧~

h1 {
    word-spacing: 24px;
}

h2 {
    word-spacing: -12px;
}

运行一下

文本阴影 text-shadow

CSS中的text-shadow可以设置文本的阴影,如下例所示:

h1 {
    text-shadow: 3px 2px #46acb6;
}

运行一下

让文本不会断行

如果想强制一段文本不会换行,可以如下例所示:

div {
    white-space: nowrap;
}

运行一下


CSS 文本

上一节 下一节