用户公告
大家好!我是博客浙江的管理员阿九
欢迎大家有什么问题给我留言,我将尽全力为您服务.

Tel:0571-87756585   QQ 258243916 MSN:mirage0848@hotmail.com 技术问题可拨打电话:0571-88228117

也可以发博客短信息给我
搜索BLOG文章
最新访问

XML RSS 2.0 WAP
我的日志
作者: faq 复制  收藏
DIV+CSS 命名规范2007-05-05
用xhtml+css的时候命名是一个问题。命名对于网站的清晰和日后的管理很重要。
今天发现了这篇文章,个人觉得非常有用。

一些css常用的规范性命名,这些名字已经成了网页设计规范,在网页设计中我们应该遵循这些规范性的名字。

站点:site
首页:homepage
导航:nav
布局:layout
搜索:search
网页头部:head/header
二级页面/子页面:subpage
登录条:loginbar
侧栏:side/sidebar
广告:banner
子导航:subnav
当前位置导航:crumb
菜单:menu
子菜单:submenu
滚动:scroll
下拉:drop
表单:form
箭头:arr/arrow
下拉菜单:dropmenu
主题/外观:theme
页面主体:main
内容:content
标签页:tab
列表:list
工具条:tool/toolbar
转角/圆角:cor/corner
提示信息:msg
小技巧:tips
标题:title
特别的:spec
资源:source
加入:joinus
指南:guild
服务:service
热点:hot
新闻:news
下载:download
注册:regsiter
状态:status
按钮:btn
投票:vote
关于我们:aboutus
网站地图:sitemap
合作伙伴:partner
友情链接:friendlink
网页底部:foot/footer
版权:copyright
提交:submit
搜索框:searchbox
文本框:textbox
统计:count
以上结构就可以组合使用,例如:左列标题lefttitle;底部导航footernav

  规范不是说要所有人照一个样子来命名css,我们可以根据自己的需要定制命名规则,只要记住命名的规则,就可以根据网站本身的特点来创造具有自己风格的命名方式。
  一、目前网页设计者用得较多的是基于软件开中变量的命名方式的命名方法。如对于一组用于定义字体样式的class,我们可以使用f即foot的头字母为前缀进行命名,如:
  f-blue:表示蓝色字体样式
  f-blod:表示粗体字体样式
对于网页中如新闻频道的一些新闻的现实样式,可以用n作为前缀进行样式设计,如:
  n-title:新闻标题
  n-list:新闻列表
  二、我们还可以将代表各个部分的名字组合起来使用,如 ,对于上面的例子,我们可以这样命名:
fontBlue: 表示蓝色字体样式
newsTitle:表示新闻列表
  这样的命名方式同样清晰明了,为大多网页设计师所接受,只不过要特别注意大小写的区分,css中是区别大小写的.开始时容易出错,多加注意便可.
  按照这样的一些命名方式,我们可以非常明确的知道css中的每一个class的用途,便于使用和设计、维护。

————————-另外一个规范——————-

1.CSS ID 的命名
外 套:  wrap
主导航:  mainnav
子导航:  subnav
页 脚:  footet
整个页面: content
页 眉:  header
页 脚:  footer
商 标:  label
标 题:  title
主导航:  mainbav(globalnav)
顶导航:  topnav
边导航:  sidebar
左导航:  leftsidebar
右导航:  rightsidebar
旗 志:  logo
标 语:  banner
菜单内容1: menu1 content
菜单容量: menu container
子菜单:  submenu
边导航图标:sidebarIcon
注释:   note
面包屑:  breadcrumb(即页面所处位置导航提示)
容器:   container
内容:   content
搜索:   search
登陆:   Login
功能区:  shop(如购物车,收银台)
当前的   current

2.另外在编辑样式表时可用的注释可这样写:
<– Footer –>
内容区
<– End Footer –>

3.样式文件命名
主要的 master.css
布局,版面 layout.css
专栏 columns.css
文字 font.css
打印样式 print.css
主题 themes.css


原创文章如转载,请注明:转载自博客浙江帮助加油站 [ http://faq.blog.zj.com/ ]
本文链接地址:http://faq.blog.zj.com/blog/d-123844.html

TAG: 博客浙江
文章评论4条回复
[shengzi] 评论于
有点小缘哦!你也学网页哦???。
现在在那家公司从事。?
[uir] 评论于
css很有用啊 学习了
[虫~虫] 评论于
这个初学很迷惑,还是需要详细的操作图例...我在网上找了点模板的CSS代码,自己尝试了几遍,页面变得不成样子了,始终搞不清楚到底怎么搞!!!
给文章评分
评分: -5 -3 -1 - +1 +3 +5
我来说两句
认证码*   看不清,就点我! 输入四位字母或数字
(您还没有登录,登录发表)
粗体 斜体 下划线 插入url链接 飞行字 移动字