字体族（p76）

字体相关的样式
color
font-size
em 相当于当前元素的一个font-size
rem 相当于根元素的一个font-size

            font-family ：字体族（字体的一个格式）
            
                serif 衬线字体
                sans-serif 非衬线字体
                monospace 等宽字体
               https://www.runoob.com/css/css-font.html

在这里插入图片描述

/@font-face 可以将服务器中的字体直接提供给用户使用/
@font-face{
font-family: ‘mafont’;/指定字体的名字，随意命名/
src:url(/路径);/src是服务器中字体的路径/
}

图标字体简介（p77）

图标字体（iconfont）
- 在网页中经常需要使用一些图标，可以通过图片来引入图标，但是图片大不灵活
- 所以在使用图标时，我们可以将图标直接设置为字体然后通过font-face引入
引用方法：
- 直接通过类名来使用图标字体

<link rel="stylesheet" href="/06.font&background/font/css/all.css">

 <i class="fas fa-bell" style="font-size: 80px
     ;"></i>

在这里插入图片描述
通过伪元素设置图标字体

 <link rel="stylesheet" href="/06.font&background/font/css/all.css">
 <style>
        li{
            list-style: none;


        }
        li::before{
            content: '\f1b0';
            font-family:'Font Awesome 5 Free' ;
            font-weight: 900;
            color: blue;
        }
    </style>
    <li> <i class="fas fa-cat
        "></i>12345</li>
    <li> <i class="fas fa-cat
        "></i>67890</li>
    <li> <i class="fas fa-cat
        "></i>12346</li>
    <li> <i class="fas fa-cat
        "></i>asdfasd</li>
    <i class="fas fa-cat
    "></i>

在这里插入图片描述
记得设置font-family和font-weight

iconfont（p79）

1.在网站下载字体
2.放入网页所在文件夹的子文件夹中
3.在html查看代码
4.用link引入

行高（p80）

行高 line height
-行高指的是字体占有的实际高度
- 可以通过line-height 来设置行高
- 行高可以指定大小（px em）也可以直接为行高设置一个整数
如果是一个整数，行高将会是字体的指定的倍数
行间距=行高 — 字体大小

            字体框
                -字体框就是字体存在的格子，设置font-size实际上就是设置字体框的高度
            
            行高会在字体框的上下平均分配

<style>
        div{
            font-size: 50px;
              border:1px red solid;
            line-height: 150px;
        }
    </style>

在这里插入图片描述

字体的简写属性（p81）

语法： font:字体大小/行高字体族
行高可以省略不写，如果不写使用默认值

font:bold italic 50px/3 '微软雅黑' ;

文本的水平和垂直对齐（p82）

<style>
        div{
            width: 500px;
            border: 1px red solid;
            /* text-align 文本的水平对齐 
                可选值：
                    left 默认值
                    right 
                    center
                    justify 两端对齐*/
            text-align:justify;
        }
        span{
            border: 1px blue solid;
            font-size: 10px;
            /* vertical-align 设置元素垂直对齐的方式
                可选值：
                baseline 默认值
                top
                bottom
                middle 
                也可以直接设置一个数字px
            */
            vertical-align:top;
        }
        p{
            border:1px red solid
        }
        img{
            vertical-align:bottom;
        }
        
    </style>
    <body>
    <div>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero possimus, exercitationem molestiae earum quibusdam tempore vel, illo delectus voluptate, sed unde repellendus illum quas nihil praesentium! Modi in laborum iste.
    </div>
    <div>
        今天他天气不错
        <span>真不戳zhenbuchuo</span>
        
    </div>
    <p><img src="/img/2.jpg"></p>
</body>

在这里插入图片描述

其他的文本样式（p83）

text-decoration

text-decoration
可选值：
underline 下划线
overline 上划线
line-through 删除线

white-space

可选值：
nowrap 不换行
pre 保留原有格式

 white-space: pre;

在这里插入图片描述

<style>
 .box1{
            width: 200px;
            white-space: pre;
            /* white-space
            可选值：
                nowrap 不换行 
                pre 保留原有格式*/
                overflow:hidden;
                text-overflow: ellipsis;
        }
    </style>
    <div class="box1">Lorem ipsum dol
        or sit, amet consectetur adipisicing
                  elit. Blanditiis non delectus, assumenda quas beatae ipsa suscipit rerum, eius nihil ut neque quidem repudiandae necessitatibus pariatur cupiditate. Rerum quis laboriosam doloribus!</div>

在这里插入图片描述
多余部分设置省略号，
white-space: pre;
overflow:hidden;
text-overflow: ellipsis; 缺一不可

京东导航条（p84~p86）

<style>
        body{font-size: 14px;
        }
        /* 设置外部容器的样式 */
        .top-bar-wrapper {
            background-color: rgb(218, 217, 216);
            width: 100%;
            height: 30px;
            /* 设置行高,可以不用设置高度 */
            line-height: 30px;
            border: 1px rgb(160, 131, 131)  solid;
        }
        /* 设置内部容器样式 */
        .top-bar {
            width: 1190px;
            /* 设置水平居中 */
            margin: 0 auto;
           
            height: 30px;
        }
        /* 设置location下的小图标 */
        .location .fas{
            color: red;
        }
        .location{
            float:left;
        }
        /* 设置shortcut */
        .shortcut{
            float: right;
        }
        /* 设置分割线 */
        
        /* 设置li浮动 */
        .shortcut li{
            float:left;
        }
        .top-bar a,.top-bar span,.top-bar{
            color: #999;
        }
      a:hover{
          color: red;
      }
    </style>
<body>
    <div class="top-bar-wrapper">
        <div class="top-bar">
            <!-- 左侧菜单 -->
            <div class="location">
                <div class="current-city">
                   <i class="fas fa-map-marker-alt"></i> <a href="#">江西</a>
                </div>

            </div>
            <!-- 右侧菜单 -->
            <div class="shortcut">
                <ul>

                    <li class="line">
                        <a href="#">你好,请登入</a>
                        <a href="#" >免费注册</a>
                    </li>

                    <!-- 分割线 -->
                   
                    <li class="line"> <a href="#">我的订单</a>
                    </li>
                    <li class="line"> <a href="#">我的京东</a><i class="fas fa-angle-down"></i></li>
                    <li class="line"><a href="#">京东会员</a></li>
                    <li class="line" > <a href="#" >政企采购</a><i class="fas fa-angle-down"></i></li>
                    <li class="line"><a href="#">客户服务</a></li>
                    <li class="line"><a href="#">网站导航</a></li>
                    <li class="line"><a href="#">手机京东</a></li>
                </ul>
            </div>
        </div>
    </div>
</body>