CSS（六）— 樣式設置

CSS屬性設置背景效果

1、background-color：背景顏色

div{
    background-color: #0000FF;/*背景顏色*/
        width: 500px;
        height: 40px;
}

2、background-image：背景圖片

div{
    background-image: url("image/kaola.jpg");/*背景圖片*/
        width: 1000px;
        height: 600px;
}

3、background-repeat：背景重複

div{
    background-image: url("image/kaola.jpg");
    background-repeat: no-repeat;/*背景重複，可以設置repeat-x（橫向重複）、repeat-y縱向重複或者其他*/
    width: 1000px;
    height: 600px;
}

background-attachment：背景滾動

div{
           background-image: url("image/kaola.jpg");
           background-attachment: fixed;/*背景固定，只滾動內容*/
           width: 1000px;
           height: 2000px;
       }

background-position：背景定位

 div{
           background-image: url("image/kaola.jpg");
           background-repeat: no-repeat;
           background-position: center;/*背景居中*/
           height: 600px;
       }

在整理過程中，只是描述了一些用法，對具體的CSS樣式的值沒有詳解，希望讀者在可以利用工具對一些背景效果進行了解。

CSS屬性設置文本

1、color：改變文本顏色

 .text{
    /*三者選擇其中一種方式即可*/
        color: rgb(255,0,0);/*rgb顏色*/
        color: red;/*英文顏色*/
        color: #FF0000;/*十六進制顏色*/
}

2、text-align：文本對齊方式
3、text-decoration：文本修飾（下劃線）

 /* 超級鏈接默認有下劃線，去除下劃線的操作*/
a:link{
    font-size: 20px;
    color: red;
    text-decoration: none;
}

/*鼠標經過時有下劃線*/
a:hover{
    font-size: 20px;
        color: #0000FF;
        text-decoration: underline;
}

4、text-indent：文本縮進
5、font-weight：文本粗細

CSS屬性設置字體

• font-family：字體

#test{
    font-family: "Times New Roman",Times,serif;
}

注意：字體可以設置多個，設置的時候取決於用戶電腦是否存在該字體
- font-style：文字效果 斜體

 #test{
        font-style: italic;/*斜體*/
}

• font-size：文字大小

#test{
    font-size: 2em;/*設置文字大小爲2em*/
}

注意：1em=16px

• text-indent：文字縮進
• font-weight：文字粗細

CSS列表

list-style-type屬性及其屬性值

HTML代碼

<ul>
        <li>北京</li>
        <li>上海</li>
        <li>廣州</li>
        <li>深圳</li>
</ul>

樣式代碼

ul{ 
    /*無標記*/
    list-style-type: none;
}

CSS表格

HTML代碼

<table id="tableTest">
        <tr>
            <th>編號</th>
            <th>運動</th>
        </tr>
        <tr>
            <td>1</td>
            <td>籃球</td>
        </tr>
        <tr>
            <td>2</td>
            <td>跑步</td>
        </tr>
        <tr>
            <td>3</td>
            <td>乒乓球</td>
        </tr>
</table>

樣式代碼

#tableTest{
    border: 1px solid black;/*設置表格1像素 實邊 黑色*/
        width: 200px;/*設置寬度*/
        height: 200px;/*設置高度*/
        background-color: aquamarine;
        text-align: center;/*文字居中*/
}

我們可以在w3cschool在線教程看到更詳細的教程。