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不顯示

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

好看的英文字體:

  1. font-size: 14px;
  2. font-family: Consolas;

好看的中文字體:

  微軟雅黑 14px

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


 

background-image

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

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


background-attachment:scroll | fixed

background-position: top | left | right | center | 長度值 | 百分比

第一個參數代表水平,第二個參數代表垂直,只有一個數值時,另一個默認為居中

 

 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的屬性值

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM