第二個下拉清單的值根據第一個變化_WEB前端-CSS背景和清單

一、CSS背景

1、background-color：設定元素的背景顔色

background-color：顔色 | transparent

說明：

1. transparent是全透明黑色（black)的速記法，類似rgba（0，0，0，0）這樣的值
2. 顔色值（顔色名 | RGB | 十六進制）
3. 背景區包括内容、内邊距（padding）和邊框、不包含外邊距（margin）

2、background-image：把圖像設定為背景

background-image：URL | none

說明：

1. url位址可以是相對位址也可以是絕對位址
2. 元素的背景占據了元素的全部尺寸，包括内邊距和邊框，但不包括外邊距
3. 預設地，背景圖像位于元素的左上角，并在水準和垂直方向上重複。

3、background-position：設定背景圖像的起始位置

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

值                       說明                                                            注意
長度值（x y）     第一個值水準位置，第二個值垂直位置，左上角0 0             隻寫一個參數的話，第二個預設居中     
                  第一個值水準位置的百分比，第二個值垂直位置的百分比
百分比（x% y%）   左上角0% 0%，右下角100% 100%                              隻寫一個參數的話，第二個預設居中
                  如果僅規定一個值，另一個值将是50%
top               頂部顯示，相當于垂直方向0                                 隻寫一個參數的話，第二個預設居中
right             右邊顯示，相當于水準方向100%                              隻寫一個參數的話，第二個預設居中
left              左邊顯示，相當于水準方向0                                 隻寫一個參數的話，第二個預設居中
bottom            底部顯示，相當于垂直方向100%                              隻寫一個參數的話，第二個預設居中
center            居中顯示，相當于水準方向50%                               水準、垂直方向都居中
           

背景圖檔定位：

• background-attachment：背景圖像是否固定或者随着頁面的其餘部分滾動

background-attachment: scroll | fixed

說明：

1. scroll :預設值，背景圖檔随滾動條滾動
2. fixed :當頁面的其餘部分滾動時，背景圖檔不會移動

4、background-repeat：設定背景圖像是否重複及如何重複

background-repeat: repeat（重複）| no-repeat（不重複）| repeat-x（水準方向重複）| repeat-y（垂直方向重複）

5、background：簡寫屬性，作用是将背景屬性設定在一個聲明中

background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position] []

說明

：各值之間用空格分割，不分先後順序

二、清單樣式

1、list-style-type：設定清單項标志的類型

list-style-type :關鍵字| none

• 無序清單

值                        說明
none                   無标記
disc                   實心的圓點
circle                 空心的圓點
square                 實心的方塊
           

• 有序清單

值                       說明
none                   無标記
decimal                從1開始的整數
lower-roman            小寫羅馬數字
upper-roman            大寫羅馬數字
lower-alpha            小寫英文字母
upper-alpha            大寫英文字母
           

2、list-style-image：将圖像設定為清單項标志

list-style-image : URL | none

3、list-style-position：設定清單中清單項标志的位置

list-style-position : inside| outside

說明：

1. inside :清單項目标記放置在文本以内，且環繞文本根據标記對齊
2. outside :預設值，清單項目标記放置在文本以外，且環繞文本不根據标記對齊

4、list-style：簡寫屬性。用于把所有清單的屬性設定于一個聲明中

list-style : list-style-type

list-style-positien

list-style-image

說明：

1. 值之間用空格分隔割
2. 順序不固定
3. list-style-image 會覆寫list-style-type的設定