CSS常见问题和技巧总结
日期:2007年12月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中的声明顺序来设定的。 - [1] [2] [3] 下一页
-
- CSS常见问题和技巧总结 相关文章:
- ·XP提示“虚拟内存不足”原因总结
- ·学习CSS制作网页总结的一些经验技巧
- ·CSS常见问题和技巧总结
- ·学习总结:搜索引擎优化(SEO)用不着特复杂
- ·jQuery语法总结和注意事项
- ·第一次WEB2.0创业日子回顾与总结
- ·Google adsense 2007巡讲大会上海站总结
- ·总结经典:木马十大藏身地点大搜查
- ·CSS技巧总结 段正淳的css笔记 Ⅰ
- ·微软.Net开发中的多线程编程总结
- CSS常见问题和技巧总结 相关软件
- ·二00四年总结
- ·新东方张亚哲四六级英语考试词汇总结
- ·政经背诵总结
- ·2005年考研政治强化班(总结与总论)笔记
- ·2005XDF强化任汝芬总结flash版(05)
- ·2005XDF强化任汝芬总结flash版(04)
- ·2005XDF强化任汝芬总结flash版(03)
- ·2005XDF强化任汝芬总结flash版(02)
- ·2005XDF强化任汝芬总结flash版(01)
- ·roal总结的资产评估大题
- 特别声明:本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载,但请务必注明出处和原始作
- 者.文章版权归文章原始作者所有.对于被本站转载文章的个人和网站,我们表示深深的谢意。如果本站转
- 载的文章有版权问题请联系编辑人员,我们尽快予以更正. 转载请注明来源:http://www.hackhome.com
上一篇:巧用Syskey命令保障系统安全
精品推荐
热点TOP10
- ·用CSS给网页图片添加滤镜效果
- ·学习CSS制作网页的多个经验技巧
- ·站长推荐:53个CSS-不可或缺的技巧
- ·网页中用于构造图表的一些基本CSS代码
- ·DIV CSS网页布局实例:十步学会用CSS建站
- ·DIV CSS网页技巧:网页布局中border断线现象
- ·推荐好文:无懈可击的CSS圆角技术
- ·用Div仿showModalDialog模式菜单的效果
- ·学习CSS制作网页总结的一些经验技巧
- ·网站配色,CSS主色调配色方案
- ·自定义网页超链接下划线的CSS代码
- ·CSS样式表实现效果很好的分页效果源代码
- ·用CSS实现文字垂直居中的代码
- ·网页制作学习:由浅入深详解CSS的margin属性
- ·5款纯div+css制作的弹出菜单(标准且无js)
- ·CSS+DIV+Javascript制作滑动门菜单技术
- ·Css改变鼠标形状的15种效果代码
- ·CSS实现图片阴影效果三部曲(译文)
- ·学习样式表CSS参考:常用的CSS知识
- ·网页制作经验分享:CSS布局如何进行
特别推荐
- ·多个CSS样式表争夺特定选择符的控制权
- ·学习CSS制作网页总结的一些经验技巧
- ·CSS初学者应该保持的一种心态
- ·CSS常见问题和技巧总结
- ·DIV+CSS常见错误汇总
- ·设计中常用的十个CSS技巧
- ·网站配色,CSS主色调配色方案
- ·你是哪个等级的CSS开发人员?
- ·简单的CSS改进网站设计三个技巧
- ·使用CSS样式表让英文文本自动换行
- ·用CSS给网页图片添加滤镜效果
- ·国外译文:网页设计如何使用CSS的选择器模式?
- ·常见的CSS问题的“一站式”的解决方案
- ·学习CSS从何入手技术
- ·CSS注释、命名、继承性、样式排序等CSS技巧的小结
- ·推荐好文:无懈可击的CSS圆角技术
- ·标准网页中用CSS进行段落排版的方法
- ·CSS实现带背景图片的文字链接的方法
- ·网页制作经验分享:CSS布局如何进行
- ·CSS基础:CSS选择符
