通信网--中国通信行业门户网站 | 中国行业网站集群--通信行业电子商务唯一网站 设为首页 | 收藏本站
免费注册 商机无限 商务中心 行业展会 立即发布商机
网站首页 公司库 产品库 商机库 行业资讯 展会信息 招聘信息 招商加盟 下载中心 招标信息
关键词:
热门词汇: IP网络电话   语音识别   手机充电器   手机GPS   3G手机   传输设备   交换设备
  行业要闻 | 通信市场 | 通信技术 | 网络学院 | 5G前沿 | 4G前沿 | VoIP | IPTV | WiMAX | 呼叫中心 | IT制造 | IT就业  
  企业专栏 | 企业报道 | 通信标准 | 通信百科 | 分析预测 | 手机评测 | 增值通信 | 政策法规 | 专家观点 | 网商访谈 | 招标信息 | 物联网
网上展览:
综合厂商 | 手机 | IP电话 | 交换机 | 呼叫中心 | 网络 | 终端 | 电源 | 仪器 | 光纤 | 电缆 | 电脑 | 数码 | 软件 | 其他
中国通信网最新加盟企业: 
当前位置:网站首页 > 行业资讯 > 网络学院
【创心服务 联通你我】青春逢盛世,奋斗正当时
中国通信网 时间:2009-05-19 信息来源:网页教学网
1、善用css缩写可以减少页面文件大小,提高下载速度,同时使代码简洁可读。
如:

div{
    border-top:1px solid #cccccc;
    border-left:1px solid #cccccc;
    border-right:1px soli #cccccc;
    border-bottom:1px solid #cccccc;
}

可以写为

p{border:1px solid #cccccc}

再如:

div{
    margin-top:10px;
    margin-right:20px;
    margin-bottom:30px;
    margin-left:40px;
}

可以改写为:

/*注意上、右、下、左的书写顺序*/
div{margin:10px 20px 30px 40px}
/*注意,数值与单位不能有空格,每个值之间用空格隔开*/

(详细请参考:css2参考手册、常用css缩写总结)

2、可以同时为一个html元素的class属性设定多个规则(多重class定义)。
通常我们写法为:


实际上我们可以为p元素指定多个规则,如:

CSS:
.a{…}
.b{….}
HTML:

该元素同时包括a和b中设定的样式


注意:多个规则之间用空格分开。

3、明确定义单位,除非值为0
忘记定义尺寸是css初学者新手普遍存在的问题。在html我们可以写width=”100”,但在css中应该给出一个准确的单位。如:width:100px;height:50px;font-size:9pt ,0值除外,因为不论对于任何单位。0值的大小都是相等的。

注意:不要在数值和单位之间加空格。

4、区分大小写
在xhtml中,css定义的元素名称是区分大小写的,class和id的值在html和xhtml中也是区分大小写的,所以为了避免错误,推荐一律使用小写。
如#aaa,与#AAA是不同的,在xhtml中,p和P也是不同的.他们之间不会覆盖。
如果在css中定义了#aaa,在html元素中使用AAA来应用将不能得到#aaa中定义的样式。
示例代码:

CSS:
#aaa{border:1px solid #ccc}  
HTML:
显示不出来1个像素的边线

5、CSS的最近优先原则
如果对一个元素定义了多次样式,则以最近的一级优先,最近一级的样式将覆盖其他的样式定义。
如:

CSS:
p{color:red}
.blue{color:blue}
.yellow{color:yellow}
HTML:

此处显示为红色


此处显示为蓝色


此处显示为绿色


此处显示为黄色


注意:
(1)注意样式的几个优先顺序(优先级由上至下递减):
--元素style设定
--head区 中的设定
--外部引用css文件
(2)优先级不是按访问顺序来设定的,而是又css中的声明顺序来设定的。
如上例中

此处显示为黄色

也显示为黄色,因为在css定义中.yellow在.blue的后面。

6、使用子选择器减少id和class的定义
例如:

#contain{..}
#contain_ul{...}
.contail_li{...}

         


可以更改为:

#contain{..}
#contain ul{...}
.contain ul li{...}


7、不要给背景图片路径加引号
将background:url("xxx.gif")改为background:url(xxx.gif)
因为对于部分浏览器加引号反而会引起错误。
8、背景图片的路径是相对与当前css页面的路径。

例如:
有如下目录结构
 --images
    --xxx.gif
 --css
    --xx.css
 --index.html
代码内容
index.html引用xx.css文件。
xx.css要引用xxx.gif图片其写法为:background:url(../images/xxx.gif)

9、使用组选择器为不同元素应用相同的样式
如h1,h2,h3,div{font-size:16px;font-weight:bold}
则h1,h2,h3,div元素的样式都为字体16像素,字体粗体

10、书写正确的链接样式
当用css定义链接的各种状态时,一定要注意其书写顺序,即::link :visited :hover :active
如果不按照该顺序书写可能无法达到自己希望的效果。为了记忆该顺序我们抽取每个单词的首字母:L V H A,你可以通过记忆LoVe,Hate,两个单词来记住其顺序。

11、禁止内容换行与强制内容换行
在表格或层中我们可能希望内容不换行或强制换行,我们可以通过一些css属性来达到这些要求。
禁止换行:white-space:nowrap
强制换行:word-wrap: break-word; word-break: normal;

12、区别relative和absolute
Absolute,CSS中的写法是:position:absolute; 他的意思是绝对定位,他是参照浏览器的左上角,配合TOP、RIGHT、BOTTOM、LEFT(下面简称TRBL)进行定位,在没有设定TRBL,默认依据父级的做标原始点为原始点。如果设定TRBL并且父级没有设定position属性,那么当前的absolute则以浏览器左上角为原始点进行定位,位置将由TRBL决定。

Relative,CSS中的写法是:position:relative;  他的意思是绝对相对定位,他是参照父级的原始点为原始点,无父级则以BODY的原始点为原始点,配合TRBL进行定位,当父级内有padding等CSS属性时,当前级的原始点则参照父级内容区的原始点进行定位。

13、区别div和span
div是一个块级元素,可以包含段落,表格等内容,用于放置不同的内容。一般我们在网页通过div来布局定位网页中的每个区块。
span是一个内联元素,没有实际意义,它的存在纯粹是为了应用样式,给一段内容加上标记可以通过在span上定义样式来设定其内容的样式。

14、区别display和visibility
display:none和visibility:hidden都可以隐藏一个元素
但visibility:hidden只是隐藏了元素的内容,但其使用的位置空间仍然被保留。
而display:none则相当把元素从页面中去除,其占用位置也将被删除。
相关资讯
· 【创心服务 联通你我】青春逢盛世,奋斗正当时 (2012-01-17)
· 【创心服务 联通你我】青春逢盛世,奋斗正当时 (2012-01-14)
· 【创心服务 联通你我】青春逢盛世,奋斗正当时 (2012-01-12)
· 【创心服务 联通你我】青春逢盛世,奋斗正当时 (2012-01-11)
· 【创心服务 联通你我】青春逢盛世,奋斗正当时 (2012-01-09)
发表评论
昵   称:   匿名发表
验证码: 
 
热门资讯
【创心服务 联通你我】青春逢盛... (2009-09-15)
【创心服务 联通你我】青春逢盛... (2011-04-28)
【创心服务 联通你我】青春逢盛... (2009-09-16)
【创心服务 联通你我】青春逢盛... (2008-07-15)
【创心服务 联通你我】青春逢盛... (2008-05-23)
【创心服务 联通你我】青春逢盛... (2008-07-31)
【创心服务 联通你我】青春逢盛... (2008-07-31)
【创心服务 联通你我】青春逢盛... (2012-01-09)
【创心服务 联通你我】青春逢盛... (2011-01-30)
【创心服务 联通你我】青春逢盛... (2010-05-28)
【创心服务 联通你我】青春逢盛... (2008-07-31)
【创心服务 联通你我】青春逢盛... (2011-02-17)
【创心服务 联通你我】青春逢盛... (2008-07-31)
【创心服务 联通你我】青春逢盛... (2009-08-13)
【创心服务 联通你我】青春逢盛... (2011-05-03)
【创心服务 联通你我】青春逢盛... (2008-07-31)
【创心服务 联通你我】青春逢盛... (2009-08-12)
【创心服务 联通你我】青春逢盛... (2008-07-31)
【创心服务 联通你我】青春逢盛... (2008-07-31)
【创心服务 联通你我】青春逢盛... (2010-07-20)
【创心服务 联通你我】青春逢盛... (2009-08-12)
【创心服务 联通你我】青春逢盛... (2010-08-27)
【创心服务 联通你我】青春逢盛... (2009-10-11)
【创心服务 联通你我】青春逢盛... (2009-08-12)
【创心服务 联通你我】青春逢盛... (2009-07-24)
国之鑫科技 | 泰尔网 | 中华网科技 | 信息产业网 | 通讯世界 | 数字通信世界 | 文传商讯 | 中华英才网 | 电话视频会议 | 凤凰科技 | 呼叫中心 | 新浪科技 | 新传媒网 | 和讯科技 | 中国科技网 | 通信英才网 | 江苏星光发电设备 | 中劳网 | 赛迪网 | MSCBSC移动通信网 | 中国软件网 | 新华网 | 腾讯科技 | 3G通信网 | 千龙网 | 光通信人才招聘网 | 通信人才网 | 中商顾问网
返回首页 | 网站简介 | 企业理念 | 免责声明 | 广告服务 | 代理政策 | 联系我们 | 铭万网 | 中国产品推广联盟
南京国之鑫科技有限公司版权所有©2008-2016 客户服务热线:025-83752991, 客户服务邮箱:gzx@gzxinfo.com
苏ICP备18005078号-1
本站图片及文字仅供功能演示,本站保留对本演示内容及功能的最终解释权

加入铭万联盟中国行业网站集群独家技术供应商