css+div 常用小知识(CSS样式命名规范)

css+div 常用小知识（CSS样式命名规范）
2009-11-25 11:21
CSS命名规范

　　一．文件命名规范

　　全局样式：global.css；
　　框架布局：layout.css；
　　字体样式：font.css；
　　链接样式：link.css；
　　打印样式：print.css；

　　二．常用类/ID命名规范

　　页　眉：header/top

　　内　容：content

　　容　器：container

　　页　脚：footer

　　版　权：copyright
　
　　导　航：menu

　　主导航：mainMenu

　　子导航：subMenu

　　标　志：logo

　　标　语：banner

　　标　题：title

　　侧边栏：sidebar

　　图　标：Icon

　　注　释：note

　　搜　索：search

　　按　钮：btn

　　登　录：login

　　链　接：link

　　信息框：manage
　　……

加粗 〈B〉〈/B〉
斜体 〈I〉〈/I〉
底线 〈U〉〈/U〉
删除线 〈S〉〈/S〉

一、自定义命名：

1、常用类的命名应尽量以常见英文单词为准，做到通俗易懂，并在适当的地方加以注释。对于二级类/ID

命名，则采用组合书写的模式，后一个单词的首字母应大写：诸如“搜索框”则应命名为“searchInput”、“搜

索图标”命名这“searchIcon”、“搜索按钮”命名为“searchBtn”……


根据w3c网站上给出的,最好是用意义命名
比如：是重要的新闻高亮显示（像红色）
有两种
.red{color:red}
.important-news{color:red}
很显然第二种传达的意义更加明确,所以尽量不要用意义不明确的作为自己自定义的名字


id就是你的身分证号, class就是你的类别
我叫你所属的class可能有一群人回头, 但是叫你的id就只有你一个人知道
#针对一类元素来修饰, id只对特定的某个元素
==================================
#skillareas ol .skill .skillset li { border-bottom:1px dashed #cccccc; }
这个是一种简便的写法, 说白了就是
#skillareas { border-bottom:1px dashed #cccccc; }
ol { border-bottom:1px dashed #cccccc; }
.skill { border-bottom:1px dashed #cccccc; }
skillset { border-bottom:1px dashed #cccccc; }
li { border-bottom:1px dashed #cccccc; }
的缩写


2、辅助图片用背影图处理：

这里的”辅助图片”是指那些不是作为页面要表达的内容的一部分，而仅仅用于修饰、间隔、提醒的图片

。将其做背影图处理，可以在不改动页面的情况下通过CSS样式来进行改动，如：

　　#logo {background:url(images/logo.jpg) #FEFEFE no-repeat right bottom;}

8、文档的结构化书写：

　　页面CSS文档都应采用结构化的书写方式，逻辑清晰易于阅读。如：

　　<div id=”mainMenu”>
　　<ul>
　　<li><a href=”#” >首页</a></li>
　　<li><a href=”#” >介绍</a></li>
　　<li><a href=”#” >服务</a></li>