CSS样式常用命名规则

来源:互联网 发布:p2p网络直播开源代码 编辑:程序博客网 时间:2024/04/28 00:12
1.样式命名
外 套:  wrap
主导航:  mainnav
子导航:  subnav
页 脚:  footer
整个页面: content
页 眉:  header
页 脚:  footer
商 标:  label
标 题:  title
主导航:  mainbav(globalnav)
顶导航:  topnav
边导航:  sidebar
左导航:  leftsidebar
右导航:  rightsidebar
旗 志:  logo
标 语:  banner
菜单内容:   menu content
菜单容量:   menu container
子菜单:  submenu
边导航图标:sidebarIcon
注释:   note
面包屑:  breadcrumb(即页面所处位置导航提示)
容器:   container
内容:   content
搜索:   search
登陆:   Login
功能区:  shop(如购物车,收银台)
当前的:  current
小工具:       tool
盒子:           box
局部块:       part(A-Z)

2.样式文件命名
基本的 base.css
主要的 master.css
布局,版面 layout.css
局部 part.css
专栏 columns.css
文字 font.css
打印样式 print.css
主题 themes.css

3.缩写命名
左浮 fl = float:left;
右浮 fr = float:right;
清除浮动 clear = clear:both;

左对齐 tl = text-align:left;
右对齐 tri = text-align:right;
居中   tc = text-align:center;

宽度  w1(width) = 1px……..w1000 = 1000px
高度  h1(height) = 1px……..h1000 = 1000px

清楚边框  bd_n = border:none!important;

加粗     fw_b = font-weight:bold;
清楚加粗 fw_n = font-weight:normal;

隐藏块   dp_n = disipay:none;
显示块   dp_b = disipay:block;
清楚背景色 bg_n = background:none;

外边距(上右下左) m_05 = margin:5px;
外边距(上下左右) m_0510 = margin:5px 10px;
外边距(上左右下) m_051007 = margin:5px 10px 7px;
外边距(上)       mt_10 = margin-top:10px;
外边距(右)       mr_10 = margin-right:10px;
外边距(下)       mb_10 = margin-bottom:10px;
外边距(左)       ml_10 = margin-left:10px;

内边距(上右下左) p_05 = padding:5px;
内边距(上下左右) p_0510 = padding:5px 10px;
内边距(上左右下) p_051007 = padding:5px 10px 7px;
内边距(上)       pt_10 = padding-top:10px;
内边距(右)       pr_10 = padding-right:10px;
内边距(下)       pb_10 = padding-bottom:10px;

内边距(左)       pl_10 = padding-left:10px;


原创粉丝点击