至CSS新手：CSS网页布局的常用规范.docVIP

　　至CSS新手：CSS网页布局的常用规范edu.5151doc. 教育资源库 CSS命名规范 一．文件命名规范 全局样式：global.css； 框架布局：layout.css； 字体样式：font.css； 链接样式：link.css； 打印样式：print.css； 二．常用类/ID命名规范 页　眉：header 内　容：content 容　器：container 页　脚：footer 版　权：copyright　 导　航：menu 主导航：mainMenu 子导航：subMenu 标　志：logo 标　语：banner 标　题：title 侧边栏：sidebar 图　标：Icon 注　释：note 搜　索：search 按　钮：btn 登　录：login 链　接：link 信息框：manage …… 常用类的命名应尽量以常见英文单词为准，做到通俗易懂，并在适当的地方加以化命名的同时也使结构更加的清晰化，如： .mainMenuulli{background:url(images/bg.gif;)} 6、辅助图片用背影图处理： 这里的”辅助图片”是指那些不是作为页面要表达的内容的一部分，而仅仅用于修饰、间隔、提醒的图片。将其做背影图处理，可以在不改动页面的情况下通过CSS样式来进行改动，如： #logo{background:url(images/logo.jpg)#FEFEFEno-repeatrightbottom;} 7、结构与样式分离： 在页面里只写入文档的结构，而将样式写于css文件中，通过外部调用CSS样式表来实现结构与样式的分离。 8、文档的结构化书写： 页面CSS文档都应采用结构化的书写方式，逻辑清晰易于阅读。如： lt;divid=”mainMenu”gt; lt;ulgt; lt;ligt;lt;ahref=”#”gt;首页lt;/agt;lt;/ligt; lt;ligt;lt;ahref=”#”gt;介绍lt;/agt;lt;/ligt; lt;ligt;lt;ahref=”#”gt;服务lt;/agt;lt;/ligt; lt;/ulgt; lt;/divgt; /*=====主导航=====*/ #mainMenu{ ages/mainMenu_bg.jpg)repeat-x; } #mainMenuulli{ float:left; line-height:30px; margin-right:1px; cursor:pointer; } /*=====主导航结束=====*/ 9、鼠标手势： 在XHTML标准中，hand只被IE识别，当需要将鼠标手势转换为“手形”时，则将“hand”换为“pointer”，即“cursor:pointer;” 二．adding:10px8px12px5px; } 而如果当上边与下边、左边与右边的边框属性值相同时，则属性值可以直接缩写为两个，如： .btn{ margin-top:10px; margin-right:5px; margin-bottom:10px; margin-left:5px; } 缩写为： .btn{margin:10px5px;} 而当上下左右四个边框的属性值都相同时，则可以直接缩写成一个，如： .btn{ margin-top:10px; margin-right:10px; margin-bottom:10px; margin-left:10px; } 缩写为： .btn{margin:10px;} 4、颜色值的缩写： 当RGB三个颜色值数值相同时，可缩写颜色值代码。如： .menu{color:#ff3333;} 可缩写为: .menu{color:#f33;} 四．hack书写规范 因为不同浏览器对AC上safari浏览器独有的。 *:lang(zh)select{font:12px!important;}/*FF的专用*/ select:empty{font:12px!important;}/*safari可见*/ IE6可识别： 这里主要是通过CSS