css命名及书写规范.docx

《css命名及书写规范.docx》由会员分享，可在线阅读，更多相关《css命名及书写规范.docx（6页珍藏版）》请在优知文库上搜索。

1、CSS命名及书写规范CSS命名及书写规范CSS命名规范一.文件命名规范全局样式：global.css；框架布局：layout,css；字体样式：font.css；链接样式：link,css；打印样式：print,css：二.常用类/ID命名规范页眉：header内容：content容器：container页脚：footer版权：copyright导航：menu主导航：mainMenu子导航：subMenu标志:logo标语：banner标题：title侧边栏：sidebar图标:Icon注释：note搜索：search按钮：btn登录：login链接:link信息框：manage常用类的命名应

2、尽量以常见英文单词为准，做到通俗易懂，并在适当的地方加以注释。对于二级类/ID命名，则采纳组合书写的模式，后一个单词的首字母应大写：诸如搜寻框则应命名为searchInpuI、搜寻图标命名这searchicons搜寻按钮命名为SearChBtnCSS书写规范及方法一.常规书写规范及方法1.选择DOCTYPE：XHTM1.1.0供应了三种DTD声明可供选择:过渡的(TranSitiOnaI):要求特别宽松的DTD,它允许你接着运用HTM1.4.Ol的标识(但是要符合XhtmI的写法完整代码如下：!DOCTYPEhtmlPUB1.ICW3CDTDXHTM1.1.0TransitionalEN1/D

3、TD/xhtml!-transitional.dtd严格的(StriCt):要求严格的DTD,你不能运用任何表现层的标识和属性，例如br完整代码如下：!DOCTYPEhtmlPUB1.IC-/W3C/DTDXHTM1.1.0StrictEN1/DTD/xhtml!-strict,dtd框架的(FrameSet):特地针对框架页而设计运用的DTD,假如你的页面中包含有框架，须要采纳这种DTD。完整代码如下：!DOCTYPEhtmlPUB1.IC-/W3C/DTDXHTM1.1.0FramesetEN1/DTD/xhtml1-frameset.dtd志向状况当然是严格的DTD,但对于我们大多数刚接

4、触web标准的设计师来说，过渡的DTD(XHTM1.1.OTranSitiOnaD是目前志向选择(包括本站，运用的也是过渡型DTD)因为这种DTD还允许我们运用表现层的标识、元素和属性，也比较简单通过W3C的代码校验。2.指定语言及字符集：为文档指定语言：htmlxmlns=lang=en为了被阅读器正确说明和通过W3C代码校验，全部的XHTM1.文档都必需声明它们所运用的编码语言；如：常用的语言定义：meta;charset=utf-8/标准的XM1.文档语言定义：?Xmlversion=l.0encoding=utf-8?针对老版本的阅读器的语言定义：meta与*html是IE特有的标签，

5、Firefox暂不支持。.searchInputbackground-color:#333;*html.SearchTnputbackground-color:#666;)/*仅IE6*/*+html.searchinputbackground-color:#555;/*仅IE7*/屏蔽IE阅读器：select是选择符，依据状况更换。其次句是MAC上safari阅读器独有的。*:lang(zh)selectfont:12px!important：*FF的专用*/select:emptyfont:12px!important;*safari可见*/IE6可识别:这里主要是通过CSS注释分开一个属

6、性与值，注释在冒号前。selectdisplay*IE6不识别*/:none;IE的if条件hack写法：全部的IE可识别：!ifIEOnlyIE!endif只有IE5.0可以识别：！ifIE5.0OnlyIE5.0!endifIE5.0包换IE5.5都可以识别：！ifgtIE5.0OnlyIE5.0!endif仅IE6可识别：！ifItIE6OnlyIE6-!endifIE6以及IE6以下的IE5.x都可识别：！ifgteIE6OnlyIE6/+!endif仅IE7可识别：!ifIteIE7OnlyIE7/-!endif2、清除浮动：在Firefox中，当子级都为浮动时，那么父级的高度就无法

7、完全的包住整个子级，那么这时用这个清除浮动的HACK来对父级做一次定义，那么就可以解决这个问题。Selectzaftercontent:.;display:block;height:0;clearrboth：Visibilityihidden;分割线申明:本文部分资料搜集于网络！XHTMl-CSS写作建议1.全部的Xhtml代码小写2.属性的值肯定要用双引号。括起来，且肯定要有值3.每个标签都要有起先和结束，且要有正确的层次4.空元素要有结束的tag或于起先的tag后加上/5.表现与结构完全分别，代码中不涉及任何的表现元素，如stylesfont、bgColorsborder等6.hl到h5的

8、定义，应遵循从大到小的原则，体现文档的结构，并有利于搜寻引擎的查询。7.给每一个表格和表单加上一个唯一的、结构标记id8.给重要的区块加上注释,如:给图片加上alt标签9.全部的标签必需进行合理的嵌套10.根元素前必需有元素，宣告运用那一种DTD11.根元素必需有xmlns属性来指定运用的namespaceCSS样式表规范：1.id和CIaSS命名采纳该版块的英文单词或组合命名，并第一个单词小写，其次个单词首个字母大写，如:newRelease（最新产品ncw+Rcleasc）2.CSS样式表各区块用注释说明3.尽量运用英文命名原则4.尽量不加中杠和下划线5.尽量不缩写，除非一看就明白的单词C

9、SS命名规范：DIVCSS名称说明网站公用相关COiHainerdivcontainer容器1.ayOUtItlayout布局Headerorbannerdiv#head,JJheader页头部分Footerdiv4foot,footer页脚部分Navigation1ist#nav主导航Sub-navigation1ist#SUbNaV二级导航Menu珈IenU菜单SubMenu#SUbmenU子菜单1.eftorrightsidecolumns#sidebar_a,#Sidebar_b左边栏或右边栏Maindiv#main页面主体Tag4tag标签MeSSage#msgSmessage提示信

10、息Tips#tips小技巧Vote#vote投票Friend1.inkJtfriendlink友情连接Titletttitle标题SummarySsummary摘要SearchinputJtsearchInput搜寻输入框Searchoutput#SearCh_oUtPUt搜寻输出和搜寻结果相像SearCh#SearCh搜寻SearChbar#SearChBar搜寻条SearchresultsItsearchjesults搜寻结果Copyrightinformation#COPyright版权信息brandbranding商标branding-logo#logo1.OGOSiteinforma

11、tion#siteinfo网站信息Copyrightinformationetc.ttsiteinfo1.egal法律声明DesignerorothercreditsHsiteinfoCredits信誉JoinusItjoinus加入我们Partnershipopportunities#Partner合作伙伴Services#SerViCe服务Regsiter#regsiter注册Arrowarr/arrow箭头1.ittlettlittle标题Websitemap#SitemaP网站地图1.istSlist列表Homepage#hOmePagC首页Subpagesubpage二级页面子页而ToolbarStool,!toolbar工具条Nextpulls#drop下拉Nextpullsmenu#dOrPmCnU下拉菜单StatusUstatus状态