一、CSS書寫順序

1.位置屬性: position，top，right，bottom，left，z-index，display，float

2.寬高: width，height，padding，margin

3.文字系列: font，line-height，letter-spacing，color，text-align

4.背景: background，border，opacity

5.動畫: animation，transition

例子：

.maomao {
    /*定位*/
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 100;

    /*盒模型*/
      display: block;
      float: right;
      width: 100px;
      height: 100px;
      padding: 20px;
      margin: 30px;

    /*字體*/
      font: italic small-caps 700 12px/1.5 "微軟雅黑";
      color: #666;
      text-align: center;

    /*背景*/
      background: #229 url(maomao.png) no-repeat 15px center/20px content-box
      border: 1px solid #000;
      border-radius: 5px;
      opacity: 1;

    /*動畫*/
      animation: maomao 10s ease-in-out 3s 2 alternate
      transition: width 10s ease-in-out 3s
}

/*2016/12/13新增*/

二、CSS命名規則

頁面結構

1. 容器: container
2. 頁頭：header
3. 內容：content/container
4. 頁面主體：main
5. 頁尾：footer
6. 導航：nav
7. 側欄：sidebar
8. 欄目：column
9. 頁面外圍控制整體佈局寬度：wrapper
10. 左右中：left right center

導航

1. 導航：nav
2. 主導航：mainnav
3. 子導航：subnav
4. 頂導航：topnav
5. 邊導航：sidebar
6. 左導航：leftsidebar
7. 右導航：rightsidebar
8. 菜單：menu
9. 子菜單：submenu
10. 標題: title
11. 摘要: summary

功能

1. 標志：logo
2. 廣告：banner
3. 登錄條：loginbar
4. 登陸：login
5. 注冊：register
6. 搜索：search
7. 加入：joinus
8. 狀態：status
9. 按鈕：btn
10. 滾動：scroll
11. 列表：list
12. 當前的: current
13. 提示：tips
14. 圖標: icon
15. 注釋：note
16. 指南：guild
17. 服務：service
18. 熱點：hot
19. 新聞：news
20. 下載：download
21. 投票：vote
22. 合作伙伴：partner
23. 友情鏈接：link
24. 版權：copyright

注意：

1. 一律小寫
2. 盡量用英語單詞命名
3. CSS注釋：/* 注釋內容 */

喜歡的小伙伴們就打賞下（嘿嘿）

上期回顧：CSS回顧復習一（什么是CSS）

下期內容：CSS回顧復習三（CSS書寫規范、順序和命名規則——CSS書寫規范）