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

  • • 发表于 4年前
  • • 作者 茂茂
  • • 3952 人浏览
  • • 17 条评论
  • • 最后编辑时间 3年前
  • • 来自 [技 术]

原创声明:本文为作者原创,未经允许不得转载,经授权转载需注明作者和出处

一、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书写规范)
分享到:
评论区(共17条评论)
17条评论
Ctrl+Enter
作者

茂茂

茂茂

APP:2 帖子:16 回复:198 积分:13513

已加入社区[1331]天

啦啦啦

作者详情》
Top