html中文本与字体的样式

文本的颜色

color属性用来设计文本的颜色，颜色由以下的值来进行指定

颜色名比如blue

十六进制值比如#ff7f66

RGB值比如rgb(255, 255, 204)

页面的默认文本颜色是在body选择器中定义的

基本语法

body {
  color: blue;
}

h1 {
  color: green;
}

文本对齐

text-alige属性用于设置文本的水平对齐方式

文本可以进行左对齐或者右对齐，或者居中对齐

基本语法

h1 {
  text-align: center;
}
​
h2 {
  text-align: left;
}
​
h3 {
  text-align: right;
}

当text-align属性设置为justify后，将拉伸每一行，以使每一行具有相等的宽度，并且左右边距是直的

基本语法

p {
  text-align: justify;
}

垂直对齐

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

基本语法

img.top {
  vertical-align: top;
}

img.middle {
  vertical-align: middle;
}

img.bottom {
  vertical-align: bottom;
}

文本装饰

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

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

基本语法

a {
  text-decoration: none;
}

其余的属性值用于装饰文本基本语法如下

h1 {
  text-decoration: overline;
}

h2 {
  text-decoration: line-through;
}

h3 {
  text-decoration: underline;
}

文本缩进

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

基本语法

p {
  text-indent: 2em;
}

字符间距

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

基本语法

h2 {
  letter-spacing: 12px;
}

文本阴影

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

最简单的用法是指定最简单的用法是只指定水平阴影（2px）和垂直阴影（2px）

基本语法

h1.simple {
  text-shadow: 2px 2px;
}

字体

font-family 属性

在 CSS 中，我们使用 font-family 属性规定文本的字体。

font-family 属性应包含多个字体名称作为备用字体，以确保浏览器/操作系统之间的最大兼容性。字体名称应以逗号分隔

基本语法

.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 - 文本以斜体显示

基本语法

p.normal {
  font-style: normal;
}

p.italic {
  font-style: italic;
}

字体粗细

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

基本语法

p.normal {
  font-weight: normal;
}

p.thick {
  font-weight: bold;
}

字体大小

font-size 属性设置文本的大小

可以使用px或者em来设置字体大小

基本语法

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