CSS常用命名收录.docVIP

CSS常用命名收录备用，CSS命名规则与技巧探讨 CSS 学习 2008-12-10 14:53:53 阅读177 评论0 ??字号：大中小?订阅 1、布局常用CSS命名： 名称 描述 名称 描述 warp/warpper 外套(整体布局) content 容器 main 页面主体 content/container 内容块 site 站点 layout 布局 column 栏 sidebar 侧栏 nav 导航 center 中 left 左 right 右 1.1、结构化命名小技巧： 结构化命名方法一般根据文档结构的描述来命名，如： id = mainmenu id = sub_menu id = main-content 上面的代码中，这3种名称都是根据文档结构进行描述命名的，分别表示主菜单、次菜单和主要内容块，当我们看到这样的样式时就能清楚的知道样式所对应的元素，即使版块和元素的位置或排列顺序改变了却仍然不会影响样式与元素之间的对应关系，从而达到符合XHTML结构化的要求。 2、模块常用CSS命名： 名称 描述 名称 描述 header 页头 footer 页脚 logo 标志 banner 广告 login 登录 loginbar 登录条 regsiter 注册 search 搜索 subnav 子导航 tab 标签页/标签 menu 菜单 submenu 子菜单 scroll 滚动 hot 热点 vote 投票 list 文章列表 news 新闻 download 下载 guild 指南 service 服务 joinus 加入 partner 合作伙伴 friendlink 友情链接： copyright 版权 shop 购物车（功能区） source 资源 map 网站地图 homepage 首页 3、导航常用CSS命名： 名称 描述 名称 描述 nav 导航外套 mainbav 主导航 subnav 子导航 sidebar 边导航 topnav 顶导航 sidebaricon 边导航图标 leftsidebar 左导航 rightsidebar 右导航 menucontainer 菜单容器 dropmunu 下拉菜单 menu 菜单 submenu 子菜单 4、类常用CSS命名：　　 名称 描述 名称 描述 title 标题 summary 摘要 status 状态 spce 特别 label 标签 current 当前 msg 提示信息 tips 小技巧 submit 提交按钮 btn 按钮 icon 图标 note 注释 red 红色 textbox 文本框 drop 下拉 form 表单 breadcrumb 导航提示 crumb 导航 count 统计 cor/corner 转角/圆角 scroll 滚动 ? ? 4.1、CLASS 命名小技巧（语义化命名）： (1)颜色:使用颜色的名称或者16进制代码,如: .blue { color: blue; } .f80 { color: #f80; } .f3f3f3 { color: #f3f3f3; } (2)字体大小,直接使用font+字体大小作为名称,如： .font12px { font-size: 12px; } .font9pt {font-size: 9pt; } (3)对齐样式,使用对齐目标的英文名称,如： .left { float:left; } .bottom { float:bottom; } (4)标题栏样式,使用类别+功能的方式命名,如： .barnews { } .barproduct { } 5、文件常用命名： 名称 描述 名称 描述 master.css 主要文件 base.css 基本共用 layout.css 布局，版面 module.css 模块 themes.css 主题 columns.css 专栏 font.css 文字 mend.css 补丁 forms.css 表单 print.css 打印 6、注释的写法： /* Header */ 相关代码信息 /* End Header */ /* Warp */ 相关代码信息 /* End Warp */ /* Footer */ 相关代码信息 /* End Footer */　　 7、CSS命名规则： 1.区分大小写：建议全部使用小写字母，单词首字母例外； 2.命名合法：一般要求以字母开头，后面可跟数字、下划线、连字符、和特殊字符，但建议尽量使用英文字母，而适当使用下划线和连接线； 3.尽量不要缩写，除非是约定俗成的缩写单词，要保证看得明白，否则尽量别使用； 4.