当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > div+css样式表的id和class常用命名规则

CSS样式表
DIV+CSS网页制作这种叫法不准确
CSS初学者入门:使用table布局网页不明智
xHTML+CSS网页制作和搜索引擎优化SEO的关系
CSS控制页面样式的4种方式和优先级问题
CSS入门教程:CSS选择器
CSS基础入门教程:CSS选择器规范化命名
CSS基础入门教程:理解盒子模型
CSS教程:2个重要概念块状元素和内联元素
CSS实例:盒模型、块状元素与内联元素、CSS选择器
css实例教程:理解Float的含义
CSS实例教程:清除浮动Clear
CSS网页制作教程:制作网页导航条
CSS实例教程:浮动(float)页面布局
CSS实例教程:定位(position)布局页面
CSS实例教程:用position来布局页面
CSS实例教程:CSS Hack
CSS制作网页技巧:单图片按钮实例
CSS网页制作入门实例:首行缩进两个文字
2天掌握DIV+CSS网页制作技术
CSS网页定位教程:详细学习定位知识

CSS样式表 中的 div+css样式表的id和class常用命名规则


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2010-01-10   浏览: 46 ::
收藏到网摘: n/a

要是就几行或几十行代码吧!就根据英文单词就行了。可是要是多了那就不好写了,有时候就直接用汉语拼音或拼音的首字母代替。可是多了吧,自己写的都看不出是什么意思,别说再让程序员调用这些样式了。div+css样式表的id和class的区别:就一句来概括, class可以定义多个值并且可以应用到多个标签上,但id只能是一个。所以就开始查一些相关的div+css样式表id和class的常用命名规则,请大家参考一下:

  首先讲一下div+css样式表的id的常用命名规则如下表所示:

页头
header
登录条
loginBar
标志
logo
侧栏
sideBar
广告
Banner
导航
nav
子导航
subNav
菜单
menu
子菜单
subMenu
搜索
search
滚动
scroll
页面主体
main
内容
content
标签页
tab
文章列表
list
提示信息
msg
小技巧
tips
栏目标题
title
加入
joinus
指南
guild
服务
service
热点
hot
新闻
news
下载
download
注册
regsiter
状态
status
按钮
btn
投票
vote
合作伙伴
partner
友情链接
friendLink
页脚
footer
版权
copyRight
 
 


     
  实际上上面的div+css样式表的id命名也会经常用大小写和_来区分,比如主导航就是MainNav,如果还有必要在区分就是MainNav_1,MainNav_2等等。也可以使用"类型+变量名称"的规则来命名,比如写一个红色字体的class,可以.f_red {}(f是font 字体的缩写)。总之原则是:大小写、_、缩写,大大增强代码的可读性。


  再讲一下div+css样式表的class的常用命名规则如下表所示:

 外 套
wrap
主导航
mainNav
子导航
subnav
页 脚
footer
整个页面
content
页 眉
header
商 标
label
标 题
title
主导航
mainNav
边导航
sidebar
左导航
leftsideBar
右导航
rightsideBar
旗 志
logo
标 语
banner
菜单内容
menu1Content
菜单容量
menuContainer
子菜单
submenu
边导航图标
sidebarIcon
注释
note
面包屑
breadCrumb
容器
container
内容
content
搜索
search
登陆
login
功能区
shop
当前的
current
 
 

  当然像div+css样式表的id和class的命名远远不止这些,可能还会有更多的命名,你可以用一些通俗的易懂.容易理解的一些来命名,如果您有更好的div+css样式表的id和class的命名规则的话,请留言,多多指教.