css背景顏色、背景圖片，以及串列的多種樣式-有解無憂

背景樣式

• background-color 設定元素的背景顏色，
• background-image 把影像設定為背景，
• background-position 設定背景影像的起始位置，
• background-attachment 背景影像是否固定或者隨著頁面的其余部分滾動，
• background-repeat 設定背景影像是否重復及如何重復，
• background 簡寫屬性，作用是將背景屬性設定在一個宣告中，

串列樣式

• list-style-type 設定串列項標志的型別，
• list-style-image 將影像設定為串列項標志，
• list-style-position 設定串列中串列項標志的位置，
• list-style 簡寫屬性,用于把所有串列的屬性設定于一個宣告中，

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

border必須加上樣式才會顯示，否則默認為none不顯示

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

好看的英文字體：

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

好看的中文字體：

　　微軟雅黑 14px

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>

串列項標記 list-style-type

無序串列

有序串列

list-style-image

寫在li樣式上

list-style-position:inside | outside （針對于多行文本）

inside :串列專案標記放置在文本以內，且環繞文本根據標記對齊
outside :默認值，串列專案標記放置在文本以外，且環繞文本不根據標記對齊

list-style 樣式縮寫

順序不固定，但list-style-image的屬性值會覆寫list-style-style的屬性值

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/79774.html

標籤：Html/Css

上一篇：css的盒子模型

下一篇：float浮動以及案例演示