【CSS】第二天画盒子、文字控制属性

【CSS】第二天

1. 画盒子
2. 文字控制属性
- 2.1 字体大小
- 2.2 字体粗细
- 2.3 字体样式是否倾斜
- 2.4 行高
- 2.5 行高-垂直居中
- 2.6 字体族
- 2.7 字体复合属性 font

1. 画盒子

目标：使用合适的选择器画盒子。
新属性
在这里插入图片描述

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title></title><style>.red {width: 100px;height: 100px;background-color: brown;}.orange {width: 200px;height: 200px;background-color: orange;}</style>
</head>
<body>
<div class="red">div标签</div>
<div class="orange">div2</div>
</body>
</html>

在这里插入图片描述

2. 文字控制属性

在这里插入图片描述

2.1 字体大小

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title></title><style>p {/* font-size 属性必须有单位，否则属性不生效，默认文字大小16px */font-size: 30px;}</style>
</head>
<body><p>div标签</p><div>默认字体大小</div>
</body>
</html>

在这里插入图片描述

2.2 字体粗细

属性名：font-weight
属性值：

数字 正常400 加粗700
关键字 正常normal 加粗bold

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title></title><style>h3 {font-weight: 400;}div {font-weight: 700;}</style>
</head>
<body><h3>123</h3><div>456</div>
</body>
</html>

在这里插入图片描述

2.3 字体样式是否倾斜

作用：清除文字默认的倾斜效果
属性名：font-style
属性值：

正常值:normal
倾斜: italic

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title></title><style>em {font-style: normal;}div {font-style: italic;}</style>
</head>
<body>
<em>em标签</em>
<div>div标签</div>
</body>
</html>

在这里插入图片描述

2.4 行高

作用：设置多行文本的间距

属性名：line-height

属性值

数字 + px
数字（当前标签font-size属性值的倍数）

line-height: 30px;/* 当前标签字体大小为16px，写line-height: 2 那么行高就是32px */
line-height: 2;

在这里插入图片描述

行高的组成

在这里插入图片描述

行高的测量方法：从一行文字的最顶端（最底端）量到下一行文字的最顶端（最底端）。
在这里插入图片描述

2.5 行高-垂直居中

在这里插入图片描述

2.6 字体族

属性名：font-family
属性值：字体名
font-fanily：楷体;

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title></title><style>div {font-family: Heiti SC;}</style>
</head>
<body><div>测试文字</div>
</body>
</html>

在这里插入图片描述

// 拓展（了解）：font-family属性值可以书写多个字体名，各个字体名用逗号隔开，执行顺序是从左向右依次查找
font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;

font-family 属性最后设置一个字体族名，网页开发建议使用无衬线字体