css命名及书写规范.docx

上传人:王** 文档编号:1436311 上传时间:2024-07-09 格式:DOCX 页数:6 大小:13.69KB
下载 相关 举报
css命名及书写规范.docx_第1页
第1页 / 共6页
css命名及书写规范.docx_第2页
第2页 / 共6页
css命名及书写规范.docx_第3页
第3页 / 共6页
css命名及书写规范.docx_第4页
第4页 / 共6页
css命名及书写规范.docx_第5页
第5页 / 共6页
css命名及书写规范.docx_第6页
第6页 / 共6页
亲,该文档总共6页,全部预览完了,如果喜欢就下载吧!
资源描述

《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状态

展开阅读全文
相关资源
猜你喜欢
相关搜索

当前位置:首页 > IT计算机 > 网站策划/UE

copyright@ 2008-2023 yzwku网站版权所有

经营许可证编号:宁ICP备2022001189号-2

本站为文档C2C交易模式,即用户上传的文档直接被用户下载,本站只是中间服务平台,本站所有文档下载所得的收益归上传人(含作者)所有。装配图网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对上载内容本身不做任何修改或编辑。若文档所含内容侵犯了您的版权或隐私,请立即通知装配图网,我们立即给予删除!