css颜色/字体/背景属性

背景属性

'''
background-color: cornflowerblue

background-image: url('1.jpg');

background-repeat: no-repeat;(repeat:平铺满)

background-position: right top（20px 20px）;(横向：left center right)(纵向：top center bottom)

      简写：<body style="background: 20px 20px no-repeat #ff4 url('1.jpg')">

              <div style=" 300px;height: 300px;background: 20px 20px no-repeat #ff4 url('1.jpg')">
'''

注意：如果将背景属性加在body上，要记得给body加上一个height，否则结果异常，这是因为body为空，无法撑起背景图片；另外，如果此时要设置一个width＝100px，你也看不出效果，除非你设置出html。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html{
            background-color: antiquewhite;
        }
        body{
            width: 100px;
            height: 600px;
            background-color: deeppink;
            background-image: url(1.jpg);
            background-repeat: no-repeat;
            background-position: center center;
        }
    </style>
</head>
<body>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="keywords" content="css的背景属性">
    <meta name="description" content="study">
    <meta http-equiv="Refresh" content="1800;https://www.baidu.com">
    <meta http-equiv="x-ua-compatible" content="IE=EmulateIE7">
    <title>标题</title>
    <link rel="stylesheet" href="day108.css">
    <link rel="icon" href="https://www.baidu.com/favicon.ico">
    <!--<script src="js.js"></script>-->
</head>

<body>
    <p>捭阖之术</p>

    <div class="back"></div>

    <span></span>
</body>
</html>

p{
    color: red;
}

p{
    color: #d900ff;
    font-size: larger;
}

p{
    color: rgb(0, 204, 255);
    font-size: 50%;
}
/*rgb三原色，分别是red/green/blue，各自数值区间为0-255*/

p{
    color: rgba(188, 188, 80, 0.9);
    /*文字颜色*/
    font-size: 30px;
    /*文字大小*/
    font-family: "Times New Roman";
    /*文字字体*/
    font-weight: lighter;
    /*设置文本的粗细，最高900*/
    font-style: oblique;
    /*字体样式*/
    background-color: beige;
    /*背景颜色*/
}
/*a代表透明度的意思，0-1，数字越大透明度越低*/


.back{
    border: 1px solid red;
    /*边框粗细1px为实线且是红色*/
    width: 800px;
    /*宽800px*/
    height: 800px;
    /*高800px*/
    background-image: url("300x300.jpeg");
    /*背景图的url*/
    background-repeat: no-repeat;
    /*是否平铺，no-repeat为不平铺，repeat-x为x轴平铺，repeat-y为y轴平铺*/
    background-position: 0 center;
    /*第一个参数为离左边框的距离，第二个参数为离上边框的距离*/
    /*background: url("300x300.jpeg") no-reprat 0 center;*/
}


span{
    display: inline-block;
    /*内联标签没有宽高属性，通过display可对块级标签和内联标签属性进行更改*/
    width: 100px;
    height: 100px;
    background-image: url("icon.jpeg");
    background-position: -295px 260px;
    /*一张图有多个icon的话，此时可以在浏览器自行调试，选择对应需要的icon*/
}

while True: print('studying...')