没有找到合适的产品?
联系客服协助选型:023-68661681
提供3000多款全球软件/控件产品
针对软件研发的各个阶段提供专业培训与技术咨询
根据客户需求提供定制化的软件开发服务
全球知名设计软件,显著提升设计质量
打造以经营为中心,实现生产过程透明化管理
帮助企业合理产能分配,提高资源利用率
快速打造数字化生产线,实现全流程追溯
生产过程精准追溯,满足企业合规要求
以六西格玛为理论基础,实现产品质量全数字化管理
通过大屏电子看板,实现车间透明化管理
对设备进行全生命周期管理,提高设备综合利用率
实现设备数据的实时采集与监控
利用数字化技术提升油气勘探的效率和成功率
钻井计划优化、实时监控和风险评估
提供业务洞察与决策支持实现数据驱动决策
转帖|其它|编辑:郝浩|2009-02-27 11:53:32.000|阅读 459 次
概述:较好CSS快速编写的规范
# 界面/图表报表/文档/IDE等千款热门软控件火热销售中 >>
1. Reset
真的,要一直使用一个reset,无论是使用Eric Meyer Reset、YUI Reset、或者你自己的定制的reset,一定要使用。
这可以简单到仅仅将所有元素中的margin和padding属性去掉:
html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote,pre, form, fieldset, table, th, td { margin: 0; padding: 0; }
Eric Meyer和YUI的Resets样式是很棒的,但对我来说,它们走的太远了。我想要你清除所有东西,然后再重新定义元素的许多属性。这就是Eric Meyer所推荐的。如果有更有效的方法是用它的话,你不应该只是拿来他的样式文件,将它直接放到自己的项目中——提炼它,在它的基础上重建,把它变成你自己的。
哦,请不要再这样:
* { margin: 0; padding: 0; }
它被使用的地方太多了,如果把一个单选框的padding去掉,你觉得会发生什么事情? 表单元素有的时候会有些比较时髦的表现,所以最好还是让它们保持原状吧。
2. 按字母排序
一个小测试
下面的两个例子,你认为哪个能较快找到margin-right属性的位置?
例1
div#header h1 {
z-index: 101;
color: #000;
position: relative;
line-height: 24px;
margin-right: 48px;
border-bottom: 1px solid #dedede;
font-size: 18px;
}
例2
div#header h1 {
border-bottom: 1px solid #dedede;
color: #000;
font-size: 18px;
line-height: 24px;
margin-right: 48px;
position: relative;
z-index: 101;
}
不要告诉我例2没有例1快!通过将这些样式的属性按照字母排序,你所创建的连贯性将帮你减少花费在寻找某个属性的时间。
我知道有的人以这种方法组织排序,其他人又用另外的方法来组织样式的顺序。但是在我所在的公司,我们一致下定决心按照字母来排序。当你和其他人共同开发代码的时候,这种方法肯定对你有用。每次看到某个样式表没有按照字母排序,我就很讨厌,因为它们看起来比较凌乱无序……
3.有组织的
你应该组织你的样式,这样你就可以比较容易的找到想要的内容以及放在一起的相关条目。这可以使用注释的方法。例如,我是这样组织我的样式表的:
/*****Reset*****/
Reset
/*****Basic Elements*****/
为基本元素定义样式: body, h1-h6, ul, ol, a, p, etc.
/*****Generic Classes*****/
定义一些单独的样式,比如,浮动、去掉元素的底部边距等。
是的,可能他们不够语义化,但是,它们对有效的编码是很有效的。
/*****Basic Layout*****/
定义基本模板: 头部、底部、等,用来定义网站的基本结构
/*****Header*****/
定义头部的所有元素
/*****Content*****/
定义内容区域的所有元素
/*****Footer*****/
底部样式
/*****Etc*****/
继续定义其它样式通过使用注释和对相似元素进行分组,可以更快的找到你需要的内容。
4. 一致性
无论你现在以何种方式编码,保持下去。我十分讨厌关于完全单行或者完全多行的争议,这本身是没有什么可争议的! 每个人都有自己的看法,所以就用你认为对的并自始至终保持下去。
就我个人而言,我使用混合模式,如果一个样式有超过3条属性,我就采用多行:
div#header { float: left; width: 100%; }
div#header div.column {
border-right: 1px solid #ccc;
float: right;
margin-right: 50px;
padding: 10px;
width: 300px;
}
div#header h1 { float: left; position: relative; width: 250px; }
我使用这种方法是因为我的文本编辑器一行在换行前正好能容纳大概3个属性,如果没有太多的属性,显然单行要比多行更易读。
5.从正确的地方开始
在你写好你的标签之前不要动你的样式文件。当我准备开工的时候,在我创建一个CSS文件之前,我检查并对整个文档进行编码(HTML),从开始body标签到结束整个body标签。不添加任何多余的div、id或class。我会添加一些通用的div,比如头部,内容,底部,因为我知道这些东西肯定会有。
通过先编码整个文档,你可以避免出现多DIV症或多类症,这些毛病有的时候可能是致命的! 你只需要在你开始写CSS和确定需要另外的东西来实现相关效果的时候再加入它们。
使用CSS的向后选择器来定义子元素。不要直接自动的为元素添加类或id。请记住,如果一个文档没有良好的格式(结构),CSS是毫无价值的。
编辑注: 我不能足够的强调这一点。就像Trevor 说的, 在没有100%完成HTML之前,不要动你的CSS文件。
结论
这只是一些帮我写出更好的代码的一些技巧。当然这绝不是此文的结束,当我发现了其它技巧时,我会继续分享的。
本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@evget.com
文章转载自:蓝色理想面对“数字中国”建设和中国制造2025战略实施的机遇期,中车信息公司紧跟时代的步伐,以“集约化、专业化、标准化、精益化、一体化、平台化”为工作目标,大力推进信息服务、工业软件等核心产品及业务的发展。在慧都3D解决方案的实施下,清软英泰建成了多模型来源的综合轻量化显示平台、实现文件不失真的百倍压缩比、针对模型中的大模型文件,在展示平台上进行流畅展示,提升工作效率,优化了使用体验。
本站的模型资源均免费下载,登录后即可下载。模型仅供学习交流,勿做商业用途。
本站的模型资源均免费下载,登录后即可下载。模型仅供学习交流,勿做商业用途。
本站的模型资源均免费下载,登录后即可下载。模型仅供学习交流,勿做商业用途。
服务电话
重庆/ 023-68661681
华东/ 13452821722
华南/ 18100878085
华北/ 17347785263
客户支持
技术支持咨询服务
服务热线:400-700-1020
邮箱:sales@evget.com
关注我们
地址 : 重庆市九龙坡区火炬大道69号6幢
慧都科技 版权所有 Copyright 2003-
2025 渝ICP备12000582号-13 渝公网安备
50010702500608号