css命名规则与技巧探讨

《css命名规则与技巧探讨》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。

1、CSS常用命名收录备用，CSS命名规则与技巧探讨作者：CSS浏览：552次评分：+10

2、-02008-05-061、布局常用CSS命名：名称描述名称描述warp/warpper外套(整体布局)content容器main页面主体content/container内容块site站点layout布局column栏sidebar侧栏nav导航center中left左right右1.1、结构化命名小技巧：结构化命名方法一般根据文档结构的描述来命名，如：id="mainmenu"id="sub_menu"id="main-content"上面的代码中，这3种名称都是根据文档结构进行描述命名

3、的，分别表示主菜单、次菜单和主要内容块，当我们看到这样的样式时就能清楚的知道样式所对应的元素，即使版块和元素的位置或排列顺序改变了却仍然不会影响样式与元素之间的对应关系，从而达到符合XHTML结构化的要求。2、模块常用CSS命名：名称描述名称描述header页头footer页脚logo标志banner广告login登录loginbar登录条regsiter注册search搜索subnav子导航tab标签页/标签menu菜单submenu子菜单scroll滚动hot热点vote投票list文章列表news新闻download下载guild指南service服务joinus加入pa

4、rtner合作伙伴friendlink友情链接：copyright版权shop购物车（功能区）source资源map网站地图homepage首页3、导航常用CSS命名：名称描述名称描述nav导航外套mainbav主导航subnav子导航sidebar边导航topnav顶导航sidebaricon边导航图标leftsidebar左导航rightsidebar右导航menucontainer菜单容器dropmunu下拉菜单menu菜单submenu子菜单4、类常用CSS命名：　　名称描述名称描述title标题summary摘要status状态spce特别label标签current

5、当前msg提示信息tips小技巧submit提交按钮btn按钮icon图标note注释red红色textbox文本框drop下拉form表单breadcrumb导航提示crumb导航count统计cor/corner转角/圆角scroll滚动  4.1、CLASS命名小技巧（语义化命名）：(1)颜色:使用颜色的名称或者16进制代码,如:.blue{color:blue;}.f80{color:#f80;}.f3f3f3{color:#f3f3f3;}(2)字体大小,直接使用"font+字体大小"作为名称,如：.font12px{font-size:12px;}.font9pt{

6、font-size:9pt;}(3)对齐样式,使用对齐目标的英文名称,如：.left{float:left;}.bottom{float:bottom;}(4)标题栏样式,使用"类别+功能"的方式命名,如：.barnews{}.barproduct{}5、文件常用命名：名称描述名称描述master.css主要文件base.css基本共用layout.css布局，版面module.css模块themes.css主题columns.css专栏font.css文字mend.css补丁forms.css表单print.css打印6、注释的写法：/*Header*/相关代码信息/*End

7、Header*//*Warp*/相关代码信息/*EndWarp*//*Footer*/相关代码信息/*EndFooter*/　　7、CSS命名规则：1.区分大小写：建议全部使用小写字母，单词首字母例外；2.命名合法：一般要求以字母开头，后面可跟数字、下划线、连字符、和特殊字符，但建议尽量使用英文字母，而适当使用下划线和连接线；3.尽量不要缩写，除非是约定俗成的缩写单词，要保证看得明白，否则尽量别使用；4.CSS命名要词必达意，名称要反映用途和相关信息，同时也要简短，不要符加任何冗余信息。CSS制作网页总结下的经验技巧可为您提供一些参考网站在使用CSS布局时，肯定遇到过各种各样的

8、问题，为了让设计过程更为容易些，如下经验可让您遇到困难时提供一些参考：有疑问，先验证在调试时，先对您的代码进行验证往往能省去不少麻烦事。格式不正确的XHTML/CSS会导致许多布局上的错误。在其他浏览器中进行测试之前，请先在最先进的浏览器中撰写和测试CSS代码，而不是相反。如果您在破旧的浏览器中编写和测试，你的代码就不得不依赖那个破旧浏览器的糟糕的显示，然后在符合标准的浏览器中进行测试，看到显示结果“不正常”时，你会很沮丧的。相反，您应该先将您的代码完善，然后再设法为较低级的浏览器打算。这样