CSS回顾复习二（CSS书写规范、顺序和命名规则——CSS书写顺序与命名规则）

一、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书写规范）