Zen Coding: Ò»ÖÖ¿ìËÙ±àдHTML/CSS´úÂëµÄ·½·¨
Zen Coding: Ò»ÖÖ¿ìËÙ±àдHTML/CSS´úÂëµÄ·½·¨
À´Ô´£ºhttp://www.javaeye.com/news/13149
Òë×Ô£ºSmashing Magazine
ÖÐÎÄ£ºZen Coding: Ò»ÖÖ¿ìËÙ±àдHTML/CSS´úÂëµÄ·½·¨
ÔÚ±¾ÎÄÖÐÎÒÃǽ«Õ¹Ê¾Ò»ÖÖеÄʹÓ÷ÂCSSÑ¡ÔñÆ÷µÄÓï·¨À´¿ìËÙ¿ª·¢HTMLºÍCSSµÄ·½·¨¡£ËüÓÉSergey Chikuyonok¿ª·¢¡£
ÄãÔÚдHTML´úÂë(°üÀ¨ËùÓбêÇ©¡¢ÊôÐÔ¡¢ÒýÓᢴóÀ¨ºÅµÈ)ÉÏ»¨·Ñ¶àÉÙʱ¼ä£¿Èç¹ûÄãµÄ±à¼Æ÷ÓдúÂëÌáʾ¹¦ÄÜ£¬Äã±àдµÄʱºò¾Í»áÈÝÒ×Щ£¬µ«¼´±ãÈç´ËÄ㻹ÊÇÒªÊÖ¶¯ÇÃÈëºÜ¶à´úÂë¡£
ÔÚJavaScript·½Ã棬µ±ÎÒÃÇÏëÒªÔÚÒ»¸öÒ³ÃæÉÏ»ñȡij¸öÌØ¶¨µÄÔªËØÊ±£¬ÎÒÃǾͻáÓöµ½Í¬ÑùµÄÎÊÌ⣬ÎÒÃDZØÐëдºÜ¶à´úÂ룬Õâ¾Í±äµÃÄÑÓÚά»¤ºÍÖØ Óá£JavaScript¿ò¼ÜÓ¦Ô˶øÉú£¬ËüÃÇͬʱÒýÈëÁËCSSÑ¡ÔñÆ÷ÒýÇæ¡£ÏÖÔÚ£¬Äã¿ÉÒÔʹÓüòµ¥µÄCSS±í´ïʽÀ´»ñÈ¡DOMÔªËØ£¬ÕâÏ൱¿á¡£
µ«ÊÇ£¬Èç¹ûÄã²»½ö½ö¿ÉÒÔÓÃCSSµÄÑ¡ÔñÆ÷²¼¾ÖºÍ¶¨Î»ÔªËØ£¬»¹ÄÜÉú³É´úÂë»áÔõôÑù£¿±ÈÈ磬Èç¹ûÄãÕâÑùд£º
div#content>h1+p
…È»ºó¾Í¿ÉÒÔ¿´µ½ÕâÑùµÄÊä³ö£º
<div id="content">
<h1></h1>
<p></p>
</div>
ÓÐЩÃÔ»ó°É£¿½ñÌ죬ÎÒ½«ÏòÄã½éÉÜZen Coding£¬Ò»×éÓÃÓÚ¿ìËÙHTMLºÍCSS±àÂëµÄ¹¤¾ß¡£×î³õÓÉVadim MakeevÔÚ2009Äê4ÔÂÌá³ö(ÎÄÕÂΪ¶íÓï)£¬ÓɱÉÈË(Ò²¾ÍÊÇÎÒ)¿ª·¢ÁËÊýÔ²¢×îÖÕ´ïµ½±È½Ï³ÉÊìµÄ״̬¡£Zen CodingÓÉÁ½¸öºËÐÄ×é¼þ×é³É£ºÒ»¸öËõдÀ©Õ¹Æ÷(ËõдΪÏñCSSÒ»ÑùµÄÑ¡ÔñÆ÷)ºÍÉÏÏÂÎÄÎ޹صÄHTML±êÇ©¶ÔÆ¥ÅäÆ÷¡£¿´Ò»ÏÂÕâ¸öÑÝʾÊÓÆµÀ´¿´Ò»ÏÂËüÃÇÄÜΪÄã×öЩʲô¡£
²é¿´ÊÓÆµ£ºhttp://v.youku.com/v_show/id_XMTM4NDQwNzgw.html
×¢Ò⣺¸ÃÊÓÆµÔ°æÎ»ÓÚVimeo£¬µ«ÊÇÒª¿´µÄ»°ÐèÒª·[ºÍг]ǽÏÈ£¬µØÖ·ÔÚÕâÀhttp://vimeo.com/7405114£¬ÉÏÃæµÄÊÓÆµÊÇÎҷѾ¡ÖÜÕÛ´ÓVimeoÉÏÏÂÔØÏÂÀ´ÉÏ´«µ½ÓÅ¿áµÄ£¬ÉÏ´«ºóÖÊÁ¿¾¹±»´ó´òÕÛ¿ÛÁË£¬囧¡£youtubeÉÏÒ²ÓÐÒ»·ÝÊÓÆµ£¬ÊÇ»ùÓÚAptanaµÄÑÝʾ£¬Ò»ÑùºÜ¾«²Ê£ºhttp://www.youtube.com/watch?v=ug84Ypwqfzk¡£PS:Ã²ËÆyoutubeÒª±ÈVimeo·[ºÍг]ǽÈÝÒ×Щ£¬²»¹ýÈçºÎ·[ºÍг]ǽ²»ÔÚ±¾Õ¾ÌÖÂÛ·¶Î§¡£
Èç¹ûÄãÏëÌø×ªµ½Ïêϸ½éÉܺÍʹÓÃÖ¸ÄÏ£¬Çë¿´Ò»ÏÂÑÝÊ¾Ò³Ãæ²¢Á¢¿ÌÏÂÔØÄãÊÊÓõIJå¼þ£º
Demo
Demo (ʹÓà Ctrl + , Õ¹¿ªËõд£¬ÐèÒªJavaScriptÖ§³Ö)
ÖÐÎİæÑÝʾ
ÏÂÔØ(Íêȫ֧³Ö)
Aptana (¿çƽ̨);
Coda, via TEA for Coda (Mac);
Espresso, via TEA for Espresso (Mac);
ÏÂÔØ(²¿·ÖÖ§³Ö£¬Ö»Ö§³Ö“Õ¹¿ªËõд”)
TextMate (Ö»ÄÜÓ
Ïà¹ØÎĵµ£º
Ò».ʹÓÃcssËõд
ÒýÓÃÄÚÈÝ£º
ʹÓÃËõд¿ÉÒÔ°ïÖú¼õÉÙÄãCSSÎļþµÄ´óС£¬¸ü¼ÓÈÝÒ×ÔĶÁ¡£cssËõдµÄÖ÷Òª¹æÔòÈçÏ£º
ÑÕÉ«
16½øÖƵÄÉ«²ÊÖµ£¬Èç¹ûÿÁ½Î»µÄÖµÏàͬ£¬¿ÉÒÔËõдһ°ë£¬ÀýÈ磺
#000000¿ÉÒÔËõдΪ#000;#336699¿ÉÒÔËõдΪ#369;
ºÐ³ß´ç
ͨ³£ÓÐÏÂÃæËÄÖÖÊéд·½·¨:
property:value1; ±íʾËùÓб߶¼ÊÇÒ»¸öÖµvalue1£»
proper ......
Html´úÂë
view plaincopy to clipboardprint?
<div style="width: 230px; border: 1px solid blue; overflow: hidden; text-overflow:ellipsis">
<nobr>¾ÍÊDZÈÈçÓÐÒ»ÐÐÎÄ×Ö£¬ºÜ³¤£¬±í¸ñÄÚÒ»ÐÐÏÔÊ ......
°´Å¥Ñùʽ*/
.ButtonCss {}{
font-family: "Tahoma", "ËÎÌå";
font-size:9pt; color: #003399;
border: 1px #003399 solid;
color:006699;
BORDER-BOTTOM: #93bee2 1px solid;
BORDER-LEFT: #9 ......
Ç¿ÁÒÍÆ¼öÒ»¿îCSSµ¼º½²Ëµ¥£¬Óõ½Õþ¸®Ñ§Ð£ÀàÍøÕ¾Éϳ¬¼¶²»´í¡£
ÓеãÀàËÆÕ¾³¤Íø²Ëµ¥µÄζµÀ£¬Ö»²»¹ýÑÕÉ«²»Ò»Ñù¶øÒÑ£¬ÕâÖֲ˵¥»¹²»ÊÇÕæÕýÒâÒåÉϵēÏÂÀ”²Ëµ¥£¬Ó¦¸Ã½Ð»¬³ö²Ëµ¥<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transition ......
ʹÓÃAnt¹¹½¨ÅúÁ¿Ñ¹Ëõjs¡¢cssÎļþ
ʹÓÃAntÅúÁ¿Ñ¹Ëõjs¡¢cssÎļþ
2010 Äê 01 ÔÂ 27 ÈÕ
ÌṩÁËÒ»¸öant½Å±¾£¬ËüÖ÷ÒªÓÃÓÚÅúÁ¿Ñ¹ËõÅú¶¨Ä¿Â¼ÏµÄjs¡¢cssÎļþ£¬´Ëant½Å±¾Ê¹Óõ½ÁË YUI Compressor¡¢antcontrib
.
Ant Contrib
Ö÷ҪʹÓÃËüËùÌṩµÄforeach¡¢propertyregexÕâÁ½¸ötarget
yui compressor ²Î¿¼×ÊÁÏ
ѹËõ»á´ø ......