背景樣式 • background-color 設置元素的背景顏色。• background-image 把圖像設置為背景。• background-position 設置背景圖像的起始位置。• background-attachment 背景圖像是否固定或者隨著頁面的其餘部分滾動。• backgr ...
背景樣式
• 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-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的屬性值