CSS常用形容詞

紅色:常用

                                                                          綠色:不常用

一、開篇：文字&背景

1.文字

1.1文字樣式

*font-family--字型  *font-size—字型大小  *color—字型顏色  *font-weight—字型粗細

*font-style—字型樣式  *text-transform—英文字型大小寫  *text-decoration—文字修飾

*letter-spacing—

1.2段落樣式

*line-height—行間距  *text-indent—段落首行縮排  *text-align—文字水平對齊

*vertical-align—文字垂直對齊 

1.3新增文字樣式

*text-overflow—文字溢位處理   *word-wrap&word-break—文字換行控制     *text-shadow—文字陰影                   *@font-face-使用伺服器端字型

1.4 列表樣式

*list-style-type—列表符號  * list-style-image—自定義列表符號  *設定定義列表

2.

2.1背景樣式

*background-color—背景顏色        *background-image—背景影象                     * background-repeat—背景影象平鋪方式             * background-position—背景影象位置

* background-attachment—背景影象固定             * background-size—背景影象大小

* background-origin—背景影象原點                  * background-clip背景影象顯示區域

二、進階

   1.邊框

1.1邊框樣式

*border-width—邊框寬度  *border-style—邊框樣式  *border-color—邊框顏色

1.2新增邊框樣式

*border-colors—多重邊框顏色  *border-image—影象邊框  *border-radius—圓角邊框

2.超連結

2.1超連結樣式

*:link偽類—設定超連結物件在沒有被訪問時的樣式 

*:hover偽類--設定超連結物件在其滑鼠懸停時的樣式

*:active偽類—設定超連結物件在被使用者啟用(在被點選與釋放之間發生的事件)時的樣式

*:visited偽類--設定超連結物件在其連結地址已被訪問過後的樣式

2.2按鈕式超連結

2.3游標指標樣式

*cursor—游標效果

三、升級: 盒模型&介面設計

1. 盒模型

1.1盒模型要點

*margin—邊距  *border—邊框  *padding—填充 

1.2彈性盒模型

 *box-orient—元素佈局方向  *box-direction—元素佈局順序 

                  *box-ordinal-group—元素位置  *box-flex—元素空間分配 

                  *box-pack&box-align—元素對齊方式 

                  1.3增強盒模型

                  *box-shadow—元素陰影  *box-sizing—元素尺寸大小

                  *overflow-x&overflow-y—元素溢位內容處理

                  1.4定位網頁元素

                  *position—元素定位  *relative—相對定位  *absolute—絕對定位 

                  *fixed—固定定位  *float—浮動定位

              2. 介面設計

                  2.1新增使用者介面設計屬性

                  *resize—改變元素尺寸 

                  *outline—輪廓外邊距(outline-width&outline-style&outline-color&outline-offset)

                  *appearance—偽裝的元素  *content—為元素新增內容

                  2.2新增多列布局屬性

                  *columns—多列布局  *column-width—列寬度 

                  *column-gap—列間距  *column-rule—列分割線

四、完虐:動畫

1. 動畫效果

1.1元素變換效果

        *transform(旋轉&縮放&移動&傾斜…)

      1.2元素過渡效果

      *transition   *transition-property--過渡效果  *transition-duration—設定過渡時間

      *transition-delay—設定過渡延遲效果  *transition-timing-function—設定過渡方式

      1.3元素動畫效果

      *@keyframes--關鍵幀動畫

      *animation--實現元素動畫效果            (animation-name&animation-duration&animation-timing-function&animation-delay&animation-iteration-count&animation-direction)