css背景顏色、背景圖片，以及列表的多種樣式

時間 2020-02-01

標籤 css 背景顏色圖片以及列表多種樣式欄目 CSS 简体版

原文原文鏈接

背景樣式css

• background-color 設置元素的背景顏色。
• background-image 把圖像設置爲背景。
• background-position 設置背景圖像的起始位置。
• background-attachment 背景圖像是否固定或者隨着頁面的其他部分滾動。
• background-repeat 設置背景圖像是否重複及如何重複。
• background 簡寫屬性，做用是將背景屬性設置在一個聲明中。html

列表樣式web

• list-style-type 設置列表項標誌的類型。
• list-style-image 將圖像設置爲列表項標誌。
• list-style-position 設置列表中列表項標誌的位置。
• list-style 簡寫屬性,用於把全部列表的屬性設置於一個聲明中。瀏覽器

背景區包括內容、內邊距（padding）和邊框、不包含外邊距（margin）ide

border必須加上樣式纔會顯示，不然默認爲none不顯示字體

邊框顏色默認=元素內的文本顏色url

好看的英文字體：spa

font-size: 14px;
font-family: Consolas;

好看的中文字體：code

　　微軟雅黑 14pxhtm

RGBA 顏色值獲得如下瀏覽器的支持：IE9+、Firefox 3+、Chrome、Safari 以及 Opera 10+

background-image

默認從左上角開始，在水平和垂直方向上重複

背景顏色和背景圖片同時設置時，背景顏色會被背景圖片覆蓋

background-attachment:scroll | fixed

第一個參數表明水平，第二個參數表明垂直，只有一個數值時，另外一個默認爲居中

background 簡寫

不區分屬性的前後順序

當background-attachment設置爲fixed，則圖片位置相對於整個網頁來講

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{
            width:300px;
            height:1500px;
            border:1px solid;
            /*背景圖片不顯示，緣由：
            設置爲fixed，則圖片位置相對於整個網頁來講
            此時top表示圖片位於整個網頁的水平居中位置*/
            background:#abcdef url(cat-little.jpg) no-repeat top fixed;
        };
    </style>
</head>
<body>
    <div></div>>
    
</body>
</html>