CSS命名规范(英文命名,“英语福音”)

整理文档很辛苦,赏杯茶钱您下走!

免费阅读已结束,点击下载阅读编辑剩下 ...

阅读已结束,您可以下载文档离线阅读编辑

资源描述

一.文件命名规范[b]样式文件命名[/b][quote]主要的master.css布局,版面layout.css专栏columns.css文字font.css打印样式print.css主题themes.css[/quote][b]CSSID的命名[/b][quote]页头:header登录条:loginbar标志:logo侧栏:sidebar广告:banner导航:nav子导航:subnav菜单:menu子菜单:submenu搜索:search滚动:scroll页面主体:main内容:content标签页:tab文章列表:list提示信息:msg小技巧:tips栏目标题:title加入:joinus指南:guild服务:service热点:hot新闻:news下载:download注册:register状态:status按钮:btn投票:vote合作伙伴:partner友情链接:friendlink页脚:footer版权:copyright外套:wrap主导航:mainnav子导航:subnav页脚:footer整个页面:content页眉:header页脚:footer商标:label标题:title主导航:mainbav(globalnav)顶导航:topnav边导航:sidebar左导航:leftsidebar右导航:rightsidebar旗志:logo标语:banner菜单内容1:menu1content菜单容量:menucontainer子菜单:submenu边导航图标:sidebarIcon注释:note面包屑:breadcrumb(即页面所处位置导航提示)容器:container内容:content搜索:search登陆:Login功能区:shop(如购物车,收银台)当前的current[/quote][b]网站常用中英文对照表[/b][quote]网站导航SiteMap公司简介ProfileorCompanyProfileorCompany公司设备EquipmentEquipment公司荣誉GloriesGlories企业文化CultureCulture产品展示ProductProduct资质认证QualityCertification企业规模ScaleScale营销网络SalesNetwork组织机构organizationorganization合作加盟JoinInCooperation技术力量TechnologyTechnology经理致辞Manager`soration发展历程DevelopmentHistory工程案例EngineeringProjects业务范围BusinessScope分支机构Branches供求信息Supply&Demand经营理念OperationPrinciple产品销售SalesSales联系我们ContactUsContactUs信息发布InformationInformation返回首页HomepageHomepage产品定购orderorder分类浏览BrowseByCategory电子商务E-business公司实力StrengthStrength版权所有CopyRight友情连结HotLink应用领域ApplicationFields人力资源HumanResourceHr领导致辞Leader`soration企业资质EnterpriseQualification行业新闻TradeNews行业动态Trends客户留言CustomerMessage客户服务CustomerService新闻动态News&Trends公司名称CompanyName销售热线SalesHot-Line联系人ContactPerson您的要求YourRequirements建设中InConstruction证书CertificateCertificate地址ADDAdd邮编PostalCodeZipcode电话TELTel传真FAXFax产品名称ProductName产品说明DescriptionDescription价格Price品牌Brand规格Specification尺寸Size生产厂家ManufacuturerManufacturer型号Model产品标号ItemNo.技术指标TechniqueData产品描述Description产地ProductionPlace销售信息SalesInformation用途Application论坛Forum在线订购On-lineorder招商Enterprise-establishing招标BidInviting综述General业绩Achievements招聘JoinUs求贤纳士JoinUs大事GreatEvent动态Trends服务Service投资Investment行业Industry规划Programming环境Environment发送Delivery提交Submit重写Reset登录Enter注册Login中国企业网技术支持PoweredByCe.Net.Cn社区Community业务介绍BusinessIntroduction在线调查OnlineInquiryInquiry下载中心Download会员登陆MemberEntrance意见反馈Feedback常见问题FAQ中心概况GeneralProfile教育培训Education&Training游乐园AmusementPark在线交流OnlineCommunication专题报道SpecialReport[/quote]常用类的命名应尽量以常见英文单词为准,做到通俗易懂,并在适当的地方加以注释。对于二级类/ID命名,则采用组合书写的模式,后一个单词的首字母应大写:诸如“搜索框”则应命名为“searchInput”、“搜索图标”命名这“searchIcon”、“搜索按钮”命名为“searchBtn”……一.常规书写规范及方法1.选择DOCTYPE:XHTML1.0提供了三种DTD声明可供选择:过渡的(Transitional):要求非常宽松的DTD,它允许你继续使用HTML4.01的标识(但是要符合xhtml的写法)。完整代码如下:!DOCTYPEhtmlPUBLIC“-//W3C//DTDXHTML1.0Transitional//EN”““严格的(Strict):要求严格的DTD,你不能使用任何表现层的标识和属性,例如br。完整代码如下:!DOCTYPEhtmlPUBLIC“-//W3C//DTDXHTML1.0Strict//EN”““框架的(Frameset):专门针对框架页面设计使用的DTD,如果你的页面中包含有框架,需要采用这种DTD。完整代码如下:!DOCTYPEhtmlPUBLIC“-//W3C//DTDXHTML1.0Frameset//EN”““理想情况当然是严格的DTD,但对于我们大多数刚接触web标准的设计师来说,过渡的DTD(XHTML1.0Transitional)是目前理想选择(包括本站,使用的也是过渡型DTD)。因为这种DTD还允许我们使用表现层的标识、元素和属性,也比较容易通过W3C的代码校验。2.指定语言及字符集:为文档指定语言:htmlxmlns=””lang=”en”为了被浏览器正确解释和通过W3C代码校验,所有的XHTML文档都必须声明它们所使用的编码语言;如:常用的语言定义:metahttp-equiv=”Content-Type”content=”text/html;charset=utf-8″/标准的XML文档语言定义:?xmlversion=”1.0″encoding=”utf-8″?针对老版本的浏览器的语言定义:metahttp-equiv=”Content-Language”content=”utf-8″/为提高字符集,建议采用“utf-8”。3.调用样式表:外部样式表调用:页面内嵌法:就是将样式表直接写在页面代码的head区。如:styletype=”text/css”!–body{background:white;color:black;}–/style外部调用法:将样式表写在一个独立的.css文件中,然后在页面head区用类似以下代码调用。linkrel=”stylesheet”rev=”stylesheet”href=”css/style.css”type=”text/css”media=”all”/在符合web标准的设计中,推荐使用外部调用法,可以不修改页面只修改.css文件而改变页面的样式。如果所有页面都调用同一个样式表文件,那么改一个样式表文件,可以改变所有文件的样式。4、选用恰当的元素:根据文档的结构来选择HTML元素,而不是根据HTML元素的样式来选择。例如,使用P元素来包含文字段落,而不是为了换行。如果在创建文档时找不到适当的元素,则可以考虑使用通用的div或者是span;避免过渡使用div和span。少量、适当的使用div和span元素可以使文档的结构更加清晰合理并且易于使用样式;尽可能少地使用标签和结构嵌套,这样不但可以使文档结构清晰,同时也可以保持文件的小巧,在提高用户下载速度的同时,也易于浏览器对文档的解释及呈视;5、派生选择器:可以使用派生选择器给一个元素里的子元素定义样式,在简化命名的同时也使结构更加的清晰化,如:.mainMenuulli{background:url(images/bg.gif;)}6、辅助图片用背影图处理:这里的”辅助图片”是指那些不是作为页面要表达的内容的一部分,而仅仅用于修饰、间隔、提醒的图片。将其做背影图处理,可以在不改动页面的情况下通过CSS样式来进行改动,如:#logo{background:url(images/logo.jpg)#FEFEFEno-repeatrightbottom;}7、结构与样式分离:在页面里只写入文档的结构,而将样式写于css文件中,通过外部调用CSS样式表来实现结构与样式的分离。8、文档的结构化书写:页面CSS文档都应采用结构化的书写方式,逻辑清晰易于阅读。如:divid=”mainMenu”ulliahref=”#”首页/a/liliahref=”#”介绍/a/liliahref=”#”服务/a/li/ul/div#mainMenu{width:100%;height:30px;background:url(images/mainMenu_bg.jpg)repeat-x;}#mainMenuulli{float:left;line-height:30px;margin-right:1px;cursor:pointer;}*******************************************************************************************命名参考(来源网络)常用的CSS命名规则:头:header内容:content/container尾:footer导航:nav侧栏:sidebar栏目:column页面外围控制整体布局宽度:wrapper左右中:leftrightcenter命名全部使用小写字母,如果需要多个单词,单词间使用“-”分隔,比如user-list常用代码结构:div:主要用于布局,分割页面的结构ul/ol:用于无序/有序列表span:没有特殊的意义,可以用作排版的辅助,例如

1 / 16
下载文档,编辑使用

©2015-2020 m.777doc.com 三七文档.

备案号:鲁ICP备2024069028号-1 客服联系 QQ:2149211541

×
保存成功