Font&Background

字体

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        @font-face{
            /* font-face可以将我们服务器中的字体直接提供给给用户去使用
                问题
                    1.加载速度
                    2.版权
                    3.字体格式
            */
            font-family:'myfont' ;
            /* font-family指定字体名字 */
            src: url('./font/...');
            /* 服务器中字体的路径 */
        }
        p{
            /* 
                字体相关样式
                    color 用来设置字体颜色
                    font-size 字体的大小
                        和font-size相关的单位
                        em相当于当前元素的一个font-size
                        rem 相当于根元素的一个font-size
                    font-family字体族(字体的格式)
                        可选值:
                            serif 衬线字体
                            sans-serif 非衬线字体
                            monospace 等宽字体
                                指定字体的类别,浏览器会自动使用该类别下的字体

                        -font-family 可以同时指定多个字体,多个字体间使用,隔开
                            字体生效时优先使用第一个,第一个无法使用则使用第二个,以此类推        
            */
            color: red;
            font-size: 40px;
            font-family:myfont ;
        }
    </style>
</head>
<body>
    <p>
        今天天气真不错,hello hello hoe are you!
    </p>
</body>
</html>

图标字体

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./fa/css/all.css">
</head>
<body>
    <!-- 
        图标字体(infont)
            -在网页中经常需要使用一些图标,可以通过图片来引入图标
                但是图片大小本身比较大,并且非常不灵活
            -所以在使用图标时,我们可以将图标直接设置为字体,
                然后通过font-size的形式来对字体进行引入
            -这样我们就可以通过使用字体的形式来使用图标

        fontawesome使用步骤
            1.下载https://fontawesome.com/
            2.解压
            3.将css和webfonts移动到项目中
            4.将all.css引入到网页中
            5.使用图标字体
                -直接通过类名来使用图标字体
                 class="fas fa-bell"
     -->
     <i class="fas fa-bell" style="font-size: 80px;color: red;"></i>
</body>
</html>

图标字体(2)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./fa/css/all.css">
    <style>
        li{
            list-style: none;
        }
        li::before{
            /* 
            
            通过伪元素来设置图标文字
                1.找到要设置图表的颜色通过before或after选中
                2.在content中设置字体的编码
                3.设置字体样式
                    fab
                    font-family:'Font Awesome 5 Brands'
                    
                    fas
                    font-family: 'Font Awesome 5 Free';
            */
            content: '\f1b0';
            font-family: 'Font Awesome 5 Free';
            font-weight: 900;
            color: blue;
            margin-right: 10px;
        }
    </style>
</head>
<body>
    <ul>
        <li>锄禾日当午</li>
        <li>汗滴禾下土</li>
        <li>谁知盘中餐</li>
        <li>粒粒皆辛苦</li>
    </ul>

    <!-- 

            通过实体来使用图标文字:
                &#x图标的编码;
     -->
     <span class="fas">&#xf0f3;</span>
    
</body>
</html>

阿里字体

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./iconfont/iconfont.css">
    <style>
        i.iconfont{
            font-size: 100px;
        }

        p::before{
            content: '\e625';
            font-family: 'iconfont';
            font-size: 100px;
        }
    </style>
</head>
<body>

    <i class="iconfont">&#xe61c;</i>
    <i class="iconfont">&#xe622;</i>
    <i class="iconfont">&#xe623;</i>

    <i class="iconfont icon-qitalaji"></i>

    <p>Hello</p>
</body>
</html>

行高

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            font-size: 50px;
            /* 可以将行高设置为和高度一样的值,使单行文字在一个元素中垂直之居中 */
            line-height: 200px;

            /* 
            行高(line height)
                -行高指的是文字占有的实际高度
                -可以通过line-height来设置行高
                    行高可以指定大小,也可以直接为行高设置一个整数
                        如果是一个整数的话,行高将会是字体的指定倍数
                -行高经常用来设置文字的行间距
                    行间距=行高-字体大小

            字体框
                -字体框就是字体存在的格子,设置font-size实际上就是在设置字体框的高度

            行高在字体框的上下平均分配
                
            */
            border: 1px red solid;
            line-height: 100px;
        }
    </style>
</head>
<body>
    <div>今天天气真不错 hello hello </div>
</body>
</html>

字体的简写属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            border: 1px red solid;
            /* font可以设置字体相关的所有属性
                语法:
                    font:字体大小/行高 字体族 
                    行高可以省略不写 如果不写使用默认值
                    font-weight :
                        可选值:
                            bold 加粗100-900九个级别
                            normal 默认值 不加粗
                    
            */
        }
    </style>
</head>
<body>
    <div>今天天气真不错hello hello</div>
</body>
</html>

文本的样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 500px;
            border: 1px red solid;
            /* 
                text-align 文本的水平对齐
                    可选值:
                    left 左侧对齐
                    right 右对齐
                    center 居中对齐
                    justify 两端对齐
                    
            */
            font-size: 50px;
        }
        span{
            font-size: 20px;
            border: 1px blue solid;
            /* 
            vertical-align 设置元素垂直对齐
            可选值:
                baseline默认值 基线对齐
                top 顶部对齐 子元素的顶部和父元素的顶部对齐
                bottom 底部对齐 子元素的底部和父元素的底部对齐
                middle 居中对齐
                
            */
        }
    </style>
</head>
<body>
    <div>今天天气 <span>真不错</span></div>
</body>
</html>

文本的样式(2)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            font-size: 50px;
            /* 
            text-decoration设置文本修饰
            可选值
                none什么都没有
                underling下划线
                line-through 删除线
                overline上划线
                
            */
            /* text-decoration: line-through; */
        }
        .box2{
            width: 200px;
            /* white-space设置网页如何处理空白
                可选值:
                    normal正常
                    nowrap不换行
                    pre 保留空白 */
            white-space:normal ;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    </style>
</head>
<body>
    <div class="box2">feichangduodeziabcfeichangduodeziabcfeichangduodeziabcfeichangduodeziabcfeichangduodeziabcfeichangduodeziabcvvvvvvvfeichangduodeziabcvvvvvvfeichangduodeziabcfeichangduodeziabcfeichangduodeziabcfeichangduodeziabcfeichangduodeziabcfeichangduodeziabcfeichangduodeziabcfeichangduodeziabcfeichangduodeziabc</div>
    <div class="box1">今天天气真不错</div>
</body>
</html>

背景(1)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            width: 500px;
            height: 500px;
            /* 
                background-color 设置背景颜色
                background-image 设置背景图片
                    -可以同时设置背景图片和背景颜色这样背景颜色将会成为图片的背景色
                    -如果背景的图片小于元素,则背景图片会自动在元素中平铺,将元素铺满
                    -如果背景的图片大于元素,将会有一部分的图片无法完全显示
                    -如果背景图片和元素一样大,则会正常显示
                background-repeat 用来设置背景的重复方式
                    可选值:
                        repeat 默认值 背景将会沿着x轴 y轴双方向重复
                        repeat-x沿着x轴方向重复
                        repeat-y沿着y轴方向重复
                        no-repeat背景图片不重复
                background-position用来设置背景图片的位置
                    设置方式:
                        通过top left right bottom center几个表示方位的词来设置背景图片位置:
                            使用方位词时必须要同时指定两个值,如果只写一个,则第二个值默认是center
                        通过偏移量来指定背景图片的位置:
                            水平方向的偏移量 垂直方向的偏移量
                
            */
        }
    </style>
</head>
<body>
    <div class="box1"></div>
</body>
</html>

背景(2)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            width: 500px;
            height: 500px;
            overflow: auto;
           background-color: #bfa;
           background-image: url("./img/5.jpg");
           background-repeat: no-repeat;
           /* background-position:-50px 300px ; */
           /*
                设置背景的范围
                    background-clip
                        可选值:
                            border-box 默认值,背景会出现在边框下边
                            padiing-box 背景不会出现边框,只出现在内容区和内边框
                            content-box 背景只会出现在内容区
                    background-origin 背景图片的偏移量计算的原点
                            padding-box 默认值,background-position从内边距开始计算
                            content-box 背景图片的偏移量从内容区处计算
                            border-box 背景图的变量从边框处开始计算
                    background-size 设置图片的大小
                        第一个值表示宽度
                        第二个值表示高度
                            -如果只写一个,则第二个值默认是auto
                        可选值:
                            cover图片的比例不变,将元素铺满
                            content图片比例不变,将图片在元素中完整显示

                        background-color
                        background-image
                        background-repeat
                        background-position
                        background-size 
                        background-origin
                        background-clip
                        background-attachment

                    -background背景相关的简写属性,所有背景相关的样式都可以通过改属性来设置
                        并且该样式没有顺序要求,也没有哪个属性是必须写的

                        注意:
                            background-size必须写在background-position后面,并且使用/隔开
                            background-origin background-clip两个样式,origin要在clip的前边
                            
            */
           /* border: 10px red solid; */
           /* background-size: contain; */
        }
        .box2{
            width: 300px;
            height: 300px;
            background-color: orange;
            background-image: url('./img/5.jpg');
            background-repeat: no-repeat;
            /* 
            background-attachment 
                -背景图片是否跟随元素移动
                -可选值:
                    scroll 默认值 背景图片会随元素移动
                    fixed 背景会固定在页面中,不会随元素移动
                    
            */
            background-attachment: scroll;

        }
    </style>
</head>
<body>
    <div class="box1">
        <div  class="box2"></div>
    </div>
</body>
</html>

渐变

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: #bfa;
            /* 
                通过渐变可以设置一些复杂的背景颜色,可以实现从一个颜色向其他颜色过渡的效果
                !!渐变是图片,需要通过background-image来设置
                
                线性渐变,颜色沿着一条直线发生变化
                    linear-gradient()

                     linear-gradient(red yellow)红色开头,黄色结尾,中间是过渡区域
                     -线性渐变的开头,我们可以指定一个渐变的方向
                        to left
                        to right
                        to bottom
                        to top
                        deg 表示度数
                        turn 表示圈

                    -渐变也可以同时指定多个颜色,多个颜色默认情况下平均分布
                        也可以手动指定渐变的分布情况
                    repeating-linear-gradient可以平铺的线性渐变 
        
            */
            /* background-image: linear-gradient(red yellow);
            background-image: linear-gradient(red 50px yellow 100px green 120px orange 200px ); */
            background-image:repeating-linear-gradient(red 50px  yellow 100px);
        }
    </style>
</head>
<body>
    <div class="box1"></div>
</body>
</html>

径向渐变

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            width: 300px;
            height: 300px;
            /* 
                radial-gradient 径向渐变(放射效果)
                默认情况下,径向渐变的形状是根据元素的形状来计算的
                    正方形-->圆形
                    长方形-->椭圆形
                        -我们也可以手动指定圆心的大小
                            可选值:
                                ellipse 椭圆
                                circle 正圆

                        -也可以指定渐变的位置
                        -语法:
                            radial-gradient(大小 at 位置,颜色 位置,颜色 位置,颜色 位置)
                                大小:
                                    ellipse 椭圆
                                    circle 正圆
                                    closet-side近边
                                    closet-corner近角
                                    farthset-side远边
                                    farthset-corner远角
                                位置:
                                    top right left center bottom

                
            */
            background-image: radial-gradient( 100px 100px red yellow);
        }
    </style>
</head>
<body>
    <div class="box1"></div>
</body>
</html>

Q.E.D.