HTML命名+CSS书写顺序_html/css_WEB-ITnose

HTML CSS

在XHTML中定义ID时都用得上，主要是方便CSS定义样式时能一眼看穿。所以，CSS命名仅作参考。(1)页面结构类容器: container页头：header内容：content/container页面主体：main页尾：footer导航：nav侧栏：sidebar栏目：column页面外围控制整体布局宽度：wrapper(2)导航类导航：nav主导航：mainnav子导航：subnav顶导航：topnav边导航：sidebar左导航：leftsidebar右导航：rightsidebar位置导航： crumb菜单：menu子菜单：submenu面包屑：breadcrumb(即页面所处位置导航提示)(3)网页内容类标题: title摘要: summary箭头： arrow商标： label网站标志： logo转角/圆角： corner横幅广告： banner子菜单： subMenu搜索： search搜索框： searchBox登录： login登录条：loginbar工具条： toolbar下拉： drop标签页： tab当前的： current列表： list滚动： scroll服务： service提示信息： msg热点：hot新闻： news小技巧： tips下载： download栏目标题： title热点： hot加入： joinus注册： regsiter指南： guide友情链接： friendlink状态： status版权： copyright按钮： btn合作伙伴： partner投票： vote左右中：left right center(二)注释的写法:/* Footer */内容区/* End Footer */(三)id的命名:(1)页面结构容器: container页头：header内容：content/container页面主体：main页尾：footer导航：nav侧栏：sidebar栏目：column页面外围控制整体布局宽度：wrapper左右中：left right center(2)导航导航：nav主导航：mainbav子导航：subnav顶导航：topnav边导航：sidebar左导航：leftsidebar右导航：rightsidebar菜单：menu子菜单：submenu标题: title摘要: summary(3)功能标志：logo广告：banner登陆：login登录条：loginbar注册：regsiter搜索：search功能区：shop标题：title加入：joinus状态：status按钮：btn滚动：scroll标签页：tab文章列表：list提示信息：msg当前的: current小技巧：tips图标: icon注释：note指南：guild服务：service热点：hot新闻：news下载：download投票：vote合作伙伴：partner友情链接：link版权：copyright(四)class的命名:(1)颜色:使用颜色的名称或者16进制代码,如.red { color: red; }.f60 { color: #f60; }.ff8600 { color: #ff8600; }(2)字体大小,直接使用"font+字体大小"作为名称,如.font12px { font-size: 12px; }.font9pt {font-size: 9pt; }(3)对齐样式,使用对齐目标的英文名称,如.left { float:left; }.bottom { float:bottom; }(4)标题栏样式,使用"类别+功能"的方式命名,如.barnews { }.barproduct { }注意事项::1.一律小写;2.尽量用英文;3.不加中杠和下划线;4.尽量不缩写，除非一看就明白的单词.推荐的 CSS 书写顺序//显示属性displaylist-stylepositionfloatclear//自身属性widthheightmarginpaddingborderbackground//文本属性colorfonttext-decorationtext-alignvertical-alignwhite-spaceother textcontent

回复讨论(解决方案)

谢楼主送分

名字太长了。。有的一层套一层的那种该怎么命名才比较对呢？

很　　赞！

我好喜欢哦。

呵呵 已经保存了,以后就不会为起什么名而感到烦恼！谢谢啦！

面包屑是什么东西?


版权：copyright 后面有一个卷C的字符.

如何显示?

学习了，太棒了

有些使用了驼峰方式，有些没使用，不统一。

好东西。接分来着

我不是很喜欢驼峰。

这个不错了，写代码一定要规范

不管写什么语言的代码，命名永远是让人头疼的任务~~

很不错，谢谢！

挺不错的，支持一下。规范

很好，收藏了

收藏了，接分。

多谢整理分享

有用，望第一次得分！

正找这个呢

可以参考下，命名确实是一个头疼的问题

很实用的东西！

这还是很有用的

这个不错，命名总是让人头疼的

谢楼主。。。

真不错，，，终于知道怎么命名了

很细心的楼主， 希望以后资源共享互勉励，

谢谢楼主！！！

学习了，谢谢

(1)颜色:使用颜色的名称或者16进制代码,如

.red { color: red; }
.f60 { color: #f60; }
.ff8600 { color: #ff8600; }

(2)字体大小,直接使用"font+字体大小"作为名称,如

.font12px { font-size: 12px; }
.font9pt {font-size: 9pt; }

(3)对齐样式,使用对齐目标的英文名称,如

.left { float:left; }
.bottom { float:bottom; }

这里的命名方式不推荐，应该按照功能或结构命名，而不应按照表现命名。
例如.red { color: red; } 如果要把颜色改成green，岂不是要变成.red { color: green; }，
让后面的开发人员看的莫名其妙。

很好很强大

谢谢···

嗯 一直没怎么注意