网站首页  注册会员  本站免费电影 留言板  繁體中文

 

您现在的位置: 陈鹏个人网站 >> 电脑应用 >> 网络应用 >> 网页制作 >> 正文
 

|
闂傚倸鍊搁崐鐑芥倿閿曗偓椤啴宕归鍛數闂侀€炲苯澧扮紒杈ㄥ浮楠炴捇骞掑┑鍫濇倯闁诲氦顫夊ú妯煎垝閹捐绠圭憸鐗堝俯閺佸啴鏌ㄥ┑鍡樺櫣濠碘剝濞婂缁樻媴閸涘﹥鍎撻梺鍝ュ櫏閸嬪﹤鐣烽幇顖樹汗闁圭儤鍨舵潏鍫ユ椤愩垺澶勯柟椋庢嚀閳藉濮€閳╁啯鐝抽梻浣虹《閸撴繈鎮烽妷鈺佺厱鐎光偓閸曨兘鎷洪梻鍌氱墛缁嬫帡鏁嶉弮鍫熺厵闁告垯鍊栫€氾拷
|
缂傚倸鍊搁崐鐑芥嚄閸洘鎯為幖娣妼閻骞栧ǎ顒€濡肩紒鈧崒娑氱闁瑰鍊戝璺哄嚑閹兼番鍔嶉悡蹇涚叓閸ヮ灒鍫ュ磻閹惧磭鏆﹂柛銉㈡櫇瀹撲線姊婚崒娆戭槮闁汇倕娲ら々濂稿Ω閳哄倸娈戦梺鍓插亝濞叉牠宕归崒鐐寸叆闁绘洖鍊圭€氾拷
|
婵犵數濮烽弫鎼佸磻濞戙垺鍋ら柕濞у懎鏆楅梺绋跨灱閸嬫稓绮堥崘顔界厓闁告繂瀚埀顒佹倐瀹曟粓顢楅崟顑芥嫼闁荤姴娲╃亸娆撳礄閸︻厾纾奸柤纰卞墰鐢稓绱掗弮鍌氭灈鐎规洖銈告俊鐑藉Ψ瑜忓畷鍫曟⒒娴h姤纭堕柛锝忕畵楠炲繘鏁撻敓锟�
|
闂傚倸鍊风粈渚€骞栭位鍥焼瀹ュ懐锛熼梺鍦濠㈡﹢宕归崒娑栦簻闁哄秲鍔岄悞褰掓煛鐎n亪鍙勯柡灞炬礉缁犳稒绻濋崘銊︾彴闂備胶枪椤戝棝骞愰幖浣哥叀濠㈣泛锕﹂弳锕傛煕閵夈垺娅嗘繛鍫熸そ濮婅櫣鎷犻幓鎺濆妷闂佺粯妫忛崜鐔肩嵁韫囨稒鏅搁柨鐕傛嫹
|
缂傚倸鍊搁崐鎼佸磹閹间礁纾归柟闂寸閻ゎ喗銇勯弽顐粶闁搞劌鍊块弻娑㈡晜鐠囨彃绠归梺鎼炲妽缁诲牓寮婚妶鍥╃煓閻犳亽鍔嬬划鐢告⒑缁嬫寧鎹i柛鐘崇墵瀵鏁撻悩鑼槰闂侀潧枪閸庮噣宕戦幘骞夸汗闁圭儤鍨舵潏鍫ユ⒑鐠恒劌娅愰柟鍑ゆ嫹
|
IT闂傚倸鍊搁崐椋庣矆娓氣偓楠炴牠顢曢敃鈧壕褰掓煟閹达絾顥夌痪顓涘亾闂備礁鎲¢崝鏇炍熸繝鍌樷偓鎺撶節濮橆厾鍙嗛梺缁樻礀閸婂湱鈧熬鎷�
|
闂傚倸鍊风粈浣革耿闁秴鍌ㄧ憸鏃堝箖濞差亜惟闁靛鍠楃紞搴㈢節閻㈤潧校闁煎綊绠栧鍛婄瑹閳ь剟寮婚弴銏犻唶婵犲灚鍔栫瑧缂傚倷鑳舵刊顓㈠闯閿濆钃熺€广儱鐗滃銊╂⒑閸涘﹥灏伴柣鐔叉櫊閵嗕礁鈻庨幒鏃傛澑濠电偞鍨堕悷锕€鈻嶉姀銈嗏拺閻犳亽鍔屽▍鎰版煙閸戙倖瀚�
|
闂傚倸鍊搁崐鐑芥倿閿曗偓椤啴宕归鍛數闂侀€炲苯澧扮紒杈ㄥ浮楠炴捇骞掑┑鍫濇倯闁诲氦顫夊ú妯煎垝瀹€鍕仼闁绘垼妫勯悙濠囨煃閸濆嫬鏋︾紒杈皺缁辨捇宕掑顑藉亾閹间焦鍋嬮煫鍥ㄦ⒐閸欏繘鏌i姀鈶跺綊鎯屽Δ鍛叆闁绘洖鍊圭€氾拷
|
闂傚倸鍊峰ù鍥х暦閻㈢ǹ绐楅柟鎵閸嬶繝鏌曟径鍫濆壔婵炴垶菤閺€浠嬫倵閿濆啫濡烽柛瀣崌瀹曟帡鎮欓弻銉ユ暪闂備礁鎼ú銊╁磻閻愮儤鍊垫い鎺嗗亾闁宠鍨块幃娆撳矗婢舵ɑ锛侀梻浣规偠閸斿酣宕伴弽褜鍤曞┑鐘崇閺呮悂鏌ㄩ悤鍌涘
|
   
专 题 栏 目
 濠电姷鏁告慨鐑藉极閹间礁纾绘繛鎴炵懃缁剁偤鏌涢妷顔煎缂佲偓閸喓绡€闂傚牊绋掗敍鏃堟煠閺夎法浠㈤棁澶愭煥濠靛棙鍣洪悹鎰ㄥ墲閵囧嫰鍩¢崘銊ュ箣闂佽鍠涢~澶愬箯閸涙潙浼犻柕澶樺灣缁€濠勭磽閸屾瑧顦︽い锔诲灦閹ê鈹戠€n亞鍙€婵犮垼鍩栭崝鏇犵不婵犳碍鍊垫繛鎴烆仾椤忓棗顥氶柛鎰▕濞撳鏌曢崼婵堢閻庝絻鍋愮槐鎺楊敊閻e本鍣у銈嗘穿缂嶄礁鐣烽幇鐗堝亜闁惧繗顫夊鎴︽⒒娴e憡鎯堟繛灞傚姂瀹曚即骞樼紒妯轰粧闂佽法鍣﹂幏锟�
相 关 文 章

QQ空间最新免费鼠标样式
通通透透玩转QQ空间背景
让CSS样式表优化更整洁而
IE对网页中引入CSS样式表
在DW中使用CSS样式表来设
CSS样式表创建美妙绝伦的
网页制作中CSS样式表的十
Firefox与IE在CSS样式表
利用CSS样式表改善网站可
让网站链接样式千奇百怪

 
让样式表CSS代码更加专业规范           
让样式表CSS代码更加专业规范
作者:陈鹏 文章来源:eNet 点击数:100 更新时间:2009-9-12 9:13:29
 




 

每个人都可以编写CSS代码,甚至你现在已经让它为你的项目工作了。但是CSS还可以更好吗?虽然有多种这方面的技巧,得开始用这五个方面改进你的CSS,会让你显得更加专业,也能使代码有好!

  一、重置

  首先,很认真的告诉你,总是要重置某些分类。无论你是使用 Eric Meyer Reset、YUI Reset,或者你自己编写的重置代码,只要使用就对了。

  它能很简单的移除所有元素的填充(padding)和边距(margin):

  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 Reset和YUI Reset都是非常强大的,但是对于我而言,它们走的太远了。我觉得你最终需要重置一切,然后重新定义所有元素的属性。这就是为什么Eric Meyer推荐更有效的使用(重置样式表),而你不要只是使用他的重置样式表,将它拖放到你的项目中。调整它(的重置样式表),建立属于自己的重置样式表。

  噢,请停止使用:

  * { margin: 0; padding: 0; }

  花更多的时间去制作它,当你移除了填充(padding)你认为单选按钮会发生什么变化?表单元素有时能够做些时髦的事情,所以最有效的方式就是将他们独立。

  二、排序

  一个小的测试:这个例子就是要让你思考如何更快的找到右边距属性?

  Example#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;

  }

  Example#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;}

  你不能告诉我Example#2不能更快的找到右边距属性。根据字母排序你的元素属性。一致的创建你的CSS,将帮助你节省花费在寻找一个特殊属性的时间。

  我知道一些人用这样的方法去组织代码,其他人又用另一种方法去组织,但是在我的公司,我们协商一致做出决定,所有的代码都将按照字母排序来组织。通过这样组织代码与其他人协同工作一定是有帮助的。当我碰到属性没有按照字母排序的层叠样式表我每一次都会退缩。

  三、组织

  你应该组织你的样式表以致相关的内容靠在一起,更简单的找到想要的。使用更有效的注解。举个例子,这是我如何构造我的层叠样式表:

  /*****Reset*****/移除元素的填充(padding)和边距(margin)。

  /*****Basic Elements*****/定义基本元素的样式: body, h1-h6, ul, ol, a, p, 等.

  /*****Generic Classes*****/定义简单的风格,好像浮动的某一侧, 移除元素的下边距, 等当然,它们大部分都与我们希望的语义不相关,但是它们是高效处理代码所必须的。

  /*****Basic Layout*****/定义基本的模板: header, footer等. 帮助定义网页布局的基本元素

  /*****Header*****/定义所有Hearder元素

  /*****Content*****/定义所有内容框内的元素

  /*****Footer*****/定义所有Footer的元素

  /*****Etc*****/定义其他的选择器。通过注解和归类相似元素的分组,将更快的找到你想要的。

  四、一致性

  无论你决定使用什么方式去编写代码,保持一致。我已经对全部放在1行VS多行的CSS编写编写方式的争论感到乏味和疲倦。这是不需要争辩的。每个人都有自己的观点,所以选择一种你喜欢的工作方式,并在所有的样式表中保持一致。

  就我个人而言,我将使用两者结合的方式。如果一个选择器超过了3个属性,我将截断它采用多行的方式编写。

  div#header { float: left; width: 100%; }

  div#header div.column {

  border-right: 1px solid #ccc;

  float: rightright;

  margin-right: 50px;

  padding: 10px;

  width: 300px;

  }

  div#header h1 { float: left; position: relative; width: 250px; }

  所以找到你喜欢的工作方式然后保持一致。

  五、从正确的地方开始

  在完成标记语言之前不要去尝试靠近你的样式表。

  当我准备分割一张网页的时候,创建CSS文件之前,我需要预览并且标记body开标签到body的闭合标签之间的所有文档。我不会增加额外的DIV ,ID,或者类选择器。我将会添加一些一般的DIV,就好像hearder、content、footer.因为我知道这些东西是现实存在的。

  通过先标记文档,你将不会碰到本已注定的divities1和classitis2麻烦!/*You only need to add in that stuff once you have begun to write the CSS and realize that you are going to need another hook to accomplish what you are trying to achieve.*/(原文未译)。

  利用CSS子选择器指定子元素;不要只是机械的给元素添加类或者ID选择器。记住:没有一个良好的格式化文档(或者标记结构)CSS是无价值的。

  总结

  这些能够帮助我更好的完成CSS代码的编写。但是这并不意味着这张列表的结束,接下来我将会去带来一些其他的与大家分享,欢迎您关注webjx.com。

  

文章录入:陈鹏    责任编辑:陈鹏 
  • 上一篇文章:

  • 下一篇文章:
  • 【字体: 】【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口
     
     
     
     
     

    Copyright © 2007 - 2009 chenpeng123.com All Rights Reserved
    本站所有文章,软件等均来自网络收集,不代表本站观点,仅供学习和研究使用。如有侵犯您的版权,请联系我们,本站将立即删除。
    鲁ICP备07014697号
    你是本站第 位访客
    51La