文本颜色

color属性用于设置文本颜色,颜色由以下值确定:

  • 颜色名 - “red”
  • 十六进制 - “#ff0000”
  • RGB值 - “rgb(255,0,0)”
1
2
3
4
5
6
7
body {
color: blue;
}

h1 {
color: green;
}

文本背景色

background-color属性设置文本背景颜色。

1
2
3
4
5
6
7
8
9
body {
background-color: lightgrey;
color: blue;
}

h1 {
background-color: black;
color: white;
}

文本对齐

text-align属性设置文本水平对齐方式。

文本可以左对齐、右对齐或居中对齐。

1
2
3
4
5
6
7
8
9
10
11
h1 {
text-align: center;
}

h2 {
text-align: left;
}

h3 {
text-align: right;
}

此外,还有属性还有justify值,拉伸每一行,使每行具有相等的宽度。

1
2
3
div {
text-align: justify;
}

文本方向

directionunicode-bidi属性可用于更改元素的文本方向

1
2
3
4
p {
direction: rtl;
unicode-bidi: bidi-override;
}

垂直对齐

vertical-align属性设置元素的垂直对齐方式。

1
2
3
4
5
6
7
8
9
10
11
img.top {
vertical-align: top;
}

img.middle {
vertical-align: middle;
}

img.bottom {
vertical-align: bottom;
}

文字装饰

text-decoration属性用于设置或删除文本装饰。

text-decoration: none; 通常用于从链接上删除下划线

1
2
3
a {
text-decoration: none;
}

text-decoration的其他用法:

1
2
3
4
5
6
7
8
9
10
11
h1 {
text-decoration: overline;
}

h2 {
text-decoration: line-through;
}

h3 {
text-decoration: underline;
}

文本转换

text-transform属性用于指定文本中小写和大写字母。

它可用于大小写转换设置开头字母大写

1
2
3
4
5
6
7
8
9
10
11
p.uppercase {
text-transform: uppercase;
}

p.lowercase {
text-transform: lowercase;
}

p.capitalize {
text-transform: capitalize;
}

文字间距

text-indent属于用于指定文本第一行缩进

1
2
3
p {
text-indent: 50px;
}

字母间距

letter-spacing属性用于指定文本中字符之间的间距

1
2
3
4
5
6
7
h1 {
letter-spacing: 3px;
}

h2 {
letter-spacing: -3px;
}

字间距

word-spacing属性用于指定文本中单词间距

1
2
3
4
5
6
7
h1 {
word-spacing: 10px;
}

h2 {
word-spacing: -5px;
}

空白

white-space属性指定元素内部空白的处理方式。

1
2
3
p {
white-space: nowrap;
}

文本阴影

text-shadow属性为文本添加阴影

可以指定水平阴影垂直阴影颜色

1
2
3
h1 {
text-shadow: 2px 2px red;
}

也可以设置模糊效果

1
2
3
h1 {
text-shadow: 2px 2px 5px red;
}

字体

CSS中,有五个通用字体族:

  • 衬线字体(Serif):在每个字母边缘都有小小的笔触。有形式感和优雅感。
  • 无衬线字体(Sans-serif):字体线条简洁,没有小笔画。营造出现代、简约风格。
  • 等宽字体(Monospace):这里的所有字母都有相同的固定宽度。机械式外观。
  • 草书字体(Cursive):模仿人类笔迹。
  • 幻想字体(Fantasy):装饰性/俏皮的字体。

font-family属性

CSS中,使用font-family规定字体。应包含多个字体名称作为后备。确保浏览器最大兼容性。

如果字体的英文单词不止一个单词,应该使用双引号

1
2
3
4
5
6
7
8
9
10
11
.p1 {
font-family: "Times New Roman", Times, serif;
}

.p2 {
font-family: Arial, Helvetica, sans-serif;
}

.p3 {
font-family: "Lucida Console", "Courier New", monospace;
}

字体样式

font-style属性指定倾斜字体样式

此属性可以设置下列值:

  • normal - 文本正常显示
  • italic - 文本斜体显示
  • oblique - 文本为“倾斜”

字体粗细

font-weight属性指定字体粗细。

1
2
3
4
5
6
7
p.normal {
font-weight: normal;
}

p.thick {
font-weight: bold;
}

字体大小

font-size属性设置字体大小,可以是绝对或相对大小

绝对尺寸:

  • 将文本设置为指定大小
  • 不允许用户在所有浏览器中更改字体大小
  • 当输出的物理尺寸已知,绝对尺寸很有用

相对尺寸:

  • 设置相对于周围元素的大小
  • 允许用户在浏览器中更改大小

默认字体大小:16px(16px = 1em)。

像素设置大小

像素设置大小可以完全控制字体大小:

1
2
3
4
5
6
7
8
9
10
11
h1 {
font-size: 40px;
}

h2 {
font-size: 30px;
}

p {
font-size: 14px;
}

em设置大小

推荐使用em设置大小,1em = 16px,em = pixel / 16。

允许用户调整大小。

1
2
3
4
5
6
7
8
9
10
11
h1 {
font-size: 2.5em; /* 40px/16=2.5em */
}

h2 {
font-size: 1.875em; /* 30px/16=1.875em */
}

p {
font-size: 0.875em; /* 14px/16=0.875em */
}

响应式字体大小

在字体大小后加vw即可根据浏览器大小适应字体大小。

简写字体属性

字体属性包括:

  • font-style
  • font-variant
  • font-weight
  • font-size/line-height
  • font-family
1
2
3
4
5
6
7
p.a {
font: 20px Arial, sans-serif;
}

p.b {
font: italic small-caps bold 12px/30px Georgia, serif;
}

font-sizefont-family是必须的,其它可选。