css命名及书写规范大全(3)
作者:prower 来源:prower 发布时间:2008-05-24 08:52:00
3. 调用样式表:
外部样式表调用:
页面内嵌法:就是将样式表直接写在页面代码的head区。 如:
<style type=”text/css”><!– body { background : white ; color : black ; } –> </style>
外部调用法:将样式表写在一个独立的.css文件中,然后在页面head区用类似以下代码调用。
<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;”
猜你喜欢
- asp 中处理文件上传以及删除时常用的自定义函数:删除文件,建立目录的程序,根据原文件名生成新的随机文件名,CMS替换函数,将所有开始,结束
- 在 玉伯 的文章 《一道大题目,嘿嘿》 中有这样一段代码:[] == ![]也许很多同学迷惑:咦,这个如何转换呢?首先,我们了解下逻辑 NO
- 随机背景--当你每次进入该页面时,从已指定的图片文件夹中,随机选取一个图片作为背景显示。这里介绍的方法是用ASP+CSS来实现的。 &nbs
- 众所周知道,IE向来是我们在制作网页时最难搞定的对手。但又迫于其用户群数量之多,我们不得不想法设法搞定它。下面,将介绍的将是利用其特点而被发
- show tables或show tables from database_name;解释:显示当前数据库中所有表的名称show datab
- 看到豆瓣上有网友提了这个问题,看到回答的人不多,忍不住写了下面的内容。工作中最常用到的统计方法有哪些?根据我自己的经验给举些例子。1.通过一
- <script language="vbscript" runat="s
- 表中主键必须为标识列,[ID] int IDENTITY (1,1)1.分页方案一:(利用Not In和SELECT TOP分页)语句形式:
- 代码如下:USE [tempdb] GO /****** Object: UserDefinedFunction [dbo].[fun_ge
- 在网上查了部分资料但是发现粘上去的代码都存在问题,无奈只好自己修改了一下,代码如下: 如下代码能正常运行,都是网上查找资料最后拼凑总结出来的
- 示例一:直接编写AJAX 实现。 客户端: 代码如下:<!DOCTYPE html PUBLIC &qu
- 曾经有许多创造性的logo设计案例,logo设计资源和logo设计指导张贴在互联网的各个角落。这些帮助会为你的logo设计创造一个功能强大的
- 现在的离线浏览器很多,可是多数都是共享软件,或是英文软件,这给我们的操作带来了很大的不便。其实微软的网页制作工具FrontPage XP有一
- 1.新建一个vs2003的web工程,取名为XMLTest &nbs
- 前一段时间就安装了AspJpeg 2.0,一直没有时间去测试,直到昨天晚上因为服务器无法访问才在本机测试下,特分享下测试结果,只针对GIF图
- 文字链接可以说是网页中最常见的页面元素了,默认的文字链接样式都是带下划线的效果,这种一陈不变的外观可能使很多朋友都想改变它,以使之符合页面的
- 按照CSS规范,浮动元素(floats)会被移出文档流,不会影响到块状盒子的布局而只会影响内联盒子(通常是文本)的排列。因此当其高度超出包含
- 代码如下:'************************************ '截取文字长度函数,支持UT
- Gmail 作为一个经典的 Web 2.0 应用,在带来革命性的邮件管理体验的同时,以其完整、快速的 AJAX 操作方式,深受用户的推崇和技
- 浏览网页的时候经常会碰到一些不认识的英文单词,或者想知道一些中文单词的翻译,这时候再去找翻译软件或者翻译网站就有些麻烦了。因此我做了一个“中