加入收藏 | 设为首页 | 会员中心 | 我要投稿 河北网 (https://www.hebeiwang.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 创业 > 正文

CSS技巧之如何组织和注释CSS文件

发布时间:2018-09-09 16:48:12 所属栏目:创业 来源:站长网
导读:关于怎样组织和注释CSS文件,有许多要领,可是哪一种要领最好,却没有谜底,这要靠你本身在事变中逐步的去思索了.假如你有更好的要领请汇报各人让各人一路分享..... 当我们的样式表变得很大和很伟大时,按整洁易懂的布局组织它长短常重要的.组织样式表可以让我们
关于怎样组织和注释CSS文件,有许多要领,可是哪一种要领最好,却没有谜底,这要靠你本身在事变中逐步的去思索了.假如你有更好的要领请汇报各人让各人一路分享.....

当我们的样式表变得很大和很伟大时,按整洁易懂的布局组织它长短常重要的.组织样式表可以让我们写出更有服从的CSS,并让其他人轻易大白和编辑的CSS样式.虽然,每个计划师城市有本身所钟爱的方法.

1.通过位置来组织

有些计划师喜好用区块来组织他们的样式法则,全部的#branding在一个组里,全部的#content在另一个组里.

Copy to ClipboardLiehuo.Net Codes引用的内容:[www.veryhuo.com] /* =content_main */
div#content_main {width:70%;}
div#content_main p{font-size:100%;}
div#content_main P>a {text-decoration:underline;}

/* =content_sub */

div#contetn_sub {width:30%;}
div#contetn_sub p{ color:#666;}
div#contetn_sub p>strong{font-weight:normal;}

2.给CSS分部门

通过团结CSS注释,部门标志和把破折号作为脱离符的要领可以很轻易地给CSS分别差异的部门.这样可以辅佐你和往后的开拓职员找到某个法则,并领略那些法则运用到了计划的哪部门上

Copy to ClipboardLiehuo.Net Codes引用的内容:[www.veryhuo.com] /* main content
-------------------------------------- */

在最初编写完CSS几个月后,碰着了贫困必要返回到项目时,这个要领可以提醒每个部门从那边开始,这样做能节减我们的时刻.

3.用元向来组织

其他人则更喜好用元向来组织法则,按问题,段落和列表分组和组合全部元素.

Copy to ClipboardLiehuo.Net Codes引用的内容:[www.veryhuo.com] /* p */
p { line-height:110%;}
blockquote p { padding-left: 1em;}
div#site_info p { text-align: center;}

/* ul */

ul { line-height:110%;}
div#nav_main ul { list-style-type: none;}
div#content_sub ul{ border: 1px solid #ccc;}

4.CSS标志

直接在注释部门标志文本之前添加简的标志,好比字符"=",能让我们更轻易地找到并跳转到谁人段落.

Copy to ClipboardLiehuo.Net Codes引用的内容:[www.veryhuo.com] /* =p */

用我们的文本编辑器的探求呼吁去探求"=p",可以忽略list-style-type或padding这样无结果,直接跳转到段落部门.

5.把CSS分成多个文件

对付人们对最终产物中,一个链接的或导入的CSS文件是不是比多个独立的文件更于便于打点这一点存在争议,你可以详细环境详细说明来获得最好的谜底.可以明晰的一个究竟是:在建设交互原型时,行使多个文件有明明的上风.

举例来说,你们可以把计划原型拆分到以下独立文件中.

1)机关样式包括了表现属性;浮动;定位;宽度;高度;添补和边距(layout.css).

2)颜色样式包括了配景属性;颜色;图像;以及文本颜色(color.css).

3)版式信息包括了字体和字体巨细,行高,字符隔断和文本装饰(type.css).

为了简化和镌汰链接到标签或来自于标签的样式表的数目,我们可以选择链接一个文件在这个文件里用@import@法则导入附加样式表.

引用的样式表必需呈此刻其他法则之前,样式表的头部,这样才气担保正常的结果.

Copy to ClipboardLiehuo.Net Codes引用的内容:[www.veryhuo.com] @import url(color.css);
@imporp url(type.css);

[ remaining layout.css rules]

迄今为止,我们已经学会行使表意的标签和CSS建设可交互的原型,辅佐完成轻量,表意的代码,轻易领略的内容,以及机动的计划,还可以辅佐我们更有服从地和同事以及客户雷同.-----摘自:<逾越CSS:Web计划艺术精华>

转自夕木木:http://www.ximumu.cn

(编辑:河北网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    热点阅读