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

【CSS】第二天

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

1. 画盒子

目标：使用合适的选择器画盒子。
新属性

html 复制代码

<!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 字体大小

html 复制代码

<!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

html 复制代码

<!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

html 复制代码

<!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属性值的倍数）

css 复制代码

line-height: 30px;


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

行高的组成

行高的测量方法：从一行文字的最顶端（最底端）量到下一行文字的最顶端（最底端）。

2.5 行高-垂直居中

2.6 字体族

属性名：font-family

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

html 复制代码

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

html 复制代码

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

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

2.7 字体复合属性 font

DAY03 P37

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

【CSS】第二天

1. 画盒子

2. 文字控制属性

2.1 字体大小

2.2 字体粗细

2.3 字体样式是否倾斜

2.4 行高

2.5 行高-垂直居中

2.6 字体族

2.7 字体复合属性 font

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