CSS：字体和文本样式
字体样式
字体大小font-size
在CSS中我们常使用font-size来定义字体大小
字体大小的单位为px
代码演示
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.ziti{font-size: 30px;}</style>
</head>
<body><div class="ziti">Hello,World</div>
</body>
</html>演示结果
字体粗细font-weight
在CSS中，我们使用font-weight来定义字体的粗细，字体粗细在100单位到900单位之间，在编写时，不需要加px
属性值：
| 属性值 | 描述 |
|---|---|
normal | 默认值，不加粗 |
bold | 加粗 |
| 100 - 900 | 用数字来定义粗细，其中400等同于normal，700等同于bold |
代码演示
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.ziti{font-weight:700;}</style>
</head>
<body><div class="ziti">Hello,World</div>
</body>
</html>演示结果
字体风格font-style
在CSS中，我们使用font-style来定义字体的风格
| 属性值 | 描述 |
|---|---|
normal | 默认值，显示标准的字体样式 |
italic | 显示斜体的字体样式 |
代码演示
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.ziti{font-style:italic;font-size: 50px;}</style>
</head>
<body><div class="ziti">Hello,World</div>
</body>
</html>演示结果
字体类型font-family
font-family可以一次性定义很多字体类型
font-family: "Microsoft Yahei","宋体";
为了适应浏览器的配置，font-family可以定义许多字体，如果第一个字体用不了，那就选择第二个，第三个.....
代码演示
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.ziti{font-family: "Microsoft Yahei","宋体";font-size: 50px;}</style>
</head>
<body><div class="ziti">Hello,World</div>
</body>
</html>演示结果
样式连写font
在定义字体样式时，我们可以将以上四种属性全部放在font中
font: style weight size family
在书写时，必须有四个属性，而且四个属性的位置是像上面那样排列的
代码演示
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.ziti{font: italic 700 50px "宋体";}</style>
</head>
<body><div class="ziti">Hello,World</div>
</body>
</html>演示结果
文本样式
文本颜色color
color定义文本颜色有四种方式
| 表示方式 | 属性值 |
|---|---|
| 关键字 | red,green,blue等，直接指定颜色 |
| rbg | rgb(255,255,255) 或 rgb(100%,100%,100%) |
| rbga | rgba(255,255,255,0.5) |
| 十六进制形式 | #ffaabb |
我们就讲解rbga的方式，因为它多了一个参数，多出来的那个参数是用来定义颜色透明度的
演示代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.yanse{color: rgba(200, 200,150, 0.7)}</style>
</head>
<body><div class="yanse">Hello,World</div>
</body>
</html>演示结果
这里的颜色明显看出透明度低了
文本缩进text-indent
text-indent用于指定一行文本的缩进
text-intent:2px
text-intent:2em
px是绝对单位
em是每个字体的单位
演示代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.px{text-indent:2px;}.em{text-indent: 2em;}</style>
</head>
<body><div>文本缩进两个字体单位</div><div class="px">文本缩进两个字体单位</div><div class="em">文本缩进两个字体单位</div>
</body>
</html>演示结果
这里我们可以看到绝对单位和字体单位的区别
text-align
text-align属性用来指明文本对齐的方式
属性值
| 属性值 | 描述 |
|---|---|
| left | 左对齐（默认值） |
| right | 右对齐 |
| center | 居中对齐 |
代码演示
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.right{text-align: right;}.left{text-align: left;}.mid{text-align: center;}</style>
</head>
<body><div class="left">文本左边对齐</div><div class="mid">文本中间对齐</div><div class="right">文本右边对其</div>
</body>
</html>演示结果
文本修饰text-decoration
文本修饰可以给文本添加删除键，下划线，上划线
属性值
| 属性值 | 描述 |
|---|---|
| none | 没有修饰（默认值） |
| underline | 下划线（a标签的默认值） |
| overline | 上划线 |
| line-through | 删除线 |
代码演示
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.down{text-decoration:underline;}.up{text-decoration: overline;}.del{text-decoration: line-through;}</style>
</head>
<body><div class="up">文本上划线</div><div class="down">文本下划线</div><div class="del">文本删除线</div>
</body>
</html>演示结果
