css的基本操作之背景样式

字体的复合样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景样式</title>
    <style>/*字体的复合样式font:style weight size(复合样式的必写项) family（复合样式的必写项）*/

         #div2{
             font:italic bolder 40px 宋体 ;
            }</style>
</head>
<body>
    <div id="div2">hello world</div>
</body>
</html>

背景图片的设置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景样式</title>
    <style>
        /*背景样式：背景图片*/
        #div1{
            100%;
            height:5000px;
            border:1px solid skyblue;

            /*背景图片   默认是平铺状态*/
            /*background-image:url("../html/D15FF716E537D2194F048FB13540A707.jpg ");*/
            /*背景图片的是否平铺：默认是平铺repeat,不平铺为no-repeat*/
            /*background-repeat:no-repeat;*/
            /*背景图片的定位：position*/
            /*background-position:200px 200px;*/
            /*背景图片的大小控制：size*/
            /*background-size:400px 400px;*/
            /*背景图片的等比例缩放，这中情况图片是完全可见的，但是不一定铺满背景*/
            /*background-size:contain;*/
            /*背景图片铺满整个背景，这个时候图片可能是残缺的*/
            /*background-size:cover;*/

            /*复合样式 background:color image repeat position/size(如果写在/的前面，就是定位，如果写在/的后面，就是设置大小)*/
            background:url("../html/D15FF716E537D2194F048FB13540A707.jpg ") no-repeat top/cover;
        }

    </style>
</head>
<body>
   <div id="div1"></div>
    
</body>
</html>

将多个块级标签变成一行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景样式</title>
    <style>
            .div3{
                100px;
                height:100px;
                border:1px solid deepskyblue;
            }
            .div4{
                    100px;
                    height:100px;
                    border:1px solid deepskyblue;
                }

        /*将多个块级标签变成一行*/
        /*display:inline inline-block block*/
        div{
           display:inline;
        }

    </style>
</head>
<body>
    <div class="div3">hello world</div>
    <div class="div4">hello world</div>
</body>
</html>

css的基本操作之背景样式

相关推荐