|
CSS网页布局的常用规范(二)
<link rel=”stylesheet” rev=”stylesheet” href=”css/style.css” type=”text/css” media=”all” /> 在符合web标准的设计中,推荐使用外部调用法,可以不修改页面只修改.css文件而改变页面的样式。如果所有页面都调用同一个样式表文件,那么改一个样式表文件,可以改变所有文件的样式。 4、选用恰当的元素: 根据文档的结构来选择HTML元素,而不是根据HTML元素的样式来选择。例如,使用P元素来包含文字段落,而不是为了换行。如果在创建文档时找不到适当的元素,则可以考虑使用通用的div 或者是span; 避免过渡使用div和span。少量、适当的使用div和span元素可以使文档的结构更加清晰合理并且易于使用样式; 尽可能少地使用标签和结构嵌套,这样不但可以使文档结构清晰,同时也可以保持文件的小巧,在提高用户下载速度的同时,也易于浏览器对文档的解释及呈视; 5、派生选择器: 可以使用派生选择器给一个元素里的子元素定义样式,在简化命名的同时也使结构更加的清晰化,如: .mainMenu ul li {background:url(images/bg.gif;)} 6、辅助图片用背影图处理: 这里的”辅助图片”是指那些不是作为页面要表达的内容的一部分,而仅仅用于修饰、间隔、提醒的图片。将其做背影图处理,可以在不改动页面的情况下通过CSS样式来进行改动,如: #logo {background:url(images/logo.jpg) #FEFEFE no-repeat right bottom;} 7、结构与样式分离: 在页面里只写入文档的结构,而将样式写于css文件中,通过外部调用CSS样式表来实现结构与样式的分离。 8、文档的结构化书写: 页面CSS文档都应采用结构化的书写方式,逻辑清晰易于阅读。如: <div id=”mainMenu”> <ul> <li><a href=”#” >首页</a></li> <li><a href=”#” >介绍</a></li> <li><a href=”#” >服务</a></li> </ul> </div> /*=====主导航=====*/ #mainMenu { width:100%; height:30px; background:url(images/mainMenu_bg.jpg) repeat-x; } #mainMenu ul li { float:left; line-height:30px; margin-right:1px; cursor:pointer; } /*=====主导航结束=====*/ 9、鼠标手势: 在XHTML标准中,hand只被IE识别,当需要将鼠标手势转换为“手形”时,则将“hand”换为“pointer”,即“cursor:pointer;” 二.注释书写规范 1、行间注释: 直接写于属性值后面,如: .search{ border:1px solid #fff;/*定义搜索输入框边框*/ background:url(../images/icon.gif) no-report #333;/*定义搜索框的背景*/ } 2、整段注释: 分别在开始及结束地方加入注释,如: /*=====搜索条=====*/ .search { border:1px solid #fff; background:url(../images/icon.gif) no-repeat #333; } /*=====搜索条结束=====*/ 三.样式属性代码缩写 1、不同类有相同属性及属性值的缩写:
|
|||||||||||||||
|
|
| 最新文章 |
| 图片主题 | ||||
| |
||||
| 热门文章 |
| 推荐文章 | ||||
| |
||||
| 相关文章 |
| 便民服务 | ||||||||||||||||||||||||||||||||
| |
||||||||||||||||||||||||||||||||