这个图片用外部样式接入，用CSS，请问有完整的代码吗

这个代码背景颜色，背景图怎么添加，字体如何横向设置，能帮我整理一下CSS的基本知识点吗，没有的话就算了，最好有完整详细的解答

背景图片用background-image:url(图片地址)来设置，然后设置下padding-left预留背景图位置，防止文字覆盖到背景图上即可，大概如下

<meta charset="utf-8" />
<style>
    .hot {
        background-color: #dfe5ca; /*排行榜背景色*/
        width: 320px; /*排行榜宽度*/
        padding-bottom: 20px; /*底部内边距*/
    }

    .hot .title {
        background-color: #3c7e00; /*排行榜标题背景色*/
        color: #fff; /*排行榜标题字体颜色*/
        font-weight: bold; /*排行榜标题字体加粗*/
        font-size: 18px; /*排行榜标题字体大小*/
        line-height: 40px; /*排行榜标题行高*/
        padding-left: 20px; /*排行榜左内边距*/
        background-image: url(http://www.w3dev.cn/demo/no/bang.jpg); /*排行榜背景图*/
        background-position: 140px center; /*排行榜背景图位置，第一个是水平位置，第二个垂直位置*/
        background-repeat: no-repeat; /*排行榜不重复*/
    }
    .hot ul, .hot li {
        list-style: none;
        margin: 0;
        padding: 0
    }
    .hot ul {
        width: 200px;
        margin: 20px auto 0 auto;
    }

    .hot li {
        line-height: 40px
    }

    .hot li .no {
        padding: 0 3px;
        width: 30px;
        height: 30px;
        display: inline-block;
        text-align: center
    }

    .hot li .no1, .hot li .no2, .hot li .no3 {
        margin-right: 5px;
        background-color: transparent;
        background-image: url(http://www.w3dev.cn/demo/no/no1.jpg);
        line-height: inherit;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: contain;
    }

    .hot li .no2 {
        background-image: url(http://www.w3dev.cn/demo/no/no2.jpg);
    }

    .hot li .no3 {
        background-image: url(http://www.w3dev.cn/demo/no/no3.jpg);
    }

    .hot li .no .num {
        background-color: #3c7e00; /*背景色*/
        color: #fff;
        font-weight: bold;
        line-height: 20px;
        padding: 0 3px
    }
</style>
<div class="hot">
    <div class="title">
        畅销书排行榜
    </div>
    <ul>
        <li><span class="no no1">&nbsp;</span>畅销书排行榜1</li>
        <li><span class="no no2">&nbsp;</span>畅销书排行榜2</li>
        <li><span class="no no3">&nbsp;</span>畅销书排行榜3</li>
        <li><span class="no"><span class="num">4</span></span>畅销书排行榜4</li>
        <li><span class="no"><span class="num">5</span></span>畅销书排行榜5</li>
        <li><span class="no"><span class="num">6</span></span>畅销书排行榜6</li>
        <li><span class="no"><span class="num">7</span></span>畅销书排行榜7</li>
        <li><span class="no"><span class="num">8</span></span>畅销书排行榜8</li>
    </ul>
</div>

外部样式接入，用link