《css xhtml规范化命名参考》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、CSSXHTML规范化命名参考使用语义化方式为CSS命名可以像这样:#container{…}/*—-Topsection—-*/#header{…}#navbar{…}/*—-Main—-*/#menu{…}#main{…}#sidebar{…}/*—-Footer—-*/#footer{…}3Container“#container“就是将你页面中的所有元素包在一起的部分，这部分你还可以命名为:”wrapper“,“wrap“,“page“.4Header“#header”是网站页面的头部区域，一般来讲，它包含网

2、站的logo和一些其他元素。这部分你还可以命名为:”top“,“logo“,“page-header”(或pageHeader).5Navbar“#navbar“等同于横向的导航栏，是最典型的网页元素。这部分你还可以命名为:“nav”,“navigation”,“nav-wrapper”.6Menu“#Menu”区域包含一般的链接和菜单，这部分你还可以命名为:”sub-nav”,“links“.7Main“#Main”是网站的主要区域，如果是博客的话它将包含你的日志。这部分你还可以命名为:”content“,“mai

3、n-content”(or“mainContent”)。8Sidebar“#Sidebar”部分可以包含网站的次要内容，比如最近更新内容列表、关于网站的介绍或广告元素等…这部分你还可以命名为:”sub-nav“,“side-panel“,“secondary-content“.9Footer“#Footer”包含网站的一些附加信息，这部分你还可以命名为:”copyright“.一、文件命名规范基本样式：base.css全局样式：global.css框架布局：layout.css字体样式：font.css链接样式：li

4、nk.css打印样式：print.css二、常用类/ID命名规范页　眉：header内　容：content容　器：container页　脚：footer版　权：copyright导　航：menu主导航：mainMenu子导航：subMenu标　志：logo标　语：banner标　题：title侧边栏：sidebar图　标：icon注　释：note搜　索：search按　钮：btn登　录：login链　接：link信息框：manage搜索框”则应命名为“searchInput”、“搜索图标”命名这“searchIcon

5、”、“搜索按钮”命名为“searchBtnXHTML-CSS写作建议1、所有的xhtml代码小写；2、属性的值一定要用双引号(“”)括起来，且一定要有值；3、每个标签都要有开始和结束，且要有正确的层次；4、空元素要有结束的tag或于开始的tag后加上”/”；5、表现与结构完全分离，代码中不涉及任何的表现元素，如style、font、bgColor、border等；6、

到

的定义，应遵循从大到小的原则，体现文档的结构，并有利于搜索引擎的查询；7、给每一个表格和表单加上一个唯一的、结构标记id；8、给重要的

6、区块加上注释；9、给图片加上alt属性；10、所有的标签必须进行合理的嵌套；11、根元素前必须有元素，宣告使用那一种DTD；12、根元素必须有xmlns属性来指定使用http://www.w3.org/1999/xhtml的namespace。12、hack书写规范因为不同浏览器对W3C标准的支持不一样，各个浏览器对于页面的解释呈视也不尽相同，比如IE在很多情况下就与FF存在3px的差距，对于这些差异性，就需要利用css的hack来进行调整，当然在没有必要的情况下，最好不要写hack来进行调整，避免因为hack而导致

7、页面出现问题。1、IE6、IE7、Firefox之间的兼容写法：写法一：IE都能识别*;标准浏览器(如FF)不能识别*；IE6能识别*，但不能识别!important,IE7能识别*，也能识别!important;FF不能识别*，但能识别!important;根据上述表达，同一类/ID下的CSS　hack可写为：.searchInput{background-color:#333;/*三者皆可*/*background-color:#666　!important;/*仅IE7*/*background-color:#

8、999;/*仅IE6及IE6以下*/}一般三者的书写顺序为：FF、IE7、IE6.写法二：IE6可识别“_”，而IE7及FF皆不能识别，所以当只针对IE6与IE7及FF之间的区别时，可这样书写：.searchInput{background-color:#333;/*通用*/_background-color:#666;/*仅IE6可识别*/}