史上最全css命名规范英文命名.docx

1、史上最全css命名规范英文命名史上最全！ css 命名规范 （ 英文命名 ） 一文件命名规范b 样式文件命名 /b quote 主要的 master.css 布局，版面 layout.css 专栏 columns.css 文字 font.css 打印样式 print.css 主题 themes.css /quotebCSS ID 的命名 /bquote页头： header登录条： loginbar标志logo侧栏sidebar广告banner导航nav子导航： subnav菜单menu子菜单： submenu搜索search滚动scroll页面主体： main内容content标签页： tab

2、文章列表： list提示信息： msg小技巧： tips栏目标题： title加入joinus指南guild服务service热点八、八、hot新闻news下载download注册regsiter状态status按钮btn投票vote合作伙伴： partner友情链接： friendlink页脚footer版权copyright外 套： 主导航： 子导航： 页 脚： 整个页面： 页 眉： 页 脚： 商 标： 标 题： 主导航： 顶导航： 边导航： 左导航： 右导航： 旗 志： 标 语： 菜单内容 1： 菜单容量： 子菜单： 边导航图标：wrap mainnav subnav footer co

3、ntent header footer label title mainbav ( globalnav ) topnav sidebar leftsidebar rightsidebar logo banner menu1content menucontainer submenu sidebarIcon注释：note面包屑：breadcrumb（ 即页面所处位置导航提示）容器：内容：搜索：登陆： 功能区：containercontentsearchLoginshop( 如购物车，收银台 )当前的current/quoteb 网站常用中英文对照表 /bquote 网站导航 Site Map公司简

4、介 Profile or Company Profile or Company公司设备 Equipment Equipment公司荣誉 Glories Glories企业文化 Culture Culture产品展示 Product Product资质认证 Quality Certification企业规模 Scale Scale营销网络 Sales Network组织机构 organization organization合作加盟 Join In Cooperation技术力量 Technology Technology经理致辞 Managers oration发展历程 Development

5、 History工程案例 Engineering Projects 业务范围 Business Scope 分支机构 Branches 供求信息 Supply & Demand 经营理念 Operation Principle 产品销售 Sales Sales 联系我们 Contact Us Contact Us 信息发布 Information Information 返回首页 Homepage Homepage 产品定购 order order 分类浏览 Browse By Category 电子商务 E-business 公司实力 Strength Strength 版权所有 Copy

6、Right 友情连结 Hot Link 应用领域 Application Fields 人力资源 Human Resource Hr 领导致辞 Leaders oration 企业资质 Enterprise Qualification 行业新闻 Trade News 行业动态 Trends 客户留言 Customer Message 客户服务 Customer Service 新闻动态 News & Trends 公司名称 Company Name 销售热线 Sales Hot-Line 联系人 Contact Person 您的要求 Your Requirements 建设中 In Cons

7、truction 证书 Certificate Certificate 地址 ADD Add 邮编 Postal Code Zipcode 电话 TEL Tel 传真 FAX Fax 产品名称 Product Name 产品说明 Description Description 价格 Price 品牌 Brand 规格 Specification 尺寸 Size生产厂家 Manufacuturer Manufacturer 型号 Model产品标号 Item No. 技术指标 Technique Data产品描述 Description产地 Production Place销售信息 Sales

8、Information用途 Application论坛 Forum在线订购 On-line order招商 Enterprise-establishing招标 Bid Inviting综述 General业绩 Achievements招聘 Join Us求贤纳士 Join Us大事 Great Event动态 Trends服务 Service投资 Investment行业 Industry规划 Programming环境 Environment发送 Delivery提交 Submit重写 Reset登录 Enter注册 Login中国企业网技术支持 Powered By Ce.Net.Cn社区

9、 Community业务介绍 Business Introduction在线调查 Online Inquiry Inquiry下载中心 Download会员登陆 Member Entrance意见反馈 Feedback常见问题 FAQ中心概况 General Profile教育培训 Education & Training 游乐园 Amusement Park 在线交流 Online Communication 专题报道 Special Report/quote常用类的命名应尽量以常见英文单词为准，做到通俗易懂，并在适当的地方加以注释。对于二级类 /ID 命名，则采用组合书写的模式， 后一个单

10、词的首 字母应大写： 诸如 “搜索框 则应命名为 “searchInput ”、 “搜索图标 ”命名这 “searchIcon ”、 “搜索按钮 ”命名为SearchBtn ” 一. 常规书写规范及方法1. 选择 DOCTYP：EXHTML 1.0提供了三种 DTD声明可供选择：过渡的(Transitional): 要求非常宽松的 DTD它允许你继续使用 HTML4.01的标识(但是要符合 xhtml 的写法 ) 。完整代码如下：严格的(Strict): 要求严格的DTD你不能使用任何表现层的标识和属性，例如 。完整代码如下：框架的(Frameset):专门针对框架页面设计使用的 DTD如果你

11、的页面中包含有框架，需要采用这种DTD完整代码如下：理想情况当然是严格的 DTD但对于我们大多数刚接触 web标准的设计师来说，过渡的DTD(XHTML 1.0 Transitional) 是目前理想选择(包括本站，使用的也是过渡型 DTD)。因为这种DTD还允许我们使用表现层的标识、元素和属性，也比较容易通 过W3C的代码校验。2. 指定语言及字符集：为文档指定语言：为了被浏览器正确解释和通过 W3C代码校验，所有的XHTML文档都必须声明它们所使用 的编码语言；如： 常用的语言定义：标准的XML文档语言定义: 针对老版本的浏览器的语言定义：为提高字符集，建议采用 “utf-8 ”。3. 调

12、用样式表：外部样式表调用：页面内嵌法：就是将样式表直接写在页面代码的 head 区。如：style type= text/css ” 外部调用法：将样式表写在一个独立的 .css 文件中，然后在页面 head 区用类似以下代码调 用。在符合 web 标准的设计中，推荐使用外部调用法，可以不修改页面只修改 .css 文件而改变页面的样式。 如果所有页面都调用同一个样式表文件， 那么改一个样式表文件， 可以改 变所有文件的样式。4、选用恰当的元素：根据文档的结构来选择 HTML元素，而不是根据 HTML元素的样式来选择。例如，使用 P元素来包含文字段落， 而不是为了换行。 如果在创建文档时找不到适

13、当的元素， 则可以考虑 使用通用的 div 或者是 span；避免过渡使用div和span。少量、适当的使用 div和span元素可以使文档的结构更加清晰合理并且易于使用样式；尽可能少地使用标签和结构嵌套， 这样不但可以使文档结构清晰， 同时也可以保持文件 的小巧，在提高用户下载速度的同时，也易于浏览器对文档的解释及呈视；5、 派生选择器：可以使用派生选择器给一个元素里的子元素定义样式， 在简化命名的同时也使结构更加 的清晰化，如：.mainMenu ul li background:url(images/bg.gif;)6、 辅助图片用背影图处理：这里的 ”辅助图片 ”是指那些不是作为页面要

14、表达的内容的一部分， 而仅仅用于修饰、 间 隔、提醒的图片。将其做背影图处理，可以在不改动页面的情况下通过 CSS样式来进行改动，如：#logo background:url(images/logo.jpg) #FEFEFE no-repeat right bottom;7、 结构与样式分离：在页面里只写入文档的结构， 而将样式写于css文件中，通过外部调用 CSS样式表来实现结构与样式的分离。8、文档的结构化书写：页面CSS文档都应采用结构化的书写方式，逻辑清晰易于阅读。如： 首页 介绍 服务 #mainMenu width:100%;height:30px; background:url(

15、images/mainMenu_bg.jpg) repeat-x; #mainMenu ul li float:left;line-height:30px; margin-right:1px;cursor:pointer; * *命名参考 ( 来源网络 )常用的CSS命名规则：头： header内容： content/container尾： footer导航： nav侧栏： sidebar栏目： column 页面外围控制整体布局宽度： wrapper 左右中： left right centeruser-list命名全部使用小写字母，如果需要多个单词，单词间使用 “- ”分隔，比如常用代码结

16、构：div ：主要用于布局，分割页面的结构ul/ol ：用于无序 / 有序列表span :没有特殊的意义，可以用作排版的辅助，例如(4.23) 天幻网六周年天幻网六周年天幻网六周年天幻网六 然后在 css 中定义 span 为右浮动，实现了日期和标题分两侧显示的效果h1-h6 :标题h1-h6 根据重要性依次递减h1 位最重要的标题label :为了使你的表单更有亲和力而且还能辅助表单排版的好东西，例如: 密 码 fieldset & legend : fildset 套在表单外， legend 用于描述表单内容。例如: title 密 码 dl,dt,dd :当页面中出现第一行为类似标题 /

17、 简述，然后下面为详细描述的内容时应该使用 该标签，例如 什么是 CSS?CSS就是一种叫做样式表(stylesheet )的技术。也有的人称之为层叠样式表 (CascadingStylesheet )。 什么是 XHTML？XHTM是一个基于XML的置标语言，看起来与 HTML有些想像，只有一些小的但重要的区别。可以这样看，XHTML就是一个扮演着类似HTML勺角色的XML 本质上说，XHTML是 一个桥接(过渡)技术，结合了 XML(有几分)的强大功能及 HTML(大多数)的简单特性。C #contentS #subcolM #maincolX #xcol这是纵向布局的 XHTML吉构，c

18、-smx表示网页有三个纵栏,c-sm 表示有两个纵栏,c-mx表 示有两个纵栏其中一个是附属的 , c-m 表示一个纵栏。其中在三纵栏的布局需要分为两层 第一层是 #subcol 与 #main 第二层是 #main 中的 #maincol 与 #xcol 。自定义命名：根据w3c网站上给出的,最好是用意义命名比如：是重要的新闻高亮显示（像红色）有两种.redcolor:red.important-newscolor:red很显然第二种传达的意义更加明确 , 所以尽量不要用意义不明确的作为自己自定义的名字CSS命名规范DIV CSS 名称 说明网站公用相关Container div #cont

19、ainer 容器Header or banner div #header 页头部分Main or global navigation div #mainNav 主导航Menu #menu 菜单Sub Menu #submenu 子菜单Left or right side columns #sidebarA, #sidebarB 左边栏或右边栏Main div #main 页面主体Content div #content 内容部分The main content area #contentMain 主要内容区域Footer div #footer 页脚部分Tag #tag 标签Message #

20、msg #message 提示信息Tips #tips 小技巧Vote #vote 投票Friend Link #friendlink 友情连接Title #title 标题 Summary #summary 摘要 Sub-navigation list #subNav Search input #searchInput Search output #searchOutput Search #search 搜索 Search results #searchResults二级导航搜索输入框搜索输出和搜索结果相似搜索结果Copyright information #copyright 版权信息br

21、and #branding 商标branding-logo #brandingLogo LOGO Site information #siteinfo 网站信息Copyright information etc. #siteinfoLegal Designer or other credits #siteinfoCredits法律声明 信誉Join us #joinus 加入我们Partnership opportunities #partner 合作伙伴 Services #service 服务Regsiter #regsiter 注册Status #status 状态9、鼠标手势：在XHTML标准中，hand只被IE识别，当需要将鼠标手势转换为 手形”时，则将hand”换为 “pointer ”，即 “cursor:pointer; ”