CSS命名及一些CSS技巧
首先是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的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
|
一个不经常用到的语法：!important
!important是CSS1就定义的语法，作用是提高指定样式规则的应用优先权(参见：W3.org的解释)。语法格式{ sRule!important }，即写在定义的最后面，例如：
box{color:red !important;}
最重要的一点是：IE一直都不支持这个语法，而其他的浏览器都支持。因此我们就可以利用这一点来分别给IE和其他浏览器不同的样式定义，例如，我们定义这样一个样式：
.colortest { border:20px solid #60A179 !important; border:20px solid #00F; padding: 30px; width : 300px; }
在Mozilla中浏览时候，能够理解!important的优先级，因此显示#60A179的颜色：
利用!important，我们可以针对IE和非IE浏览器设置不同的样式，只要在非IE浏览器样式的后面加上!important。因此，上面提到的我的主页2px的显示差别也轻松解决：
PADDING-TOP: 11px !important;
PADDING-TOP: 9px;
!important必定成为CSS布局的利器，请记住和掌握它吧:)
另外看到一个把图片做成flash感觉的代码：
#header div.lc {
background:url(“http://imgsrc.baidu.com/css/pic/item/7ca888341125df61241f1473.jpg”) repeat scroll 0 0 transparent;
height:330px !important;
left:350px;
opacity:0.15;
top:0 !important;
width:700px;
}
如上是一个雪花感觉的flash，只需要在下面覆盖上一个能区别出白色的图片或背景，雪花飘飘的感觉马上就出来啦！
转载请注明来源：Way-《CSS命名及一些CSS技巧》
